update gameover

GameLogic.js

@@ -2,7 +2,11 @@
       var canvas = document.getElementById("game");
       var content = canvas.getContext("2d");
       const Text = document.getElementById("text");
-      const GameoverText = document.getElementById("gameover");
+      // const GameoverText = document.getElementById("gameover");
+      const UpDead = document.getElementById("gameover-overlay");
+      const ScoreMain = document.getElementById("gameover-score");
+      const PlayAgain = document.getElementById("ulangi");
+      const Udahan = document.getElementById("keluar");
 
       //settingan awal
       var grid = 24;
@@ -38,8 +42,6 @@
       var TembokImage = new Image();
       TembokImage.src = "image/Tembok.png"; // Tembok Batagor
 
-      //D:\PROYEK UAS\Game ULAR\gambar\Tembok.png
-
       //set posisi ular dan Apel
       var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 };
       var Apel = { x: 0, y: 0 };
@@ -61,50 +63,59 @@
         } else {
           Tembok = [];
         }
-      GameStart = true
+        GameStart = true;
       }
 
       //buat ngatur batu spwan apa ga nanti
-      document.getElementById("mode-normal").addEventListener('click', function() {
+      document
+        .getElementById("mode-normal")
+        .addEventListener("click", function () {
           StartingGame(false);
         });
-      document.getElementById("mode-tambahan").addEventListener("click", function () {
+
+      document
+        .getElementById("mode-tambahan")
+        .addEventListener("click", function () {
           StartingGame(true);
         });
 
+      //play again pas gameover
+      function resetGame() {
+        Ular.x = 528;
+        Ular.y = 240;
+        Ular.cells = [];
+        Ular.maxCells = 4;
+        Ular.dx = grid;
+        Ular.dy = 0;
+        Tembok = [];
+        RandomizeApel();
+        UpdateScore(0);
+        ModeH = false;
+        GameStart = false;
+      }
+
+      //ngatur tombol pas gameover kemana abis di klik
+      PlayAgain.addEventListener("click", function () {
+        UpDead.style.display = "none";
+        resetGame();
+        persiapan.style.display = "flex";
+      });
+
+      Udahan.addEventListener("click", function () {
+        UpDead.style.display = "none";
+        resetGame();
+      });
+
       //gameover terus ngatur ular ke setting awal
       function gameLoop() {
         if (!GameStart) {
           requestAnimationFrame(gameLoop);
           return;
         }
-        if (GameOverTimer > 0) {
-          GameOverTimer -= 0.006;
-          GameoverText.innerHTML =
-            GameOverTimer > 0
-              ? "Gameover " + GameOverTimer.toFixed(0).toString()
-              : "";
-          if (GameOverTimer <= 0) {
-            Ular.x = 528;
-            Ular.y = 240;
-            Ular.cells = [];
-            Ular.maxCells = 4;
-            Ular.dx = grid;
-            Ular.dy = 0;
-            RandomizeApel();
-            UpdateScore(0);
-            if (ModeH) {
-              RandomSpawnWall();
-            } else {
-              Tembok = [];
-            }
-          }
-        } else {
-          InputKeyboard();
         ClearCanvas();
         Movement();
         IntiGame();
-        }
+
         requestAnimationFrame(gameLoop);
       }
 
@@ -116,6 +127,7 @@
         Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
       }
 
+      //random spawn tembok
       function RandomSpawnWall() {
         var TembokX, TembokY;
         var kosong;
@@ -154,10 +166,12 @@
 
       //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
       function PenambahanTembok() {
+        if (ModeH) {
           if (Tembok.length < Math.floor(score / 2)) {
             RandomSpawnWall();
           }
         }
+      }
 
       //set dan update score
       function UpdateScore(amount) {
@@ -174,9 +188,14 @@
         PenambahanTembok();
       }
 
-      //gameover countdown
+      //tampilin gameover
       function GameOver() {
-        GameOverTimer = 3;
+        GameStart = false;
+        ClearCanvas();
+
+        // TAMPILKAN POP-UP GAME OVER
+        ScoreMain.innerHTML = "Score: " + score;
+        UpDead.style.display = "flex";
       }
 
       //reset isi canvas doang
@@ -271,6 +290,7 @@
       //input keyboard buat jalan
       function InputKeyboard() {
         document.addEventListener("keydown", function (e) {
+          if (!GameStart) return;
           if (
             ArahUlar == 0 &&
             ((e.code == "KeyA" && Ular.dx === 0) ||
@@ -297,4 +317,5 @@
                 : speed;
         });
       }
+      InputKeyboard();
       gameLoop();

GameStyle.css

@@ -29,6 +29,18 @@
         padding-bottom: 20px;
         padding-top: 20px;
       }
+      .starting {
+        position: absolute;
+        top: 21px;
+        left: 51px;
+        width: 1056px;
+        height: 480px;
+        background-color: rgba(100, 100, 100, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      }
       #start {
         position: absolute;
         top: 21px;
@@ -50,6 +62,16 @@
         width: 80%;
         max-width: 400px;
       }
+      .popAwal h1 {
+        margin-left: 30px;
+        margin-right: 25px;
+      }
+      #keluar {
+        background-color: #f44336;
+      }
+      #keluar:hover {
+        background-color: #d32f2f;
+      }
       .icon {
         width: 70px;
         height: 70px;

game.html

@@ -15,6 +15,14 @@
     <!-- main konten -->
     <div class="HalamanFull">
       <canvas width="1056" height="480" id="game"></canvas>
+      <div id="gameover-overlay" class="starting" style="display: none">
+        <div class="popAwal">
+          <h1 style="color: red" id="gameover-title">YOU DIED</h1>
+          <p id="gameover-score">Score: 0</p>
+          <button id="ulangi" class="modegame">Main lagi?</button>
+          <button id="keluar" class="modegame">Keluar?</button>
+        </div>
+      </div>
       <div id="gameover" class="gameover"></div>
       <div id="start" class="starting">
         <div class="popAwal">