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

Compare commits

base: 2526-web:0e7035e018941e1c8fb5f3edca52302da0c04c82
Branches Tags
2526-web:main
2526-web:yeri
2526-web:daud
...
compare: 2526-web:cd26b1b2f1eaea46fa154d24475fba2b2ec5bc55
Branches Tags
2526-web:main
2526-web:yeri
2526-web:daud

2 Commits
0e7035e018 ... cd26b1b2f1

Author SHA1 Message Date
JERRY F
cd26b1b2f1 tembok dan ukuran 2025-11-26 21:28:34 +07:00
JERRY F
7e654bfe9c tembok update 2025-11-26 18:44:19 +07:00
23 changed files with 80 additions and 187 deletions
Show Stats Expand all files Collapse all files

BIN
gambar/ApelLayer.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 605 B

BIN
gambar/BadanHorizontal.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 284 B

BIN
gambar/BadanVertikal.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 302 B

BIN
gambar/BelokAtasKanan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 415 B

BIN
gambar/BelokAtasKiri.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 432 B

BIN
gambar/BelokBawahKanan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 382 B

BIN
gambar/BelokBawahKiri.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 397 B

BIN
gambar/BokongHorizontalKanan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 316 B

BIN
gambar/BokongHorizontalKiri.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 291 B

BIN
gambar/BokongVertikalAtas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 280 B

BIN
gambar/BokongVertikalBawah.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 327 B

BIN
gambar/KepalaHorizontalKanan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 491 B

BIN
gambar/KepalaHorizontalKiri.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 488 B

BIN
gambar/KepalaVertikalAtas.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 450 B

BIN
gambar/KepalaVertikalBawah.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 486 B

BIN
gambar/PialaLayer.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 574 B

BIN
gambar/Tembok.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 314 B

60
gambar/daftar.php
View File

@ -1,60 +0,0 @@
<?php
session_start();
include "koneksi.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman: Daftar</title>
</head>
<body>
<?php
if(isset($_POST['username'])) {
$nama = $_POST['nama'];
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($koneksi, "INSERT INTO users(nama, username, password) value('$nama', '$username', '$password')");
if($query) {
echo '<script>alert("Selamat, anda berhasil mandaftarkan acc anda!")</script>';
} else {
echo '<script>alert("Maaf, pendaftaraan acc mu gagal")</script>';
}
}
?>
<form action="" method="post">
<table align="center">
<tr>
<td colspan="2" align="center">
<h3>Pendaftaran User</h3>
</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">Daftarkan acc</button>
<a href="login.php">Login</a>
</td>
</tr>
</table>
</form>
</body>
</html>

26
gambar/index.php
View File

