diff --git a/gameboard.js b/gameboard.js index 7509e3b..6a87902 100644 --- a/gameboard.js +++ b/gameboard.js @@ -1,17 +1,123 @@ -let time = 60; -let timerElement = document.getElementById("timer"); +const imageList = [ + "alpukat.jpg", + "anggur.jpg", + "apel.jpg", + "buah naga.jpg", + "jambu.jpg", + "jeruk.jpg", + "lemon.jpg", + "nanas.jpg", + "pisang.jpg", + "semangka.jpg" +]; -let countdown = setInterval(() => { +let images = [...imageList, ...imageList]; -time--; -timerElement.textContent = time; -if (time <= 0) { - clearInterval(countdown); - timerElement.textContent = "0"; - - alert("Waktu Habis"); +function shuffle(array) { + let currentIndex = array.length, randomIndex; + + while (currentIndex !== 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; + } + return array; } -}, 1000); +let time = 60; +let timerElement = document.getElementById("timer"); +let movesElement = document.getElementById("moves"); +let scoreElement = document.getElementById("score"); +let timerStarted = false; +let countdown; +let moves = 0; +let score = 0; + +let flippedCards = []; + +function startTimer() { + if (timerStarted) return; + timerStarted = true; + + countdown = setInterval(() => { + time--; + timerElement.textContent = time; + + if (time <= 0) { + clearInterval(countdown); + alert("Waktu Habis"); + } + }, 1000); +} + + +function flipCard(card, img) { + if (!timerStarted) startTimer(); + + if (flippedCards.length >= 2 || card.classList.contains("matched") || flippedCards.includes(card)) return; + + card.querySelector(".front").style.display = "none"; + card.querySelector(".back").style.display = "block"; + flippedCards.push(card); + + if (flippedCards.length === 2) { + moves++; + movesElement.textContent = moves; + + const firstImg = flippedCards[0].querySelector(".back img").src; + const secondImg = flippedCards[1].querySelector(".back img").src; + + if (firstImg === secondImg) { + flippedCards[0].classList.add("matched"); + flippedCards[1].classList.add("matched"); + score += 10; + scoreElement.textContent = score; + flippedCards = []; + } else { + setTimeout(() => { + flippedCards[0].querySelector(".front").style.display = "block"; + flippedCards[0].querySelector(".back").style.display = "none"; + flippedCards[1].querySelector(".front").style.display = "block"; + flippedCards[1].querySelector(".back").style.display = "none"; + flippedCards = []; + }, 800); + } + } +} + +// ======= START GAME ========= +function startGame() { + const board = document.getElementById("game-board"); + board.innerHTML = ""; + + const shuffled = shuffle([...images]); + + shuffled.forEach(img => { + const card = document.createElement("div"); + card.classList.add("card"); + + card.innerHTML = ` +