From 6a4e0e3b09ff2ce9b5a890e9fb26cff25814b20f Mon Sep 17 00:00:00 2001 From: michaelailbert <43468545+michaelailbert@users.noreply.github.com> Date: Sat, 29 Nov 2025 15:48:16 +0700 Subject: [PATCH 1/5] tampilan halaman homescreen --- home.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 home.html diff --git a/home.html b/home.html new file mode 100644 index 0000000..756a1fd --- /dev/null +++ b/home.html @@ -0,0 +1,47 @@ + + + + +

EAT THAT APPLE

+
+
Play Game
+
Leaderboard
+
Quit
+
+ + + + \ No newline at end of file From 9171afb11df5f42df0bc0bc283f44264305e20d7 Mon Sep 17 00:00:00 2001 From: JERRY F Date: Sat, 29 Nov 2025 22:02:13 +0700 Subject: [PATCH 2/5] 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 From a74311d4d887632bab56c419d40fc58be1c39e5f Mon Sep 17 00:00:00 2001 From: JERRY F Date: Mon, 1 Dec 2025 09:29:55 +0700 Subject: [PATCH 3/5] +control pakai tanda panah --- GameLogic.js | 23 +++++++++++++++++++++-- game.html | 2 +- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/GameLogic.js b/GameLogic.js index 9705551..300b59c 100644 --- a/GameLogic.js +++ b/GameLogic.js @@ -286,10 +286,12 @@ if (Ular.cells.length > Ular.maxCells) Ular.cells.pop(); } - //input keyboard buat jalan + //input keyboard function InputKeyboard() { document.addEventListener("keydown", function (e) { if (!GameStart) return; + + // jalan buat ular if ( ArahUlar == 0 && ((e.code == "KeyA" && Ular.dx === 0) || @@ -306,7 +308,24 @@ ArahUlar = 1; Ular.dy = e.code == "KeyW" ? -grid : grid; Ular.dx = 0; - } + } else if ( + ArahUlar == 0 && + ((e.code === "ArrowUp" && Ular.dy === 0) || + (e.code == "ArrowDown" && Ular.dy === 0)) + ) { + ArahUlar = 1; + Ular.dy = e.code == "ArrowUp" ? -grid : grid; + Ular.dx = 0; + } else if ( + ArahUlar == 0 && + ((e.code === "ArrowLeft" && Ular.dx === 0) || + (e.code == "ArrowRight" && Ular.dx === 0)) + ) { + ArahUlar = 1; + Ular.dx = e.code == "ArrowLeft" ? -grid : grid; + Ular.dy = 0; + } + if (e.code === "KeyE" || e.code == "KeyQ") speed = e.code == "KeyE" && speed > 4 diff --git a/game.html b/game.html index 12c80fa..1215bc8 100644 --- a/game.html +++ b/game.html @@ -33,7 +33,7 @@
-
Controls:
Movement: W A S D

+
From 0bc467a684cfcdc130bf2ad1e3ffa9672a2be86c Mon Sep 17 00:00:00 2001 From: JERRY F Date: Mon, 1 Dec 2025 09:43:50 +0700 Subject: [PATCH 4/5] . --- GameLogic.js | 5 +++-- GameStyle.css | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/GameLogic.js b/GameLogic.js index 300b59c..85f0940 100644 --- a/GameLogic.js +++ b/GameLogic.js @@ -269,6 +269,7 @@ }); } + //update teks pada speed kalau score update function Movement() { if (++count < speed) return; if (ArahUlar > 0) ArahUlar--; @@ -328,9 +329,9 @@ if (e.code === "KeyE" || e.code == "KeyQ") speed = - e.code == "KeyE" && speed > 4 + e.code == "KeyE" && speed > 5 ? speed - 1 - : e.code == "KeyQ" && speed < 9 + : e.code == "KeyQ" && speed < 15 ? speed + 1 : speed; }); diff --git a/GameStyle.css b/GameStyle.css index b526094..5f00b90 100644 --- a/GameStyle.css +++ b/GameStyle.css @@ -109,7 +109,7 @@ padding: 15px 30px; font-size: 20px; cursor: pointer; - color: white; + color: rgb(255, 255, 255); border: none; border-radius: 5px; margin: 10px 5px; From b6fbbc31c7c4ffe840febe7a7a4ea26b57247b92 Mon Sep 17 00:00:00 2001 From: JERRY F Date: Mon, 1 Dec 2025 12:15:56 +0700 Subject: [PATCH 5/5] teks --- GameStyle.css | 9 ++++++++- game.html | 14 ++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/GameStyle.css b/GameStyle.css index 5f00b90..ed17a7b 100644 --- a/GameStyle.css +++ b/GameStyle.css @@ -2,7 +2,10 @@ background-color: rgb(24, 24, 24); color: white; text-align: left; - font-family: "Comic Sans MS", cursive, sans-serif; + font-family: "Pixelify Sans", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; font-size: 24px; } header, @@ -119,6 +122,10 @@ margin-left: auto; margin-right: auto; transition: background-color 0.2s, color 0.25s; + font-family: "Pixelify Sans", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; } #mode-normal { background-color: #73e4c2; diff --git a/game.html b/game.html index 1215bc8..5bf11d7 100644 --- a/game.html +++ b/game.html @@ -1,8 +1,14 @@ - - + + + + +
@@ -45,6 +51,6 @@ - + - \ No newline at end of file +