diff --git a/GameLogic.js b/GameLogic.js index 716f19c..cf1890d 100644 --- a/GameLogic.js +++ b/GameLogic.js @@ -66,15 +66,22 @@ } //buat ngatur batu spwan apa ga nanti - document - .getElementById("mode-normal") - .addEventListener("click", function () { + 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 () { + 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); }); diff --git a/GameStyle.css b/GameStyle.css index ed17a7b..cf311b9 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; @@ -107,6 +137,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 ae6a400..442829d 100644 --- a/game.html +++ b/game.html @@ -22,7 +22,7 @@