merge branch

GameLogic.js

@@ -78,6 +78,27 @@ var Tembok = [];
 UpdateScore(0);
 RandomizeApel();
 
+      //buat ngatur batu spwan apa ga nanti
+      const halaman = document.querySelector(".HalamanFull");
+      const gameCanvas = document.getElementById("game");
+
+      document.getElementById("mode-normal").addEventListener("click", function () {
+          halaman.style.backgroundImage ='url("halamanFull/cherryBlossom.png")';
+          halaman.style.setProperty("--overlay-opacity", "0.4");
+          gameCanvas.style.filter = "brightness(1)";
+
+          StartingGame(false);
+        });
+
+      document.getElementById("mode-tambahan").addEventListener("click", function () {
+          halaman.style.backgroundImage ='url("halamanFull/cherryBlossomNight.png")';
+          halaman.style.setProperty("--overlay-opacity", "0.7");
+          gameCanvas.style.filter = "brightness(0.5)";
+
+          StartingGame(true);
+        });
+
+
 
 function getDirection(cell1, cell2) {
     if (cell2.x > cell1.x) return "kanan"; 

GameStyle.css

@@ -31,8 +31,20 @@
         justify-content: left;
         padding-bottom: 20px;
         padding-top: 20px;
+        background-image: url("halamanFull/cherryBlossom.png");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+      .HalamanFull::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(0,0,0, var(-- overlay-opacity, 0.4));  /* 0.4 = opacity overlay */
+        pointer-events: none;
       }
       .starting {
+        border: 2px solid pink;
         position: absolute;
         top: 21px;
         left: 51px;
@@ -64,6 +76,24 @@
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
         width: 80%;
         max-width: 400px;
+        background-image: url("gameOver/gameOver.png");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+      .popAwal1 {
+        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%;
+        height: 60%;
+        max-width: 400px;
+        background-image: url("gameOver/gameOver.png");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
       }
       .popAwal h1 {
         margin-left: 30px;
@@ -150,6 +180,10 @@
       #game {
         background: rgb(192, 232, 255);
         border: 1px solid white;
+        background-image: url("mapGame/mapgame\ .png");
+        background-size: 50% 50%;
+        background-position: center;
+        background-repeat: repeat
       }
       .modegame {
         padding: 15px 30px;

game.html

@@ -22,7 +22,7 @@
     <div class="HalamanFull">
       <canvas width="1056" height="480" id="game"></canvas>
       <div id="gameover-overlay" class="starting" style="display: none">
-        <div class="popAwal">
+        <div class="popAwal1">
           <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>