 |
| Cara Membuat Game lengkap Kode HTML START TECH MEMORY CHALLENGE |
🛡️ PRO TECH MEMORY
Time: 0s
Flips: 0
🏆 ELITE AGENTS (TOP 10) 🏆
Memuat data...
Berikut kode Game ini:
<div id="memoryGameWrap" style="font-family: "Segoe UI", Tahoma, sans-serif; text-align: center;">
<button id="memoryOpenBtn">🔵 START TECH MISSION</button>
<div id="memoryOverlay">
<div id="memoryBox">
<div class="mem-header">
<span style="color: deepskyblue; text-shadow: rgba(0, 191, 255, 0.5) 0px 0px 10px;">🛡️ PRO TECH MEMORY</span>
<button id="memoryClose">✖</button>
</div>
<div class="mem-info">
<span>Time: <b id="memoryTime" style="color: deepskyblue;">0</b>s</span>
<span>Flips: <b id="memoryFlips" style="color: deepskyblue;">0</b></span>
</div>
<div id="gameGrid"></div>
<button id="memoryRestart">RESTART SYSTEM 🚀</button>
<div id="memoryLeaderboard">
<div class="lb-head">🏆 ELITE AGENTS (TOP 10) 🏆</div>
<div id="memory-score-list">Memuat data...</div>
</div>
</div>
</div>
</div>
<style>
/* 1. PERBAIKAN CONTAINER AGAR TIDAK LEBAR MELEBIHI LAYAR */
#memoryOverlay {
display: none;
position: fixed;
inset: 0;
background: rgba(5, 15, 25, 0.98);
z-index: 9999999;
padding: 10px;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
}
#memoryBox {
background: #0a1929;
padding: 15px;
border-radius: 15px;
border: 2px solid #007fff;
width: 100%;
max-width: 380px; /* Lebar maksimal dibatasi agar aman di HP */
color: #ffffff;
box-shadow: 0 0 25px rgba(0, 127, 255, 0.2);
box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
position: relative;
overflow: hidden;
}
/* Tombol Buka Utama */
#memoryOpenBtn {
background: linear-gradient(135deg, #0056b3, #007fff);
color: white; border: none; padding: 12px 25px; border-radius: 50px;
font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 127, 255, 0.4);
font-size: 14px; letter-spacing: 1px;
}
/* Header & Info */
.mem-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: bold; font-size: 16px; }
#memoryClose { background: none; border: none; color: #007fff; font-size: 24px; cursor: pointer; }
.mem-info { margin-bottom: 10px; font-size: 13px; display: flex; justify-content: space-between; color: #a0aab5; border-bottom: 1px solid #1e4976; padding-bottom: 8px; }
/* 2. PERBAIKAN GRID & KARTU AGAR RAPI */
#gameGrid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 Kolom Rata */
gap: 8px; /* Jarak antar kartu dikecilkan */
background: #0f2438;
padding: 10px;
border-radius: 12px;
border: 1px solid #1e4976;
margin-bottom: 12px;
}
.card {
height: 55px; /* Tinggi kartu dikurangi agar muat */
background: #173153;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px; /* Ukuran emoji pas */
color: transparent; /* Sembunyikan emoji saat tertutup */
border: 1px solid #1e4976;
transition: all 0.2s ease;
user-select: none;
}
/* Efek Hover di PC */
.card:active { transform: scale(0.95); }
/* 3. PERBAIKAN LOGIKA BALIK KARTU (Hapus RotateY penyebab teks terbalik) */
.card.flipped {
background: #ffffff;
color: #000; /* Tampilkan Emoji */
border-color: #00bfff;
box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
transform: scale(1.05); /* Efek membesar sedikit ganti putar */
}
.card.matched {
background: #007fff;
color: #fff;
border-color: #fff;
opacity: 0.8;
cursor: default;
}
/* Tombol Restart */
#memoryRestart {
background: #007fff; color: white; border: none; padding: 12px;
border-radius: 8px; width: 100%; cursor: pointer; font-weight: bold;
text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
}
/* Leaderboard Rapi */
#memoryLeaderboard {
margin-top: 15px; background: #0f2438; border-radius: 10px; padding: 10px;
border: 1px solid #1e4976; font-size: 11px; text-align: left;
}
.lb-head { text-align: center; color: #00bfff; font-weight: bold; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid #1e4976; }
#memory-score-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 100px; overflow-y: auto; }
.lb-item { background: #1a3a5e; padding: 4px 8px; border-radius: 4px; color: #fff; display: flex; justify-content: space-between; }
</style>
<script>
(function() {
const SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwXpbwdl4363sflc7nhOcRG4wOSqrh6cdJXREkWSw0IM3UAz-kzMNzKSP6W_cQm8SiB/exec";
// EMOJI STANDAR (Bukan Kode) agar tidak error
const icons = ['🚀','💻','🛡️','📡','🔋','🤖','💾','⚡'];
let cards = [...icons, ...icons];
let flippedCards = [];
let matchedCount = 0;
let flips = 0;
let timer;
let seconds = 0;
let isLocked = false;
const grid = document.getElementById('gameGrid');
const overlay = document.getElementById('memoryOverlay');
function shuffle(array) { return array.sort(() => Math.random() - 0.5); }
function createBoard() {
grid.innerHTML = '';
shuffle(cards).forEach((icon, index) => {
const card = document.createElement('div');
card.classList.add('card');
// Simpan emoji langsung sebagai teks, bukan innerHTML
card.dataset.icon = icon;
card.onclick = () => flipCard(card);
grid.appendChild(card);
});
}
function flipCard(card) {
if (isLocked || card.classList.contains('flipped') || card.classList.contains('matched')) return;
// Tampilkan Emoji
card.classList.add('flipped');
card.innerText = card.dataset.icon;
flippedCards.push(card);
if (flippedCards.length === 2) {
flips++;
document.getElementById('memoryFlips').innerText = flips;
checkMatch();
}
}
function checkMatch() {
isLocked = true;
const [c1, c2] = flippedCards;
if (c1.dataset.icon === c2.dataset.icon) {
c1.classList.add('matched');
c2.classList.add('matched');
matchedCount += 2;
flippedCards = [];
isLocked = false;
if (matchedCount === cards.length) winGame();
} else {
setTimeout(() => {
// Tutup kartu (hapus teks dan kelas)
c1.classList.remove('flipped'); c1.innerText = '';
c2.classList.remove('flipped'); c2.innerText = '';
flippedCards = [];
isLocked = false;
}, 700);
}
}
function startTimer() {
seconds = 0;
clearInterval(timer);
timer = setInterval(() => {
seconds++;
document.getElementById('memoryTime').innerText = seconds;
}, 1000);
}
async function loadScores() {
const list = document.getElementById('memory-score-list');
list.innerHTML = "<div style='grid-column: span 2; text-align:center; color:#888;'>Connecting to Server...</div>";
try {
const res = await fetch(SCRIPT_URL + "?t=" + new Date().getTime());
const data = await res.json();
list.innerHTML = data.slice(0, 10).map((s, i) => `
<div class="lb-item">
<span>${i+1}. ${s.name}</span>
<b style="color:#00bfff">${s.score}</b>
</div>
`).join('');
} catch (e) { list.innerHTML = "Gagal memuat data."; }
}
function winGame() {
clearInterval(timer);
// Rumus Skor: Semakin cepat, poin makin besar
const finalScore = Math.floor(10000 / (seconds === 0 ? 1 : seconds));
setTimeout(() => {
let name = prompt("MISSION COMPLETE! 🎖️\nFinal Points: " + finalScore + "\nYour Codename:");
if (!name) return;
let wa = prompt("WhatsApp (For Reward):");
fetch(SCRIPT_URL, {
method: 'POST',
mode: 'no-cors',
body: JSON.stringify({
name: name.substring(0,8).toUpperCase(),
score: finalScore,
wa: wa || "0"
})
}).then(() => {
alert("Data Uploaded Successfully! 📡");
loadScores();
});
}, 300);
}
document.getElementById('memoryOpenBtn').onclick = () => { overlay.style.display = 'flex'; loadScores(); };
document.getElementById('memoryClose').onclick = () => { overlay.style.display = 'none'; clearInterval(timer); };
document.getElementById('memoryRestart').onclick = () => {
matchedCount = 0; flips = 0;
document.getElementById('memoryFlips').innerText = 0;
createBoard(); startTimer();
};
})();
</script>