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

gameboard-easy.html

@@ -4,7 +4,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Memory Card Premium</title>
-
 <style>
 body {
   margin: 0;
@@ -55,22 +54,19 @@ body {
     inset 0 0 6px rgba(255,255,255,0.6);
 }
 
-.icon {
+.icon { font-size: 18px; }
-  font-size: 18px;
-}
 
-/* GAMEBOARD & CARD */
 .gameboard {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 25px;
   justify-content: center;
   margin: 20px auto;
 }
 
 .card {
-  width: 140px;
+  width: 160px;
-  height: 180px;
+  height: 200px;
   perspective: 1000px;
   cursor: pointer;
 }
@@ -100,7 +96,7 @@ body {
 }
 
 .front {
-  font-size: 55px;
+  font-size: 60px;
   font-weight: 700;
   color: #ff6a4d;
 }
@@ -110,8 +106,8 @@ body {
 }
 
 .back img {
-  max-width: 85%;
+  max-width: 90%;
-  max-height: 85%;
+  max-height: 90%;
   filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45));
 }
 
@@ -132,25 +128,21 @@ 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));
     gap: 15px;
   }
-
   .card {
     width: 100px;
     height: 130px;
   }
-
   .front {
     font-size: 40px;
   }
-
   .back img {
-    max-width: 80%;
+    max-width: 85%;
-    max-height: 80%;
+    max-height: 85%;
   }
 }
 </style>
@@ -212,17 +204,26 @@ 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;
       document.getElementById("score").textContent = score;
+
+      // Tambah 5 detik jika benar
+      time += 5;
+      document.getElementById("timer").textContent = time;
+
       flipped = [];
     } else {
       setTimeout(() => {
@@ -236,6 +237,7 @@ 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";
@@ -248,7 +250,13 @@ function startGame() {
     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;