Memory Game Code In Javascript

MUAZHAN

7 min read

·

Jun 21, 2024

30

Share

Memory Game dengan JavaScript

Membuat game Memory sederhana dengan JavaScript dapat menjadi proyek yang menyenangkan dan menantang bagi pemula. Artikel ini akan memandu Anda melalui langkah-langkah untuk membangun game Memory sederhana yang menampilkan pasangan kartu yang cocok.

1. HTML Struktur

Pertama, kita akan membuat struktur HTML dasar untuk game kita. Ini akan mencakup papan game dan area tempat kita akan menampilkan skor dan waktu.

  
  


  

    
Memory Game
    

      
Skor: 0
    
    

      
Waktu: 0
    
    

  
  

2. CSS Styling

Selanjutnya, kita akan menambahkan beberapa CSS dasar untuk membuat game lebih menarik. Anda dapat menyesuaikan gaya sesuai dengan preferensi Anda.

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.container {
  width: 600px;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.game-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 100px;
  height: 150px;
  margin: 10px;
  background-color: #ccc;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  transform: rotateY(180deg);
}

.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
}

.hidden {
  display: none;
}

.matched {
  background-color: #00ff00;
  cursor: default;
}

3. JavaScript Logic

Sekarang, kita akan menambahkan JavaScript untuk membuat game berfungsi.

const gameBoard = document.getElementById("gameBoard");
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");

let score = 0;
let time = 0;
let timerInterval;
let flippedCards = [];
let matchedCards = [];

// Daftar simbol kartu
const symbols = ["🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🦁"];

// Fungsi untuk membuat kartu
function createCard(symbol) {
  const card = document.createElement("div");
  card.classList.add("card");

  const cardFront = document.createElement("div");
  cardFront.classList.add("card-front");
  cardFront.textContent = symbol;

  const cardBack = document.createElement("div");
  cardBack.classList.add("card-back");

  card.appendChild(cardFront);
  card.appendChild(cardBack);

  card.addEventListener("click", flipCard);
  return card;
}

// Fungsi untuk membuat papan game
function createGameBoard(numPairs) {
  // Membuat pasangan simbol secara acak
  const symbolsArray = [];
  for (let i = 0; i < numPairs; i++) {
    symbolsArray.push(symbols[i], symbols[i]);
  }
  shuffleArray(symbolsArray);

  // Menambahkan kartu ke papan game
  symbolsArray.forEach((symbol) => {
    const card = createCard(symbol);
    gameBoard.appendChild(card);
  });
}

// Fungsi untuk mengacak array
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// Fungsi untuk membalik kartu
function flipCard() {
  this.classList.add("flipped");

  flippedCards.push(this);

  if (flippedCards.length === 2) {
    // Jika dua kartu sudah dibalik, periksa apakah mereka cocok
    checkMatch();
  }
}

// Fungsi untuk memeriksa apakah kartu cocok
function checkMatch() {
  if (flippedCards[0].querySelector(".card-front").textContent === flippedCards[1].querySelector(".card-front").textContent) {
    // Jika cocok, tambahkan skor dan tandai kartu sebagai cocok
    score++;
    scoreDisplay.textContent = score;
    flippedCards[0].classList.add("matched");
    flippedCards[1].classList.add("matched");
    matchedCards.push(flippedCards[0], flippedCards[1]);
    flippedCards = [];

    // Periksa apakah semua kartu sudah cocok
    if (matchedCards.length === symbols.length * 2) {
      // Jika semua kartu sudah cocok, hentikan timer dan tampilkan pesan kemenangan
      clearInterval(timerInterval);
      alert("Selamat! Anda telah memenangkan permainan!");
    }
  } else {
    // Jika tidak cocok, balik kartu setelah penundaan singkat
    setTimeout(() => {
      flippedCards[0].classList.remove("flipped");
      flippedCards[1].classList.remove("flipped");
      flippedCards = [];
    }, 1000);
  }
}

// Fungsi untuk memulai timer
function startTimer() {
  timerInterval = setInterval(() => {
    time++;
    timerDisplay.textContent = time;
  }, 1000);
}

// Inisialisasi game
createGameBoard(5); // Buat papan game dengan 5 pasang kartu
startTimer(); // Mulai timer

4. Memulai Game

Setelah selesai membuat kode HTML, CSS, dan JavaScript, simpan file dengan nama "index.html", "style.css", dan "script.js" di folder yang sama. Buka file "index.html" di browser Anda untuk memainkan game.

5. Fitur Tambahan

Anda dapat menambahkan lebih banyak fitur ke game Memory Anda, seperti:

• Tingkat kesulitan: Ubah jumlah pasangan kartu untuk membuat game lebih mudah atau lebih sulit.
• Musik latar belakang: Tambahkan musik latar belakang untuk meningkatkan pengalaman bermain.
• Efek suara: Tambahkan efek suara untuk kartu yang dibalik, cocok, dan tidak cocok.
• Penghitung waktu: Tampilkan berapa lama waktu yang dibutuhkan untuk menyelesaikan game.
• Tabel skor: Simpan skor terbaik pemain.

Semoga panduan ini membantu Anda membangun game Memory sederhana dengan JavaScript!