diff --git a/GameLogic.js b/GameLogic.js index e32a22d..e159124 100644 --- a/GameLogic.js +++ b/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(); diff --git a/GameStyle.css b/GameStyle.css index 80abb67..bc20bf8 100644 --- a/GameStyle.css +++ b/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; } \ No newline at end of file diff --git a/game.html b/game.html index ba9cf1b..9ea789b 100644 --- a/game.html +++ b/game.html @@ -14,8 +14,16 @@
Silakan Pilih Mode
+ + +