@ -1,26 +0,0 @@
<?php
// buat inisialisasi session
session_start();
// mengecek apakah ada session user yang aktif, jika tidak arahkan ke login.php
if(!isset($_SESSION['users'])) {
header('location:login.php'); // arahkan ke login.php
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman ke-1</title>
</head>
<body style='text-align:center'>
<h1>Halaman ke-1</h1>
<a href="index.php">Home</a>
<a href="logout.php">Logout</a>
<hr>
<h3>Selamat datang, <?php echo $_SESSION['users']['nama'] ?></h3>
Halaman ini akan tampil setelah user login.
</body>
</html>

4
gambar/koneksi.php
View File

@ -1,4 +0,0 @@
<?php
$koneksi = mysqli_connect("localhost", "root", "", "game") or die ('database tidak terhubung');
?>

58
gambar/login.php
View File

@ -1,58 +0,0 @@
<?php
session_start();
include "koneksi.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman: Login</title>
</head>
<body>
<?php
if(isset($_POST['username'])) {
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($koneksi, "SELECT * FROM users where username='$username' and password='$password'");
if(mysqli_num_rows($query) > 0) {
$data = mysqli_fetch_array($query);
$_SESSION['users'] = $data;
echo '<script>alert("Selamat datang, '.$data['nama'].'"); location.href="index.php";</script>';
} else {
echo '<script>alert("Username atau Password tidak sesuai");</script>';
}
}
?>
<form action="" method="post">
<table align="center">
<tr>
<td colspan="2" align="center">
<h3>Login User</h3>
</td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">Masuk</button>
<a href="daftar.php">Daftar</a>
</td>
</tr>
</table>
</form>
</body>
</html>

9
gambar/logout.php
View File

@ -1,9 +0,0 @@
<?php
session_start();
session_destroy();
// header('location:login.php');
?>
<script type="text/javascript">
alert('Selamat anda berhasil Logout.');
location.href = "login.php"
</script>

108
game.html
View File

@ -59,8 +59,8 @@
color: red; color: red;
font-size: 90px; font-size: 90px;
position: absolute; position: absolute;
top: 450px; top: 280px;
left: 210px; left: 300px;
} }
#game { #game {
background: rgb(192, 232, 255); background: rgb(192, 232, 255);
@ -77,12 +77,10 @@
</header> </header>
<div class="HalamanFull"> <div class="HalamanFull">
<canvas width="800" height="800" id="game"></canvas> <canvas width="1058" height="480" id="game"></canvas>
<div id="gameover" class="gameover"></div> <div id="gameover" class="gameover"></div>
<div> <div>
<div class="text"> <div class="text">Controls: <br />Movement: W A S D <br /><br /></div>
Controls: <br />Movement: W A S D <br /><br />
</div>
<div id="text" class="text"></div> <div id="text" class="text"></div>
</div> </div>
</div> </div>
@ -105,21 +103,33 @@
//generate gambar external //generate gambar external
var KepalaUlarImage = new Image(); var KepalaUlarImage = new Image();
KepalaUlarImage.src = "image/KepalaVertikalAtas.png"; // kepala ular KepalaUlarImage.src = "image/KepalaHorizontalKanan.png";
var KepalAtas = new Image();
KepalAtas.src = "image/KepalaVertikalAtas.png";
var KepalaBawah = new Image();
KepalaBawah.src = "image/KepalaVertikalBawah.png";
var KepalaKiri = new Image();
KepalaKiri.src = "image/KepalaHorizontalKiri.png";
var KepalaKanan = new Image();
KepalaKanan.src = "image/KepalaHorizontalKanan.png";
// ↑ kepala ular
var BadanUlarImage = new Image(); var BadanUlarImage = new Image();
BadanUlarImage.src = "image/BadanVertikal.png"; // badan ular awal BadanUlarImage.src = "image/BadanVertikal.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
//D:\PROYEK UAS\Game ULAR\gambar\Tembok.png //D:\PROYEK UAS\Game ULAR\gambar\Tembok.png
//set posisi ular dan Apel //set posisi ular dan Apel
var Ular = { x: 400, y: 400, 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(-1); UpdateScore(0);
RandomizeApel(); RandomizeApel();
RandomSpawnWall(); RandomSpawnWall();
@ -137,14 +147,16 @@
? "Gameover " + GameOverTimer.toFixed(0).toString() ? "Gameover " + GameOverTimer.toFixed(0).toString()
: ""; : "";
if (GameOverTimer <= 0) { if (GameOverTimer <= 0) {
Ular.x = 400; Ular.x = 528;
Ular.y = 400; Ular.y = 240;
Ular.cells = []; Ular.cells = [];
Ular.maxCells = 4; Ular.maxCells = 4;
Ular.dx = grid; Ular.dx = grid;
Ular.dy = 0; Ular.dy = 0;
Tembok = [];
RandomizeApel(); RandomizeApel();
UpdateScore(-1); UpdateScore(0);
RandomSpawnWall();
} }
} else { } else {
InputKeyboard(); InputKeyboard();
@ -157,19 +169,24 @@
//random spawn Apel //random spawn Apel
function RandomizeApel() { function RandomizeApel() {
Apel.x = Math.floor(Math.random() * 50) * grid; var pembataslebar = Math.floor(canvas.width / grid);
Apel.y = Math.floor(Math.random() * 50) * grid; var pembatastinggi = Math.floor(canvas.height / grid);
Apel.x = Math.floor(Math.random() * pembataslebar) * grid;
Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
} }
function RandomSpawnWall() { function RandomSpawnWall() {
var TembokX, TembokY; var TembokX, TembokY;
var kosong; var kosong;
var pembataslebar = Math.floor(canvas.width / grid);
var pembatastinggi = Math.floor(canvas.height / grid);
//create tembok //create tembok
do { do {
kosong = true; kosong = true;
TembokX = Math.floor(Math.random() * 50) * grid;
TembokY = Math.floor(Math.random() * 50) * grid; TembokX = Math.floor(Math.random() * pembataslebar) * grid;
TembokY = Math.floor(Math.random() * pembatastinggi) * grid;
//cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya //cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya
for (var i = 0; i < Ular.cells.length; i++) { for (var i = 0; i < Ular.cells.length; i++) {
@ -183,13 +200,20 @@
if (TembokX === Apel.x && TembokY === Apel.y) { if (TembokX === Apel.x && TembokY === Apel.y) {
kosong = false; kosong = false;
} }
for (var i = 0; i < Tembok.length; i++) {
if (Tembok[i].x === TembokX && Tembok[i].y === TembokY) {
kosong = false;
break;
}
}
} while (kosong === false); } while (kosong === false);
Tembok.push({x:TembokX, y:TembokY}) Tembok.push({ x: TembokX, y: TembokY });
} }
//nambah tembok tiap score +10 //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
function PenambahanTembok() { function PenambahanTembok() {
if (score > 0 && score % 10 === 0 && Tembok.length < (score/10)) { if (Tembok.length < Math.floor(score / 2)) {
RandomSpawnWall(); RandomSpawnWall();
} }
} }
@ -206,7 +230,7 @@
"<br>Speed: " + "<br>Speed: " +
speed; speed;
PenambahanTembok(); PenambahanTembok();
} }
//gameover countdown //gameover countdown
@ -224,10 +248,36 @@
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) {
content.drawImage(TembokImage, bata.x, bata.y, grid, grid); content.drawImage(TembokImage, bata.x, bata.y, grid, grid);
}) });
Ular.cells.forEach(function (cell, index) {
if (index === 0) {
// Logika Pemilihan Gambar Kepala Ular
var posisiKepalaImage;
if (Ular.dx === grid) {
// KANAN
posisiKepalaImage = KepalaKanan;
} else if (Ular.dx === -grid) {
// KIRI
posisiKepalaImage = KepalaKiri;
} else if (Ular.dy === -grid) {
// ATAS
posisiKepalaImage = KepalAtas;
} else if (Ular.dy === grid) {
// BAWAH
posisiKepalaImage = KepalaBawah;
} else {
// Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal)
posisiKepalaImage = KepalaKanan;
}
content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
} else {
content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid);
}
});
//bagian generate ular //bagian generate ular
Ular.cells.forEach(function (cell, index) { Ular.cells.forEach(function (cell, index) {
@ -246,10 +296,10 @@
//tabrak tembok = mati //tabrak tembok = mati
if (index === 0) { if (index === 0) {
Tembok.forEach(function(bata) { Tembok.forEach(function (bata) {
if (cell.x === wall.x && cell.y === wall.y) { if (cell.x === bata.x && cell.y === bata.y) {
GameOver(); GameOver();
} }
}); });
} }