gameboard-easy.html

@@ -19,8 +19,9 @@ body {
   align-items: center;
   padding: 8px 14px;
   background: rgba(255, 255, 255, 0.45);
-  border-bottom: 2px solid rgba(39, 35, 35, 0.6);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(14px);
+
   position: sticky;
   top: 0;
   z-index: 50;
@@ -50,6 +51,7 @@ body {
   backdrop-filter: blur(8px);
   color: #003366;
   font-weight: 600;
+
   box-shadow:
     0 3px 6px rgba(0,0,0,0.20),
     inset 0 0 6px rgba(255,255,255,0.6);
@@ -59,18 +61,18 @@ body {
   font-size: 18px;
 }
 
-/* GAMEBOARD & CARD */
 .gameboard {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  grid-template-columns: repeat(4, 100px); /* 4 kolom */
-  gap: 25px;
+  grid-template-rows: repeat(3, 120px);   /* 3 baris */
   justify-content: center;
+  gap: 15px;
   margin: 20px auto;
 }
 
 .card {
-  width: 140px;
+  width: 120px;
-  height: 180px;
+  height: 140px;
   perspective: 1000px;
   cursor: pointer;
 }
@@ -100,7 +102,7 @@ body {
 }
 
 .front {
-  font-size: 55px;
+  font-size: 45px;
   font-weight: 700;
   color: #ff6a4d;
 }
@@ -110,8 +112,8 @@ body {
 }
 
 .back img {
-  max-width: 85%;
+  max-width: 75%;
-  max-height: 85%;
+  max-height: 75%;
   filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
 }
 
@@ -132,25 +134,15 @@ body {
       0 0 30px rgba(122,255,214,0.8);
 }
 
-/* RESPONSIVE */
 @media (max-width: 600px) {
   .gameboard {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-template-columns: repeat(3, 90px);
-    gap: 15px;
+    gap: 14px;
   }
 
   .card {
-    width: 100px;
+    width: 90px;
-    height: 130px;
+    height: 110px;
-  }
-
-  .front {
-    font-size: 40px;
-  }
-
-  .back img {
-    max-width: 80%;
-    max-height: 80%;
   }
 }
 </style>
@@ -159,6 +151,7 @@ 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>
@@ -169,6 +162,7 @@ body {
 <div id="game-board" class="gameboard"></div>
 
 <script>
+
 const images = [
   "asset/alpukat.jpg",
   "asset/anggur.jpg",
@@ -198,8 +192,10 @@ let countdown;
 
 function startTimer() {
   timerStarted = true;
+
   countdown = setInterval(() => {
     document.getElementById("timer").textContent = --time;
+
     if (time <= 0) {
       clearInterval(countdown);
       alert("Waktu habis!");
@@ -210,15 +206,20 @@ function startTimer() {
 
 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) {
     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) {
       flipped.forEach(c => c.classList.add("matched"));
       score += 10;
@@ -236,19 +237,28 @@ function flipCard(card) {
 function startGame() {
   const board = document.getElementById("game-board");
   board.innerHTML = "";
+
   shuffle(cards).forEach(image => {
     const card = document.createElement("div");
     card.className = "card";
+
     card.innerHTML = `
       <div class="inner">
         <div class="front">?</div>
         <div class="back"><img src="${image}"></div>
       </div>
     `;
+
     card.onclick = () => flipCard(card);
     board.appendChild(card);
   });
-  time = 60; moves = 0; score = 0; flipped = []; timerStarted = false;
+
+  time = 60;
+  moves = 0;
+  score = 0;
+  flipped = [];
+  timerStarted = false;
+
   document.getElementById("timer").textContent = time;
   document.getElementById("moves").textContent = moves;
   document.getElementById("score").textContent = score;