diff --git a/gameboard.css b/gameboard.css deleted file mode 100644 index 76110ed..0000000 --- a/gameboard.css +++ /dev/null @@ -1,57 +0,0 @@ -body { - margin: 0; - padding: 0; - background: linear-gradient(135deg, #8a2be2 40%, #f11997 100%); - background-attachment: fixed; - background-size: cover; - font-family: "Poppins", sans-serif; -} - -.topbar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 6px 10px; - width: 100%; - background: rgb(255, 255, 255); - backdrop-filter: blur white(14px); - border-top: 2px solid rgba(255, 255, 255, 0.4); - border-bottom: 2px solid rgba(255, 255, 255, 0.4); - box-sizing: border-box; -} - - -.back-btn { - background: none; - border: none; - font-size: 26px; - cursor: pointer; - color: #1a1a1a; - padding-left: 6px; -} - - -.right-info { - display: flex; - gap: 10px; -} - - -.pill { - display: flex; - align-items: center; - gap: 5px; - padding: 4px 10px; - border-radius: 20px; - background: rgba(173, 216, 255, 0.45); - backdrop-filter: blur(10px); - border: 1.8px solid rgba(255, 255, 255, 0.8); - font-size: 16px; - color: #002a60; - box-shadow: 0 2px 4px rgba(0,0,0,0.15), - inset 0 0 4px rgba(255,255,255,0.5); -} - -.icon { - font-size: 18px; -} diff --git a/gameboard.html b/gameboard.html index 2814523..c883882 100644 --- a/gameboard.html +++ b/gameboard.html @@ -4,7 +4,66 @@ Memory Card - + + @@ -32,6 +91,127 @@ - + \ No newline at end of file diff --git a/gameboard.js b/gameboard.js deleted file mode 100644 index 1fb60aa..0000000 --- a/gameboard.js +++ /dev/null @@ -1,123 +0,0 @@ -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 = ` -
-
?
- -
- `; - - 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();