gameboard-easy.html

@@ -4,12 +4,13 @@
 <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", sans-serif;
+  font-family: "Poppins", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
 }
 
 body {
@@ -18,12 +19,13 @@ body {
   flex-direction: column;
 }
 
+/* Top bar */
 .topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 14px;
-  background: rgb(255, 255, 255);
+  background: rgba(255, 255, 255, 0.45);
   border-bottom: 2px solid rgba(39, 35, 35, 0.6);
   backdrop-filter: blur(14px);
   z-index: 50;
@@ -47,7 +49,7 @@ body {
   align-items: center;
   gap: 6px;
   padding: 5px 12px;
-  background: rgb(255, 255, 255);
+  background: rgba(255,255,255,0.45);
   border-radius: 20px;
   border: 2px solid rgba(255,255,255,0.8);
   backdrop-filter: blur(8px);
@@ -56,23 +58,22 @@ 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, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  gap: 10px;
+  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;
   padding: 10px;
-  box-sizing: border-box;
+  margin: auto;
 }
 
-
+/* Card */
 .card {
-  width: 100%;
-  height: 100%;
+  width: 85px;
+  height: 105px;
   perspective: 1000px;
   cursor: pointer;
 }
@@ -101,7 +102,7 @@ body {
 }
 
 .front {
-  font-size: calc(10px + 3vw);
+  font-size: 22px;
   font-weight: 700;
   color: #ff6a4d;
 }
@@ -117,11 +118,6 @@ 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,
@@ -135,21 +131,23 @@ body {
 
 <header class="topbar">
   <button class="back-btn" onclick="window.location.href='mainboard.html'">←</button>
+  
   <div class="right-info">
-    <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 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>
 </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",
+  "asset/buah_naga.jpg",  // pastikan tidak pakai spasi
   "asset/jambu.jpg",
   "asset/jeruk.jpg"
 ];
@@ -162,19 +160,11 @@ let moves = 0;
 let score = 0;
 let countdown;
 
-// Fungsi shuffle (Fisher-Yates)
-function shuffleArray(array) {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-  return array;
-}
-
 function startTimer() {
   timerStarted = true;
   countdown = setInterval(() => {
     document.getElementById("timer").textContent = --time;
+
     if (time <= 0) {
       clearInterval(countdown);
       alert("Waktu habis!");
@@ -203,7 +193,7 @@ function flipCard(card){
       score += 10;
       document.getElementById("score").textContent = score;
 
-      time += 5; // tambah 5 detik jika cocok
+      time += 5; // bonus waktu
       document.getElementById("timer").textContent = time;
 
       flipped = [];
@@ -216,14 +206,12 @@ function flipCard(card){
   }
 }
 
+// Tidak shuffle → tetap 3x4 urutan kartu
 function startGame() {
   const board = document.getElementById("game-board");
   board.innerHTML = "";
 
-  // Shuffle kartu sebelum ditampilkan
-  const shuffledCards = shuffleArray([...cards]);
-
-  shuffledCards.forEach(image => {
+  cards.forEach(image => {
     const card = document.createElement("div");
     card.className = "card";
     card.innerHTML = `