gameboard-easy.html

@@ -4,13 +4,12 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Memory Card Premium</title>
-
 <style>
 html, body {
   margin: 0;
   height: 100%;
-  overflow: hidden;
-  font-family: "Poppins", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+  overflow: hidden; /* hilangkan scroll */
+  font-family: "Poppins", sans-serif;
 }
 
 body {
@@ -58,22 +57,23 @@ body {
   box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6);
 }
 
+.icon { font-size: 18px; }
+
 /* Gameboard */
 .gameboard {
+  flex: 1;
   display: grid;
-  grid-template-columns: repeat(4, 85px);  /* 4 kolom */
-  grid-template-rows: repeat(3, 105px);   /* 3 baris */
-  gap: 22px;  /* jarak diperbesar */
-  justify-content: center;
-  align-content: center;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 10px;
   padding: 10px;
-  margin: auto;
+  box-sizing: border-box;
 }
 
 /* Card */
 .card {
-  width: 85px;
-  height: 105px;
+  width: 100%;
+  height: 100%;
   perspective: 1000px;
   cursor: pointer;
 }
@@ -102,7 +102,7 @@ body {
 }
 
 .front {
-  font-size: 22px;
+  font-size: calc(10px + 3vw);
   font-weight: 700;
   color: #ff6a4d;
 }
@@ -118,6 +118,11 @@ body {
   filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
 }
 
+.card:not(.flipped):hover .front {
+  transform: scale(1.05);
+  transition: 0.25s;
+}
+
 .card.flipped .inner { transform: rotateY(180deg); }
 
 .card.matched .front,
@@ -131,23 +136,21 @@ body {
 
 <header class="topbar">
   <button class="back-btn" onclick="window.location.href='mainboard.html'">←</button>
-  
   <div class="right-info">
-    <div class="pill"><span>⏱</span> <span id="timer">60</span>s</div>
-    <div class="pill"><span>⭐</span> <span id="score">0</span></div>
-    <div class="pill"><span>🎯</span> <span id="moves">0</span></div>
+    <div class="pill"><span class="icon">⏱</span><span id="timer">60</span>s</div>
+    <div class="pill"><span class="icon">⭐</span><span id="score">0</span></div>
+    <div class="pill"><span class="icon">🎯</span><span id="moves">0</span></div>
   </div>
 </header>
 
 <div id="game-board" class="gameboard"></div>
 
 <script>
-// 6 gambar → total kartu 12 (3x4 pas)
 const images = [
   "asset/alpukat.jpg",
   "asset/anggur.jpg",
   "asset/apel.jpg",
-  "asset/buah_naga.jpg",  // pastikan tidak pakai spasi
+  "asset/buah naga.jpg",
   "asset/jambu.jpg",
   "asset/jeruk.jpg"
 ];
@@ -164,8 +167,7 @@ function startTimer() {
   timerStarted = true;
   countdown = setInterval(() => {
     document.getElementById("timer").textContent = --time;
-
-    if (time <= 0) {
+    if(time <= 0){
       clearInterval(countdown);
       alert("Waktu habis!");
       document.querySelectorAll(".card").forEach(c => c.classList.add("flipped"));
@@ -173,44 +175,44 @@ function startTimer() {
   }, 1000);
 }
 
-function flipCard(card) {
-  if (!timerStarted) startTimer();
-  if (flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped"))
+function flipCard(card){
+  if(!timerStarted) startTimer();
+  if(flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped"))
     return;
 
   card.classList.add("flipped");
   flipped.push(card);
 
-  if (flipped.length === 2) {
+  if(flipped.length === 2){
     moves++;
     document.getElementById("moves").textContent = moves;
 
     let img1 = flipped[0].querySelector(".back img").src;
     let img2 = flipped[1].querySelector(".back img").src;
 
-    if (img1 === img2) {
+    if(img1 === img2){
       flipped.forEach(c => c.classList.add("matched"));
       score += 10;
       document.getElementById("score").textContent = score;
 
-      time += 5; // bonus waktu
+      time += 5; // tambah 5 detik jika cocok
       document.getElementById("timer").textContent = time;
 
       flipped = [];
     } else {
-      setTimeout(() => {
-        flipped.forEach(c => c.classList.remove("flipped"));
+      setTimeout(()=>{
+        flipped.forEach(c=>c.classList.remove("flipped"));
         flipped = [];
       }, 800);
     }
   }
 }
 
-// Tidak shuffle → tetap 3x4 urutan kartu
-function startGame() {
+function startGame(){
   const board = document.getElementById("game-board");
   board.innerHTML = "";
 
+  // tetap urutan (tidak shuffle)
   cards.forEach(image => {
     const card = document.createElement("div");
     card.className = "card";
@@ -220,7 +222,7 @@ function startGame() {
         <div class="back"><img src="${image}"></div>
       </div>
     `;
-    card.onclick = () => flipCard(card);
+    card.onclick = ()=>flipCard(card);
     board.appendChild(card);
   });
 

mainboard.js

@@ -1,12 +1,7 @@
 function selectStage(stage) {
-  if (stage === "easy") {
-    window.location.href = "gameboard-easy.html";
-  } else if (stage === "medium") {
-    window.location.href = "gameboard-medium.html";
-  } else if (stage === "hard") {
-    window.location.href = "gameboard-hard.html";
-  }
+  alert("Stage dipilih: " + stage);
 }
+
 document.getElementById("leaderboardBtn").addEventListener("click", () => {
   alert("Menuju Leaderboard");
 });