From 61f14cea0082e079a4067a36365fc090ab3d0ebd Mon Sep 17 00:00:00 2001
From: Benedictus Rendra Andhika Putra Prasetya <rendraandhikapp@gmail.com>
Date: Tue, 16 Dec 2025 11:51:52 +0700
Subject: [PATCH] Last Revisi

---
 game.php | 227 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 124 insertions(+), 103 deletions(-)
diff --git a/game.php b/game.php
index 86f7ddd..41d3d9f 100644
--- a/game.php
+++ b/game.php
@@ -4,15 +4,12 @@ if (!isset($_SESSION['user'])) {
     header("Location: index.php");
     exit;
 }
-
 $username = $_SESSION['user'];
-
 // koneksi db
 $conn = new mysqli("localhost", "root", "", "dodge_game");
 // Ambil skin user dari database
 $q = $conn->query("SELECT skin FROM users WHERE username='$username'");
 $skinColor = $q->fetch_assoc()["skin"];
-
 // Daftar warna skin
 $skinList = [
     "cyan" => "#00ffff",
@@ -21,16 +18,13 @@ $skinList = [
     "purple" => "#ff55ff",
     "green" => "#33ff55"
 ];
-
 // Warna player yang dipakai
 $playerColor = $skinList[$skinColor];
-
 ?>
-
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Hindari Block</title>
+    <title>Hindari Block Multi</title>
     <style>
         body {
             font-family: Arial;
@@ -40,13 +34,11 @@ $playerColor = $skinList[$skinColor];
             margin: 0;
             display: flex;
         }
-
         #gameWrapper {
             width: 75%;
             padding: 20px;
             text-align: center;
         }
-
         #gameArea {
             width: 400px;
             height: 500px;
@@ -57,28 +49,22 @@ $playerColor = $skinList[$skinColor];
             border-radius: 10px;
             box-shadow: 0 0 10px #000;
         }
-
         #player {
-         width: 40px;
-        height: 40px;
-        background: <?= $playerColor ?>; 
-        position: absolute;
-        bottom: 10px;
-        left: 180px;
-        border-radius: 8px;
-    }
-
-
-        #block {
+            width: 40px;
+            height: 40px;
+            background: <?= $playerColor ?>;
+            position: absolute;
+            bottom: 10px;
+            left: 180px;
+            border-radius: 8px;
+        }
+        .block {
             width: 40px;
             height: 40px;
             background: red;
             position: absolute;
-            top: -40px;
-            left: 180px;
             border-radius: 8px;
         }
-
         #leaderboard {
             width: 25%;
             padding: 20px;
@@ -86,17 +72,14 @@ $playerColor = $skinList[$skinColor];
             border-left: 2px solid #333;
             height: 100vh;
         }
-
         table {
             width: 100%;
             border-collapse: collapse;
         }
-
         th, td {
             padding: 8px;
             border-bottom: 1px solid #333;
         }
-
         /* ===== POPUP GAME OVER ===== */
         #gameOverPopup {
             display: none;
@@ -109,7 +92,6 @@ $playerColor = $skinList[$skinColor];
             justify-content: center;
             align-items: center;
         }
-
         .popup-box {
             background: #222;
             padding: 25px;
@@ -118,7 +100,6 @@ $playerColor = $skinList[$skinColor];
             width: 300px;
             box-shadow: 0 0 10px #000;
         }
-
         .popup-box button {
             margin-top: 15px;
             padding: 10px;
@@ -127,32 +108,20 @@ $playerColor = $skinList[$skinColor];
             cursor: pointer;
             font-size: 16px;
             border-radius: 6px;
-        }
-
-        #btnRestart {
-            background: #00d37e;
-        }
-
-        #btnLmenu {
             background: #00d37e;
         }
     </style>
 </head>
-
 <body>
-
 <div id="gameWrapper">
-    <h1>Hindari Block</h1>
+    <h1>Hindari Block Multi</h1>
     <p>Player: <b><?= $username ?></b></p>
     <div class="score-box">Score: <span id="score">0</span></div>
-
     <div id="gameArea">
         <div id="player"></div>
-        <div id="block"></div>
     </div>
     <p>Credits: Haekal Adi Rendra & Gerrad</p>
 </div>
