124 lines
3.1 KiB
JavaScript
124 lines
3.1 KiB
JavaScript
const imageList = [
|
|
"alpukat.jpg",
|
|
"anggur.jpg",
|
|
"apel.jpg",
|
|
"buah naga.jpg",
|
|
"jambu.jpg",
|
|
"jeruk.jpg",
|
|
"lemon.jpg",
|
|
"nanas.jpg",
|
|
"pisang.jpg",
|
|
"semangka.jpg"
|
|
];
|
|
|
|
let images = [...imageList, ...imageList];
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
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 = `
|
|
<div class="inner">
|
|
<div class="front">?</div>
|
|
<div class="back" style="display:none;"><img src="${img}"></div>
|
|
</div>
|
|
`;
|
|
|
|
card.onclick = () => flipCard(card, img);
|
|
board.appendChild(card);
|
|
});
|
|
|
|
|
|
time = 60;
|
|
timerElement.textContent = time;
|
|
timerStarted = false;
|
|
moves = 0;
|
|
score = 0;
|
|
movesElement.textContent = moves;
|
|
scoreElement.textContent = score;
|
|
}
|
|
|
|
|
|
startGame();
|