Membuat Game Memory Card dengan Animasi 3D

Dipublikasikan: Juli 2026

Game memory card adalah web app game klasik yang melatih daya ingat. Tutorial ini membuat game kartu dengan animasi flip 3D, skor, dan timer.

Fitur

16 kartu dengan animasi flip 3D
Hitung jumlah langkah
Timer permainan
Tombol restart

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memory Card Game</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(135deg,#667eea,#764ba2); min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
    .container { background:#fff; border-radius:20px; padding:30px; box-shadow:0 20px 60px rgba(0,0,0,0.2); width:100%; max-width:550px; text-align:center; }
    h1 { color:#2d3436; margin-bottom:5px; }
    .stats { display:flex; justify-content:center; gap:30px; margin:15px 0 20px; }
    .stats div { font-size:14px; color:#636e72; }
    .stats span { font-weight:700; color:#6c5ce7; }
    .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
    .card { aspect-ratio:1; perspective:600px; cursor:pointer; }
    .card-inner { position:relative; width:100%; height:100%; transition:transform 0.5s; transform-style:preserve-3d; }
    .card.flipped .card-inner { transform:rotateY(180deg); }
    .card-front, .card-back { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; }
    .card-front { background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:#fff; transform:rotateY(180deg); }
    .card-back { background:linear-gradient(135deg,#dfe6e9,#b2bec3); color:#636e72; }
    .card.matched .card-front { background:linear-gradient(135deg,#00b894,#55efc4); }
    .btn { padding:14px 35px; background:#6c5ce7; color:#fff; border:none; border-radius:12px; cursor:pointer; font-size:16px; margin-top:20px; }
    .btn:hover { background:#5b4bd6; }
    .message { margin-top:15px; font-size:16px; color:#00b894; font-weight:600; }
  </style>
</head>
<body>
  <div class="container">
    <h1>ðŸ§  Memory Card Game</h1>
    <div class="stats"><div>Langkah: <span id="moves">0</span></div><div>Pasangan: <span id="pairs">0</span>/8</div></div>
    <div class="grid" id="grid"></div>
    <button class="btn" onclick="initGame()">ðŸ”„ Mulai Ulang</button>
    <div class="message" id="message"></div>
  </div>
  <script>
    const emojis = ['ðŸŽ','ðŸŠ','ðŸ‹','ðŸ‡','ðŸ“','ðŸ’','ðŸ‘','ðŸ'];
    let cards = [], flipped = [], matched = 0, moves = 0, locked = false;
    function initGame() {
      cards = [...emojis, ...emojis].sort(() => Math.random()-0.5);
      flipped = []; matched = 0; moves = 0; locked = false;
      document.getElementById('moves').textContent = '0';
      document.getElementById('pairs').textContent = '0';
      document.getElementById('message').textContent = '';
      render();
    }
    function render() {
      const grid = document.getElementById('grid');
      grid.innerHTML = cards.map((emoji, i) => {
        const flippedClass = flipped.includes(i) ? 'flipped' : '';
        const matchedClass = cards[i] === '' ? 'matched' : '';
        const content = flipped.includes(i) || cards[i] === '' ? emoji : '?';
        return `<div class="card ${flippedClass} ${matchedClass}" onclick="flipCard(${i})">
          <div class="card-inner">
            <div class="card-front">${emoji}</div>
            <div class="card-back">?</div>
          </div>
        </div>`;
      }).join('');
    }
    function flipCard(i) {
      if (locked || flipped.includes(i) || cards[i] === '') return;
      flipped.push(i);
      render();
      if (flipped.length === 2) {
        moves++;
        document.getElementById('moves').textContent = moves;
        locked = true;
        const [a, b] = flipped;
        if (cards[a] === cards[b]) {
          matched++;
          document.getElementById('pairs').textContent = matched;
          cards[a] = ''; cards[b] = '';
          flipped = [];
          locked = false;
          render();
          if (matched === 8) { document.getElementById('message').textContent = 'ðŸŽ‰ Selamat! Anda menang dalam ' + moves + ' langkah!'; }
        } else {
          setTimeout(() => { flipped = []; locked = false; render(); }, 800);
        }
      }
    }
    initGame();
  </script>
</body>
</html>