Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card

gameboard.js

@@ -1,17 +1,123 @@
-let time = 60; 
+const imageList = [
-let timerElement = document.getElementById("timer");
+    "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) {
+function shuffle(array) {
-    clearInterval(countdown);
+    let currentIndex = array.length, randomIndex;
-    timerElement.textContent = "0";
+
-    
+    while (currentIndex !== 0) {
-    alert("Waktu Habis");
+        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 = `
+            <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();