update branch main

GameLogic.js

@@ -2,16 +2,22 @@
       var canvas = document.getElementById("game");
       var content = canvas.getContext("2d");
       const Text = document.getElementById("text");
-      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 = 16;
+      var grid = 24;
       var count = 0;
-      var speed = 8;
+      var speed = 10;
       var score = 0;
       var highscore = 0;
       var ArahUlar = 0;
       var GameOverTimer = 0;
+      var GameStart = false;
+      var ModeH = false;
+      const persiapan = document.getElementById("start");
 
       //generate gambar external
       var KepalaUlarImage = new Image();
@@ -35,47 +41,80 @@
       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 };
       var Tembok = [];
       UpdateScore(0);
       RandomizeApel();
-      RandomSpawnWall();
 
       //mastiin gambar external generate dulu sebelum game start
       KepalaUlarImage.onload = function () {
         function gameLoop() {}
       };
 
+      //ngatur biar game ga langsung jalan
+      function StartingGame(menantang) {
+        ModeH = menantang;
+        persiapan.style.display = "none";
+        if (ModeH) {
+          RandomSpawnWall();
+        } else {
+          Tembok = [];
+        }
+        GameStart = true;
+      }
+
+      //buat ngatur batu spwan apa ga nanti
+      document
+        .getElementById("mode-normal")
+        .addEventListener("click", function () {
+          StartingGame(false);
+        });
+
+      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 (GameOverTimer > 0) {
+        if (!GameStart) {
-          GameOverTimer -= 0.006;
+          requestAnimationFrame(gameLoop);
-          GameoverText.innerHTML =
+          return;
-            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;
-            Tembok = [];
-            RandomizeApel();
-            UpdateScore(0);
-            RandomSpawnWall();
-          }
-        } else {
-          InputKeyboard();
-          ClearCanvas();
-          Movement();
-          IntiGame();
         }
+        ClearCanvas();
+        Movement();
+        IntiGame();
+
         requestAnimationFrame(gameLoop);
       }
 
@@ -87,6 +126,7 @@
         Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
       }
 
+      //random spawn tembok
       function RandomSpawnWall() {
         var TembokX, TembokY;
         var kosong;
@@ -125,8 +165,10 @@
 
       //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
       function PenambahanTembok() {
-        if (Tembok.length < Math.floor(score / 2)) {
+        if (ModeH) {
-          RandomSpawnWall();
+          if (Tembok.length < Math.floor(score / 2)) {
+            RandomSpawnWall();
+          }
         }
       }
 
@@ -145,9 +187,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
@@ -242,6 +289,7 @@
       //input keyboard buat jalan
       function InputKeyboard() {
         document.addEventListener("keydown", function (e) {
+          if (!GameStart) return;
           if (
             ArahUlar == 0 &&
             ((e.code == "KeyA" && Ular.dx === 0) ||
@@ -268,4 +316,5 @@
                 : speed;
         });
       }
+      InputKeyboard();
       gameLoop();

GameStyle.css

@@ -19,6 +19,7 @@
         justify-content: space-between;
       }
       .HalamanFull {
+        position: relative;
         background-color: rgb(28, 28, 28);
         color: white;
         height: 100%;
@@ -28,6 +29,49 @@
         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;
+        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;
+      }
+      .popAwal {
+        text-align: center;
+        border-radius: 10px;
+        background-color: rgb(50, 50, 50);
+        padding: 30px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        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;
@@ -61,3 +105,30 @@
         background: rgb(192, 232, 255);
         border: 1px solid white;
       }
+      .modegame {
+        padding: 15px 30px;
+        font-size: 20px;
+        cursor: pointer;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        margin: 10px 5px;
+        display: block;
+        width: 90%;
+        max-width: 300px;
+        margin-left: auto;
+        margin-right: auto;
+        transition: background-color 0.2s, color 0.25s;
+      }
+      #mode-normal {
+        background-color: #73e4c2;
+      }
+      #mode-normal:hover {
+        background-color: #57c9aa;
+      }
+      #mode-tambahan {
+        background-color: #9572e7;
+      }
+      #mode-tambahan:hover {
+        background-color: #703db3;
+      }

game.html

@@ -14,8 +14,24 @@
 
     <!-- main konten -->
     <div class="HalamanFull">
-      <canvas width="1058" height="480" id="game"></canvas>
+      <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">
+          <h1>Start Game?</h1>
+          <p>Silakan Pilih Mode</p>
+          <button id="mode-normal" class="modegame">Normal</button>
+          <button id="mode-tambahan" class="modegame">Normal++</button>
+        </div>
+      </div>
       <div>
         <div class="text">Controls: <br />Movement: W A S D <br /><br /></div>
         <div id="text" class="text"></div>