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

gameboard-easy.html

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