Game Onet: Huruf & Angka
Game Onet: Mengenal Huruf dan Angka
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f9;
}
h1 {
margin-top: 20px;
}
.board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
margin: 20px auto;
width: 480px;
height: 480px;
}
.card {
width: 100px;
height: 100px;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
cursor: pointer;
border-radius: 8px;
}
.card.flipped {
background-color: #2ecc71;
}
.card.matched {
background-color: #95a5a6;
}
const board = document.getElementById("game-board");
const correctSound = document.getElementById("correct-sound");
const wrongSound = document.getElementById("wrong-sound");
let cards = [
'A', 'A', 'B', 'B', 'C', 'C', '1', '1', '2', '2', '3', '3', '4', '4'
];
// Mengacak kartu
cards = cards.sort(() => Math.random() - 0.5);
let flippedCards = [];
let matchedCards = 0;
function createCard(cardValue, index) {
const card = document.createElement("div");
card.classList.add("card");
card.dataset.value = cardValue;
card.addEventListener("click", () => flipCard(card));
board.appendChild(card);
}
function flipCard(card) {
if (flippedCards.length === 2 || card.classList.contains("flipped") || card.classList.contains("matched")) {
return;
}
card.textContent = card.dataset.value;
card.classList.add("flipped");
flippedCards.push(card);
if (flippedCards.length === 2) {
checkMatch();
}
}
function checkMatch() {
if (flippedCards[0].dataset.value === flippedCards[1].dataset.value) {
flippedCards[0].classList.add("matched");
flippedCards[1].classList.add("matched");
matchedCards += 2;
correctSound.play();
// Cek apakah permainan selesai
if (matchedCards === cards.length) {
setTimeout(() => alert("Selamat! Kamu menang!"), 500);
}
} else {
wrongSound.play();
setTimeout(() => {
flippedCards[0].textContent = '';
flippedCards[1].textContent = '';
flippedCards[0].classList.remove("flipped");
flippedCards[1].classList.remove("flipped");
}, 1000);
}
flippedCards = [];
}
// Membuat papan permainan
cards.forEach((card, index) => createCard(card, index));