2526-web/Kelompok02-Memory-Card
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: 2526-web:a5b12ece17fcce8528ab1ce8213be176bf23db2d
Branches Tags
2526-web:main
..
compare: 2526-web:085c326e481763ae6a3ede5b683fc83abc36cab6
Branches Tags
2526-web:main

No commits in common. "a5b12ece17fcce8528ab1ce8213be176bf23db2d" and "085c326e481763ae6a3ede5b683fc83abc36cab6" have entirely different histories.
a5b12ece17 ... 085c326e48

1 changed files with 10 additions and 116 deletions
Show Stats Expand all files Collapse all files

114
gameboard.js
View File

@ -1,123 +1,17 @@
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 time = 60;
let timerElement = document.getElementById("timer"); 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 countdown = setInterval(() => {
let flippedCards = [];
function startTimer() {
if (timerStarted) return;
timerStarted = true;
countdown = setInterval(() => {
time--; time--;
timerElement.textContent = time; timerElement.textContent = time;
if (time <= 0) { if (time <= 0) {
clearInterval(countdown); clearInterval(countdown);
timerElement.textContent = "0";
alert("Waktu Habis"); alert("Waktu Habis");
} }
}, 1000); }, 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 = `
<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);
});
// reset timer, score, moves
time = 60;
timerElement.textContent = time;
timerStarted = false;
moves = 0;
score = 0;
movesElement.textContent = moves;
scoreElement.textContent = score;
}
// ======= MULAI GAME =========
startGame();