2526-web/Kelompok04-UlardanApel-Wenzel-Daud-Boanerges
2526-web/Kelompok04-UlardanApel-Wenzel-Daud-Boanerges
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P

Browse Source
This commit is contained in:
JERRY F 2025-12-07 22:40:54 +07:00
parent 06ffdaaf7d
commit 0bec0e3f83
2 changed files with 320 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
GameLogic.js
View File

@ -1,60 +1,60 @@
//bagian tempat main ama buat generate game 2d //bagian tempat main ama buat generate game 2d
var canvas = document.getElementById("game"); var canvas = document.getElementById("game");
var content = canvas.getContext("2d"); var content = canvas.getContext("2d");
const Text = document.getElementById("text"); const Text = document.getElementById("text");
const UpDead = document.getElementById("gameover-overlay"); const UpDead = document.getElementById("gameover-overlay");
const ScoreMain = document.getElementById("gameover-score"); const ScoreMain = document.getElementById("gameover-score");
const PlayAgain = document.getElementById("ulangi"); const PlayAgain = document.getElementById("ulangi");
const Udahan = document.getElementById("keluar"); const Udahan = document.getElementById("keluar");
//settingan awal //settingan awal
var grid = 24; var grid = 24;
var count = 0; var count = 0;
var speed = 10; var speed = 10;
var score = 0; var score = 0;
var highscore = 0; var highscore = 0;
var ArahUlar = 0; var ArahUlar = 0;
var GameOverTimer = 0; var GameOverTimer = 0;
var GameStart = false; var GameStart = false;
var ModeH = false; var ModeH = false;
const persiapan = document.getElementById("start"); const persiapan = document.getElementById("start");
//generate gambar external //generate gambar external
var KepalaUlarImage = new Image(); var KepalaKeKanan = new Image();
KepalaUlarImage.src = "image/KepalaHorizontalKanan.png"; KepalaKeKanan.src = "image/KepalaHorizontalKanan.png";
var KepalAtas = new Image(); var KepalaKeAtas = new Image();
KepalAtas.src = "image/KepalaVertikalAtas.png"; KepalaKeAtas.src = "image/KepalaVertikalAtas.png";
var KepalaBawah = new Image(); var KepalaKeKiri = new Image();
KepalaBawah.src = "image/KepalaVertikalBawah.png"; KepalaKeKiri.src = "image/KepalaVertikalBawah.png";
var KepalaKiri = new Image(); var KepalaKeBawah = new Image();
KepalaKiri.src = "image/KepalaHorizontalKiri.png"; KepalaKeBawah.src = "image/KepalaHorizontalKiri.png";
var KepalaKanan = new Image(); // ↑ kepala ular
KepalaKanan.src = "image/KepalaHorizontalKanan.png";
// ↑ kepala ular
var BadanUlarImage = new Image(); var BadanHori = new Image();
BadanUlarImage.src = "image/BadanVertikal.png"; BadanHori.src = "image/BadanHorizontal.png";
// ↑ badan ular var BadanVerti = new Image();
BadanVerti.src = "image/BadanVertical.png";
// ↑ badan ular
var ApelImage = new Image(); var ApelImage = new Image();
ApelImage.src = "image/ApelLayer.png"; // Apel ApelImage.src = "image/ApelLayer.png"; // Apel
var TembokImage = new Image(); var TembokImage = new Image();
TembokImage.src = "image/Tembok.png"; // Tembok Batagor TembokImage.src = "image/Tembok.png"; // Tembok Batagor
//set posisi ular dan Apel //set posisi ular dan Apel
var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 }; var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 };
var Apel = { x: 0, y: 0 }; var Apel = { x: 0, y: 0 };
var Tembok = []; var Tembok = [];
UpdateScore(0); UpdateScore(0);
RandomizeApel(); RandomizeApel();
//mastiin gambar external generate dulu sebelum game start //mastiin gambar external generate dulu sebelum game start
KepalaUlarImage.onload = function () { KepalaKeKanan.onload = function () {
function gameLoop() {} function gameLoop() {}
}; };
//ngatur biar game ga langsung jalan //ngatur biar game ga langsung jalan
function StartingGame(menantang) { function StartingGame(menantang) {
ModeH = menantang; ModeH = menantang;
persiapan.style.display = "none"; persiapan.style.display = "none";
if (ModeH) { if (ModeH) {
@ -63,23 +63,19 @@
Tembok = []; Tembok = [];
} }
GameStart = true; GameStart = true;
} }
//buat ngatur batu spwan apa ga nanti //buat ngatur batu spwan apa ga nanti
document document.getElementById("mode-normal").addEventListener("click", function () {
.getElementById("mode-normal")
.addEventListener("click", function () {
StartingGame(false); StartingGame(false);
}); });
document document.getElementById("mode-tambahan").addEventListener("click", function () {
.getElementById("mode-tambahan")
.addEventListener("click", function () {
StartingGame(true); StartingGame(true);
}); });
//play again pas gameover //play again pas gameover
function resetGame() { function resetGame() {
Ular.x = 528; Ular.x = 528;
Ular.y = 240; Ular.y = 240;
Ular.cells = []; Ular.cells = [];
@ -91,22 +87,22 @@
UpdateScore(0); UpdateScore(0);
ModeH = false; ModeH = false;
GameStart = false; GameStart = false;
} }
//ngatur tombol pas gameover kemana abis di klik //ngatur tombol pas gameover kemana abis di klik
PlayAgain.addEventListener("click", function () { PlayAgain.addEventListener("click", function () {
UpDead.style.display = "none"; UpDead.style.display = "none";
resetGame(); resetGame();
persiapan.style.display = "flex"; persiapan.style.display = "flex";
}); });
Udahan.addEventListener("click", function () { Udahan.addEventListener("click", function () {
UpDead.style.display = "none"; UpDead.style.display = "none";
resetGame(); resetGame();
}); });
//gameover terus ngatur ular ke setting awal //gameover terus ngatur ular ke setting awal
function gameLoop() { function gameLoop() {
if (!GameStart) { if (!GameStart) {
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
return; return;
@ -116,18 +112,18 @@
IntiGame(); IntiGame();
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
} }
//random spawn Apel //random spawn Apel
function RandomizeApel() { function RandomizeApel() {
var pembataslebar = Math.floor(canvas.width / grid); var pembataslebar = Math.floor(canvas.width / grid);
var pembatastinggi = Math.floor(canvas.height / grid); var pembatastinggi = Math.floor(canvas.height / grid);
Apel.x = Math.floor(Math.random() * pembataslebar) * grid; Apel.x = Math.floor(Math.random() * pembataslebar) * grid;
Apel.y = Math.floor(Math.random() * pembatastinggi) * grid; Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
} }
//random spawn tembok //random spawn tembok
function RandomSpawnWall() { function RandomSpawnWall() {
var TembokX, TembokY; var TembokX, TembokY;
var kosong; var kosong;
var pembataslebar = Math.floor(canvas.width / grid); var pembataslebar = Math.floor(canvas.width / grid);
@ -161,50 +157,45 @@
} }
} while (kosong === false); } while (kosong === false);
Tembok.push({ x: TembokX, y: TembokY }); Tembok.push({ x: TembokX, y: TembokY });
} }
//nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁 //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
function PenambahanTembok() { function PenambahanTembok() {
if (ModeH) { if (ModeH) {
if (Tembok.length < Math.floor(score / 2)) { if (Tembok.length < Math.floor(score / 2)) {
RandomSpawnWall(); RandomSpawnWall();
} }
} }
} }
//set dan update score //set dan update score
function UpdateScore(amount) { function UpdateScore(amount) {
score = amount > 0 ? score + amount : 0; score = amount > 0 ? score + amount : 0;
highscore = score > highscore ? score : highscore; highscore = score > highscore ? score : highscore;
Text.innerHTML = Text.innerHTML =
"Score: " + "Score: " + score + "<br>Highscore: " + highscore + "<br>Speed: " + speed;
score +
"<br>Highscore: " +
highscore +
"<br>Speed: " +
speed;
PenambahanTembok(); PenambahanTembok();
} }
//tampilin gameover //tampilin gameover
function GameOver() { function GameOver() {
GameStart = false; GameStart = false;
ClearCanvas(); ClearCanvas();
// TAMPILKAN POP-UP GAME OVER // TAMPILKAN POP-UP GAME OVER
ScoreMain.innerHTML = "Score: " + score; ScoreMain.innerHTML = "Score: " + score;
UpDead.style.display = "flex"; UpDead.style.display = "flex";
} }
//reset isi canvas doang //reset isi canvas doang
function ClearCanvas() { function ClearCanvas() {
content.clearRect(0, 0, canvas.width, canvas.height); content.clearRect(0, 0, canvas.width, canvas.height);
} }
//bagian utama: //bagian utama:
//ular makan dan mati pas ketemu badannya //ular makan dan mati pas ketemu badannya
function IntiGame() { function IntiGame() {
//buat gambarnya bisa keluar //buat gambarnya bisa keluar
content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid); content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid);
Tembok.forEach(function (bata) { Tembok.forEach(function (bata) {
@ -217,33 +208,33 @@
var posisiKepalaImage; var posisiKepalaImage;
if (Ular.dx === grid) { if (Ular.dx === grid) {
// KANAN // KANAN
posisiKepalaImage = KepalaKanan; posisiKepalaImage = KepalaKeKanan;
} else if (Ular.dx === -grid) { } else if (Ular.dx === -grid) {
// KIRI // KIRI
posisiKepalaImage = KepalaKiri; posisiKepalaImage = KepalaKeKiri;
} else if (Ular.dy === -grid) { } else if (Ular.dy === -grid) {
// ATAS // ATAS
posisiKepalaImage = KepalAtas; posisiKepalaImage = KepalaKeBawah;
} else if (Ular.dy === grid) { } else if (Ular.dy === grid) {
// BAWAH // BAWAH
posisiKepalaImage = KepalaBawah; posisiKepalaImage = KepalaKeAtas;
} else { } else {
// Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal) // Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal)
posisiKepalaImage = KepalaKanan; posisiKepalaImage = KepalaKeKanan;
} }
content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid); content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
} else { } else {
content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid); content.drawImage(BadanHori, cell.x, cell.y, grid, grid);
} }
}); });
//bagian generate ular //bagian generate ular
Ular.cells.forEach(function (cell, index) { Ular.cells.forEach(function (cell, index) {
if (index === 0) { if (index === 0) {
content.drawImage(KepalaUlarImage, cell.x, cell.y, grid, grid); content.drawImage(KepalaKeKanan, cell.x, cell.y, grid, grid);
} else { } else {
content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid); content.drawImage(BadanHori, cell.x, cell.y, grid, grid);
} }
//buat pas ular makan Apel //buat pas ular makan Apel
@ -264,13 +255,12 @@
//buat pas ular mati kena badan sendiri //buat pas ular mati kena badan sendiri
for (var i = index + 1; i < Ular.cells.length; i++) for (var i = index + 1; i < Ular.cells.length; i++)
if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y) if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y) GameOver();
GameOver();
}); });
} }
//update teks pada speed kalau score update //update teks pada speed kalau score update
function Movement() { function Movement() {
if (++count < speed) return; if (++count < speed) return;
if (ArahUlar > 0) ArahUlar--; if (ArahUlar > 0) ArahUlar--;
count = 0; count = 0;
@ -285,10 +275,10 @@
GameOver(); GameOver();
Ular.cells.unshift({ x: Ular.x, y: Ular.y }); Ular.cells.unshift({ x: Ular.x, y: Ular.y });
if (Ular.cells.length > Ular.maxCells) Ular.cells.pop(); if (Ular.cells.length > Ular.maxCells) Ular.cells.pop();
} }
//input keyboard //input keyboard
function InputKeyboard() { function InputKeyboard() {
document.addEventListener("keydown", function (e) { document.addEventListener("keydown", function (e) {
if (!GameStart) return; if (!GameStart) return;
@ -329,12 +319,12 @@
if (e.code === "KeyE" || e.code == "KeyQ") if (e.code === "KeyE" || e.code == "KeyQ")
speed = speed =
e.code == "KeyE" && speed > 5 e.code == "KeyE" && speed > 2
? speed - 1 ? speed - 1
: e.code == "KeyQ" && speed < 15 : e.code == "KeyQ" && speed < 30
? speed + 1 ? speed + 1
: speed; : speed;
}); });
} }
InputKeyboard(); InputKeyboard();
gameLoop(); gameLoop();

2
game.html
View File

@ -17,7 +17,7 @@
<h1>Snake</h1> <h1>Snake</h1>
</div> </div>
</header> </header>
<img src="" alt="">
<!-- main konten --> <!-- main konten -->
<div class="HalamanFull"> <div class="HalamanFull">
<canvas width="1056" height="480" id="game"></canvas> <canvas width="1056" height="480" id="game"></canvas>