update game ga langsung start

GameLogic.js

@@ -5,13 +5,16 @@
       const GameoverText = document.getElementById("gameover");
 
       //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();
@@ -43,15 +46,38 @@
       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);
+      });
+
       //gameover terus ngatur ular ke setting awal
       function gameLoop() {
+        if (!GameStart) {
+          requestAnimationFrame(gameLoop);
+          return;
+        }
         if (GameOverTimer > 0) {
           GameOverTimer -= 0.006;
           GameoverText.innerHTML =
@@ -65,10 +91,13 @@
             Ular.maxCells = 4;
             Ular.dx = grid;
             Ular.dy = 0;
-            Tembok = [];
             RandomizeApel();
             UpdateScore(0);
-            RandomSpawnWall();
+            if (ModeH) {
+              RandomSpawnWall();
+            } else {
+              Tembok = [];
+            }
           }
         } else {
           InputKeyboard();

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,27 @@
         padding-bottom: 20px;
         padding-top: 20px;
       }
+      #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;
+      }
       .icon {
         width: 70px;
         height: 70px;
@@ -60,4 +82,31 @@
       #game {
         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,16 @@
 
     <!-- main konten -->
     <div class="HalamanFull">
-      <canvas width="1058" height="480" id="game"></canvas>
+      <canvas width="1056" height="480" id="game"></canvas>
       <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>
@@ -31,4 +39,4 @@
     <!-- akhir html body -->
      <script src="GameLogic.js"></script>
   </body>
-</html>
+</html>