background Normal & Normal++ beda(brightness,opacity)

This commit is contained in:
michaelailbert 2025-12-13 07:30:10 +07:00
parent 4e82f469c6
commit c5e65f7b53
4 changed files with 16 additions and 12 deletions

View File

@ -66,15 +66,22 @@
} }
//buat ngatur batu spwan apa ga nanti //buat ngatur batu spwan apa ga nanti
document const halaman = document.querySelector(".HalamanFull");
.getElementById("mode-normal") const gameCanvas = document.getElementById("game");
.addEventListener("click", function () {
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); StartingGame(false);
}); });
document document.getElementById("mode-tambahan").addEventListener("click", function () {
.getElementById("mode-tambahan") halaman.style.backgroundImage ='url("halamanFull/cherryBlossomNight.png")';
.addEventListener("click", function () { halaman.style.setProperty("--overlay-opacity", "0.7");
gameCanvas.style.filter = "brightness(0.5)";
StartingGame(true); StartingGame(true);
}); });

View File

@ -40,7 +40,8 @@
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0,0,0,0.4); /* 0.4 = opacity overlay */ background: rgba(0,0,0, var(-- overlay-opacity, 0.4)); /* 0.4 = opacity overlay */
pointer-events: none;
} }
.starting { .starting {
border: 2px solid pink; border: 2px solid pink;
@ -159,10 +160,6 @@
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
background-image: url("gameOver/gameOver.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
} }
#mode-normal { #mode-normal {
background-color: #73e4c2; background-color: #73e4c2;

View File

@ -22,7 +22,7 @@
<div class="HalamanFull"> <div class="HalamanFull">
<canvas width="1056" height="480" id="game"></canvas> <canvas width="1056" height="480" id="game"></canvas>
<div id="gameover-overlay" class="starting" style="display: none"> <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> <h1 style="color: red" id="gameover-title">YOU DIED</h1>
<p id="gameover-score">Score: 0</p> <p id="gameover-score">Score: 0</p>
<button id="ulangi" class="modegame">Main lagi?</button> <button id="ulangi" class="modegame">Main lagi?</button>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 MiB