gameboard-easy.html

@@ -129,12 +129,13 @@ body {
   box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8);
 }
 
-/* COMBO POPUP */
+/* === COMBO POPUP TANPA ICON === */
 .combo-popup {
   position: absolute;
   padding: 12px 20px;
   background: linear-gradient(135deg, rgba(255,95,109,0.92), rgba(255,0,102,0.92));
   border-radius: 14px;
+  backdrop-filter: none;
   color: white;
   font-weight: 800;
   text-align: center;
@@ -146,66 +147,18 @@ body {
 }
 
 @keyframes comboFade {
-  0% { opacity: 0; transform: translate(-50%, -10px) scale(0.7); }
+  0% {
-  20% { opacity: 1; transform: translate(-50%, -30px) scale(1); }
+    opacity: 0;
-  100% { opacity: 0; transform: translate(-50%, -80px) scale(1.1); }
+    transform: translate(-50%, -10px) scale(0.7);
-}
+  }
-
+  20% {
-/* END SCREEN */
+    opacity: 1;
-.end-screen {
+    transform: translate(-50%, -30px) scale(1);
-  position: fixed;
+  }
-  top: 0;
+  100% {
-  left: 0;
+    opacity: 0;
-  width: 100%;
+    transform: translate(-50%, -80px) scale(1.1);
-  height: 100%;
+  }
-  background: rgba(0,0,0,0.45);
-  backdrop-filter: blur(7px);
-  display: none;
-  justify-content: center;
-  align-items: center;
-  z-index: 200;
-}
-
-.end-box {
-  width: 80%;
-  max-width: 380px;
-  background: white;
-  border-radius: 22px;
-  padding: 20px;
-  text-align: center;
-  animation: fadeIn 0.4s ease;
-}
-
-.end-title {
-  font-size: 28px;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.score-row {
-  display: flex;
-  justify-content: space-between;
-  margin: 8px 0;
-  font-size: 18px;
-}
-
-.end-btn {
-  width: 100%;
-  padding: 12px;
-  border-radius: 16px;
-  border: none;
-  font-size: 18px;
-  margin-top: 10px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.play-again { background: #b700ff; color: white; }
-.leaderboard { background: gold; }
-
-@keyframes fadeIn {
-  from { opacity:0; transform: scale(0.8); }
-  to { opacity:1; transform: scale(1); }
 }
 </style>
 </head>
@@ -222,28 +175,6 @@ body {
 
 <div id="game-board" class="gameboard"></div>
 
-<!-- END SCREEN -->
-<div id="endScreen" class="end-screen">
-  <div class="end-box">
-    <div class="end-title">🎉 Selamat!</div>
-    <p>Anda berhasil menyelesaikan permainan!</p>
-
-    <div class="score-row"><span>Skor Base:</span> <span id="baseScoreEnd">0</span></div>
-    <div class="score-row"><span>Time Bonus:</span> <span id="timeBonusEnd">0</span></div>
-    <div class="score-row"><span>Move Bonus:</span> <span id="moveBonusEnd">0</span></div>
-
-    <hr>
-
-    <div class="score-row" style="font-weight:700;">
-      <span>Total Skor:</span>
-      <span id="totalScoreEnd">0</span>
-    </div>
-
-    <button class="end-btn play-again" onclick="startGame()">🔁 Main Lagi</button>
-    <button class="end-btn leaderboard">🏆 Lihat Leaderboard</button>
-  </div>
-</div>
-
 <script>
 const images = [
   "asset/alpukat.jpg",
@@ -266,11 +197,13 @@ let combo = 1;
 let lastMatchTime = 0;
 let pendingMatch = false;
 
+/* === POPUP COMBO TANPA ICON === */
 function showComboPopup(targetCard, combo, bonus) {
   const popup = document.createElement("div");
   popup.className = "combo-popup";
+
   popup.innerHTML = `
-      COMBO X${combo}<br>
+      COMBO x${combo}!<br>
       <span style="font-size:14px; opacity:0.9;">+${bonus} Bonus</span>
   `;
 
@@ -296,29 +229,14 @@ function startTimer() {
   timerStarted = true;
   countdown = setInterval(() => {
     document.getElementById("timer").textContent = --time;
-    if (time <= 0) {
+    if(time <= 0){
       clearInterval(countdown);
-      showEndScreen();
+      alert("Waktu habis!");
+      document.querySelectorAll(".card").forEach(c => c.classList.add("flipped"));
     }
   }, 1000);
 }
 
-function showEndScreen() {
-  clearInterval(countdown);
-
-  let baseScore = score;
-  let timeBonus = time * 5;
-  let moveBonus = Math.max(0, 200 - moves * 10);
-  let total = baseScore + timeBonus + moveBonus;
-
-  document.getElementById("baseScoreEnd").textContent = baseScore;
-  document.getElementById("timeBonusEnd").textContent = "+" + timeBonus;
-  document.getElementById("moveBonusEnd").textContent = "+" + moveBonus;
-  document.getElementById("totalScoreEnd").textContent = total;
-
-  document.getElementById("endScreen").style.display = "flex";
-}
-
 function flipCard(card) {
   if (!timerStarted) startTimer();
   if (flipped.length === 2 || card.classList.contains("matched") || card.classList.contains("flipped"))
@@ -335,13 +253,15 @@ function flipCard(card) {
     let img2 = flipped[1].querySelector(".back img").src;
 
     if (img1 === img2) {
+
       const now = Date.now();
 
+      /* === SISTEM COMBO === */
       if (!pendingMatch) {
         pendingMatch = true;
         combo = 1;
       } else {
-        if (now - lastMatchTime <= 3000) {
+        if (now - lastMatchTime <= 1500) {
           combo++;
           let comboBonus = 10 * combo;
           score += comboBonus;
@@ -355,20 +275,14 @@ function flipCard(card) {
       }
 
       lastMatchTime = now;
-      flipped.forEach(c => c.classList.add("matched"));
 
-      score += 50;
+      flipped.forEach(c => c.classList.add("matched"));
-      document.getElementById("score").textContent = score;
 
       time += 5;
       document.getElementById("timer").textContent = time;
 
       flipped = [];
 
-      if (document.querySelectorAll(".matched").length === cards.length) {
-        setTimeout(showEndScreen, 600);
-      }
-
     } else {
       setTimeout(() => {
         flipped.forEach(c => c.classList.remove("flipped"));
@@ -379,8 +293,6 @@ function flipCard(card) {
 }
 
 function startGame() {
-  document.getElementById("endScreen").style.display = "none";
-
   const board = document.getElementById("game-board");
   board.innerHTML = "";
   const shuffledCards = shuffleArray([...cards]);
@@ -416,6 +328,5 @@ function startGame() {
 
 startGame();
 </script>
-
 </body>
 </html>