diff --git a/GameLogic.js b/GameLogic.js index fd0475b..e0f89f9 100644 --- a/GameLogic.js +++ b/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"; diff --git a/GameStyle.css b/GameStyle.css index 37eba1a..9d73772 100644 --- a/GameStyle.css +++ b/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; diff --git a/game.html b/game.html index 2993d51..a653ced 100644 --- a/game.html +++ b/game.html @@ -22,7 +22,7 @@