-
 <div id="leaderboard">
     <h2>Leaderboard</h2>
     <table>
@@ -160,7 +129,6 @@ $playerColor = $skinList[$skinColor];
             <th>User</th>
             <th>Score</th>
         </tr>
-
         <?php
         $result = $conn->query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20");
         while ($row = $result->fetch_assoc()) {
@@ -175,121 +143,174 @@ $playerColor = $skinList[$skinColor];
     <div class="popup-box">
         <h2>Game Over</h2>
         <p>Score Kamu: <span id="finalScore"></span></p>
-
         <button id="btnRestart">New Game</button>
         <button id="btnmenu">Menu</button>
     </div>
 </div>
+
 <audio id="soundMove" src="assets/sound/move.wav"></audio>
 <audio id="soundScore" src="assets/sound/score.wav"></audio>
 <audio id="soundGameOver" src="assets/sound/gameover.wav"></audio>
 
 <script>
 let currentUser = "<?= $username ?>";
-</script>
 
-<script>
-// ========= GAME SCRIPT ==========
+// ========= AUDIO =========
+const soundMove = document.getElementById("soundMove");
+const soundScore = document.getElementById("soundScore");
+const soundGameOver = document.getElementById("soundGameOver");
+
+// ========= GAME VARIABLES =========
 const player = document.getElementById("player");
-const block = document.getElementById("block");
+const gameArea = document.getElementById("gameArea");
 let score = 0;
 let gameRunning = true;
+let blockSpeed = 2;
+const maxBlockSpeed = 14;
+let blocks = [];
 
-document.addEventListener("keydown", e => {
+// ========= CREATE MULTIPLE BLOCKS AT ONCE =========
+function spawnBlocks() {
     if (!gameRunning) return;
 
-    let left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
+    // Tentukan jumlah block yang akan muncul (1–3)
+    let blockCount = 1;
+    if (score >= 300) blockCount = Math.floor(Math.random() * 2) + 2; // 2–3
+    else if (score >= 150) blockCount = Math.floor(Math.random() * 2) + 1; // 1–2
+    else if (score >= 50) blockCount = Math.random() < 0.3 ? 2 : 1; // 30% chance 2 block
+    // score < 50 → selalu 1
+
+    const usedPositions = []; // agar tidak tumpang tindih
+
+    for (let i = 0; i < blockCount; i++) {
+        let leftPos;
+        let attempts = 0;
+        do {
+            leftPos = Math.floor(Math.random() * 10) * 40; // grid: 0,40,80,...,360
+            attempts++;
+        } while (usedPositions.includes(leftPos) && attempts < 20);
+
+        if (attempts >= 20) continue; // skip jika terlalu sulit cari posisi
+
+        usedPositions.push(leftPos);
+
+        let newBlock = document.createElement("div");
+        newBlock.classList.add("block");
+        newBlock.style.top = "-60px";
+        newBlock.style.left = leftPos + "px";
+        gameArea.appendChild(newBlock);
+        blocks.push(newBlock);
+    }
+}
+
+// ========= PLAYER MOVEMENT (grid 40px) =========
+document.addEventListener("keydown", e => {
+    if (!gameRunning) return;
+    let left = parseInt(player.style.left) || 180;
 
     if (e.key === "ArrowLeft" && left > 0) {
-        player.style.left = (left - 20) + "px";
+        player.style.left = (left - 40) + "px";
         soundMove.currentTime = 0;
         soundMove.play();
     }
-
     if (e.key === "ArrowRight" && left < 360) {
-        player.style.left = (left + 20) + "px";
+        player.style.left = (left + 40) + "px";
         soundMove.currentTime = 0;
         soundMove.play();
     }
 });
 
+// ========= UPDATE SPEED =========
+function updateBlockSpeed() {
+    blockSpeed = 2 + Math.floor(score / 18);
+    if (blockSpeed > maxBlockSpeed) blockSpeed = maxBlockSpeed;
+}
 
-let blockSpeed = 5; // kecepatan awal block
+// ========= SPAWN INTERVAL (dinamis) =========
+let spawnDelay = 1400;
 
+function startSpawner() {
+    spawnBlocks(); // spawn pertama
+    setInterval(() => {
+        if (gameRunning) {
+            spawnBlocks();
+
+            // Percepat spawn sesuai score
+            if (score >= 400) spawnDelay = 400;
+            else if (score >= 300) spawnDelay = 500;
+            else if (score >= 200) spawnDelay = 600;
+            else if (score >= 100) spawnDelay = 800;
+            else if (score >= 50) spawnDelay = 1000;
+        }
+    }, spawnDelay);
+}
+
+startSpawner();
+
+// Spawn tambahan di awal agar langsung ramai
+setTimeout(() => spawnBlocks(), 800);
+setTimeout(() => spawnBlocks(), 1600);
+
+// ========= GAME LOOP =========
 function fall() {
     if (!gameRunning) return;
 
-    let blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top"));
-    let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
-    let playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
+    const playerLeft = parseInt(player.style.left) || 180;
 
-    // TABRAKAN
-    if (blockTop > 450 && Math.abs(blockLeft - playerLeft) < 40) {
-        gameRunning = false;
-        soundGameOver.play();
-        saveScore(score);
-        showGameOver(score);
-        return;
-    }
+    blocks = blocks.filter(block => {
+        let top = parseInt(block.style.top || -60);
+        let left = parseInt(block.style.left);
 
-    // Jika block sudah jatuh ke bawah
-    if (blockTop > 500) {
-        block.style.top = "-40px";
-        block.style.left = Math.floor(Math.random() * 360) + "px";
-        score++;
-        document.getElementById("score").innerText = score;
+        top += blockSpeed;
+        block.style.top = top + "px";
 
-        // ======== TINGKATKAN KECEPATAN BLOCK BERDASARKAN SCORE ========
-        if (score === 15) blockSpeed = 7;
-        if (score === 25) blockSpeed = 8;
-        if (score === 35) blockSpeed = 10;
-        if (score === 45) blockSpeed = 12;
-        if (score === 60) blockSpeed = 14;
-        if (score === 80) blockSpeed = 16;
-        if (score === 100) blockSpeed = 18;
+        // Collision
+        if (top >= 450 && top <= 490 && Math.abs(left - playerLeft) < 40) {
+            gameRunning = false;
+            soundGameOver.play();
+            saveScore(score);
+            showGameOver(score);
+            return false;
+        }
 
-        soundScore.currentTime = 0;
-        soundScore.play();
-    } else {
-        block.style.top = (blockTop + blockSpeed) + "px";
-    }
+        // Lolos bawah
+        if (top > 550) {
+            score += 10;
+            document.getElementById("score").innerText = score;
+            updateBlockSpeed();
+            soundScore.currentTime = 0;
+            soundScore.play();
+            block.remove();
+            return false;
+        }
+
+        return true;
+    });
 
     requestAnimationFrame(fall);
 }
 fall();
 
-
-
-// ================== SIMPAN SKOR KE SERVER ==================
+// ========= SAVE SCORE =========
 function saveScore(finalScore) {
     fetch("save_score.php", {
         method: "POST",
         headers: { "Content-Type": "application/x-www-form-urlencoded" },
-        body: "username=" + currentUser + "&score=" + finalScore
+        body: "username=" + encodeURIComponent(currentUser) + "&score=" + finalScore
     });
 }
 
-
-// ================== POPUP GAME OVER ==================
+// ========= GAME OVER POPUP =========
 const popup = document.getElementById("gameOverPopup");
 const finalScoreText = document.getElementById("finalScore");
-const btnRestart = document.getElementById("btnRestart");
-const btnmenu = document.getElementById("btnmenu");
+
+document.getElementById("btnRestart").onclick = () => location.reload();
+document.getElementById("btnmenu").onclick = () => location.href = "menu.php";
 
 function showGameOver(finalScore) {
     finalScoreText.textContent = finalScore;
     popup.style.display = "flex";
 }
-
-btnRestart.onclick = () => {
-    window.location.reload();
-};
-
-btnmenu.onclick = () => {
-    window.location.href = "menu.php";
-};
-
 </script>
-
 </body>
-</html>
+</html>
\ No newline at end of file
