Game Onet TK Al-Islam
Game Onet Huruf & Angka
Waktu: 60 detik
Skor: 0
body {
background-color: #f0f8ff;
}
header, footer {
background-color: #ff6347;
}
#gameBoard {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.card {
width: 60px;
height: 60px;
background-color: #fff;
border: 2px solid #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
background-color: #ffeb3b;
}
.card.matched {
background-color: #4caf50;
}
.card:hover {
background-color: #ff9800;
}
const boardSize = 4;
const totalCards = boardSize * boardSize;
const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
const numbers = ['1', '2', '3', '4', '5', '6', '7', '8'];
const items = [...letters, ...numbers];
let shuffledItems = [];
let firstCard = null;
let secondCard = null;
let matchedPairs = 0;
let timer = 60;
let timerInterval;
const gameBoard = document.getElementById('gameBoard');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
function shuffle(array) {
let currentIndex = array.length, randomIndex, temporaryValue;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function startGame() {
shuffledItems = shuffle([...items, ...items]);
gameBoard.innerHTML = '';
shuffledItems.forEach((item, index) => {
const card = document.createElement('div');
card.classList.add('card');
card.dataset.index = index;
card.dataset.item = item;
card.addEventListener('click', handleCardClick);
gameBoard.appendChild(card);
});
startTimer();
}
function handleCardClick(event) {
const card = event.target;
if (card.classList.contains('matched') || card === firstCard) return;
card.textContent = card.dataset.item;
card.classList.add('flipped');
playSound(card.dataset.item);
if (!firstCard) {
firstCard = card;
return;
}
secondCard = card;
checkMatch();
}
function checkMatch() {
if (firstCard.dataset.item === secondCard.dataset.item) {
firstCard.classList.add('matched');
secondCard.classList.add('matched');
matchedPairs++;
scoreDisplay.textContent = matchedPairs;
resetCards();
if (matchedPairs === items.length) {
clearInterval(timerInterval);
alert('Selamat! Anda menang!');
}
} else {
setTimeout(() => {
firstCard.textContent = '';
secondCard.textContent = '';
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetCards();
}, 1000);
}
}
function resetCards() {
firstCard = null;
secondCard = null;
}
function startTimer() {
timerInterval = setInterval(() => {
timer--;
timerDisplay.textContent = timer;
if (timer === 0) {
clearInterval(timerInterval);
alert('Waktu habis! Coba lagi.');
}
}, 1000);
}
function playSound(item) {
const audio = new Audio(`assets/sounds/${item}.mp3`);
audio.play();
}
startGame();