From 9171afb11df5f42df0bc0bc283f44264305e20d7 Mon Sep 17 00:00:00 2001 From: JERRY F Date: Sat, 29 Nov 2025 22:02:13 +0700 Subject: [PATCH] update branch main --- GameLogic.js | 115 +++++++++++++++++++++++++++++++++++--------------- GameStyle.css | 71 +++++++++++++++++++++++++++++++ game.html | 20 ++++++++- 3 files changed, 171 insertions(+), 35 deletions(-) diff --git a/GameLogic.js b/GameLogic.js index e32a22d..9705551 100644 --- a/GameLogic.js +++ b/GameLogic.js @@ -2,16 +2,22 @@ var canvas = document.getElementById("game"); var content = canvas.getContext("2d"); const Text = document.getElementById("text"); - const GameoverText = document.getElementById("gameover"); + const UpDead = document.getElementById("gameover-overlay"); + const ScoreMain = document.getElementById("gameover-score"); + const PlayAgain = document.getElementById("ulangi"); + const Udahan = document.getElementById("keluar"); //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(); @@ -35,47 +41,80 @@ var TembokImage = new Image(); TembokImage.src = "image/Tembok.png"; // Tembok Batagor - //D:\PROYEK UAS\Game ULAR\gambar\Tembok.png - //set posisi ular dan Apel var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 }; var Apel = { x: 0, y: 0 }; 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); + }); + + //play again pas gameover + function resetGame() { + Ular.x = 528; + Ular.y = 240; + Ular.cells = []; + Ular.maxCells = 4; + Ular.dx = grid; + Ular.dy = 0; + Tembok = []; + RandomizeApel(); + UpdateScore(0); + ModeH = false; + GameStart = false; + } + + //ngatur tombol pas gameover kemana abis di klik + PlayAgain.addEventListener("click", function () { + UpDead.style.display = "none"; + resetGame(); + persiapan.style.display = "flex"; + }); + + Udahan.addEventListener("click", function () { + UpDead.style.display = "none"; + resetGame(); + }); + //gameover terus ngatur ular ke setting awal function gameLoop() { - if (GameOverTimer > 0) { - GameOverTimer -= 0.006; - GameoverText.innerHTML = - GameOverTimer > 0 - ? "Gameover " + GameOverTimer.toFixed(0).toString() - : ""; - if (GameOverTimer <= 0) { - Ular.x = 528; - Ular.y = 240; - Ular.cells = []; - Ular.maxCells = 4; - Ular.dx = grid; - Ular.dy = 0; - Tembok = []; - RandomizeApel(); - UpdateScore(0); - RandomSpawnWall(); - } - } else { - InputKeyboard(); - ClearCanvas(); - Movement(); - IntiGame(); + if (!GameStart) { + requestAnimationFrame(gameLoop); + return; } + ClearCanvas(); + Movement(); + IntiGame(); + requestAnimationFrame(gameLoop); } @@ -87,6 +126,7 @@ Apel.y = Math.floor(Math.random() * pembatastinggi) * grid; } + //random spawn tembok function RandomSpawnWall() { var TembokX, TembokY; var kosong; @@ -125,8 +165,10 @@ //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁 function PenambahanTembok() { - if (Tembok.length < Math.floor(score / 2)) { - RandomSpawnWall(); + if (ModeH) { + if (Tembok.length < Math.floor(score / 2)) { + RandomSpawnWall(); + } } } @@ -145,9 +187,14 @@ PenambahanTembok(); } - //gameover countdown + //tampilin gameover function GameOver() { - GameOverTimer = 3; + GameStart = false; + ClearCanvas(); + + // TAMPILKAN POP-UP GAME OVER + ScoreMain.innerHTML = "Score: " + score; + UpDead.style.display = "flex"; } //reset isi canvas doang @@ -242,6 +289,7 @@ //input keyboard buat jalan function InputKeyboard() { document.addEventListener("keydown", function (e) { + if (!GameStart) return; if ( ArahUlar == 0 && ((e.code == "KeyA" && Ular.dx === 0) || @@ -268,4 +316,5 @@ : speed; }); } + InputKeyboard(); gameLoop(); \ No newline at end of file diff --git a/GameStyle.css b/GameStyle.css index 80abb67..b526094 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,49 @@ padding-bottom: 20px; padding-top: 20px; } + .starting { + 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; + } + #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; + } + .popAwal h1 { + margin-left: 30px; + margin-right: 25px; + } + #keluar { + background-color: #f44336; + } + #keluar:hover { + background-color: #d32f2f; + } .icon { width: 70px; height: 70px; @@ -60,4 +104,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..12c80fa 100644 --- a/game.html +++ b/game.html @@ -14,8 +14,24 @@
- + +
+
+
+

Start Game?

+

Silakan Pilih Mode

+ + +
+
Controls:
Movement: W A S D

@@ -31,4 +47,4 @@ - + \ No newline at end of file