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:cd26b1b2f1eaea46fa154d24475fba2b2ec5bc55
Branches Tags
2526-web:main
2526-web:yeri
2526-web:daud
..
compare: 2526-web:0e7035e018941e1c8fb5f3edca52302da0c04c82
Branches Tags
2526-web:main
2526-web:yeri
2526-web:daud

No commits in common. "cd26b1b2f1eaea46fa154d24475fba2b2ec5bc55" and "0e7035e018941e1c8fb5f3edca52302da0c04c82" have entirely different histories.
cd26b1b2f1 ... 0e7035e018

23 changed files with 187 additions and 80 deletions
Show Stats Expand all files Collapse all files

BIN
gambar/ApelLayer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 605 B

BIN
gambar/BadanHorizontal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 B

BIN
gambar/BadanVertikal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 B

BIN
gambar/BelokAtasKanan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 B

BIN
gambar/BelokAtasKiri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 B

BIN
gambar/BelokBawahKanan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 B

BIN
gambar/BelokBawahKiri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 397 B

BIN
gambar/BokongHorizontalKanan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
gambar/BokongHorizontalKiri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 291 B

BIN
gambar/BokongVertikalAtas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
gambar/BokongVertikalBawah.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 B

BIN
gambar/KepalaHorizontalKanan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 B

BIN
gambar/KepalaHorizontalKiri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 488 B

BIN
gambar/KepalaVertikalAtas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 B

BIN
gambar/KepalaVertikalBawah.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 B

BIN
gambar/PialaLayer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 574 B

BIN
gambar/Tembok.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 B

60
gambar/daftar.php Normal file
View File

@ -0,0 +1,60 @@
<?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 Normal file
View File

@ -0,0 +1,26 @@
<?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 Normal file
View File

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

58
gambar/login.php Normal file
View File

@ -0,0 +1,58 @@
<?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 Normal file
View File

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

96
game.html
View File

@ -59,8 +59,8 @@
color: red; color: red;
font-size: 90px; font-size: 90px;
position: absolute; position: absolute;
top: 280px; top: 450px;
left: 300px; left: 210px;
} }
#game { #game {
background: rgb(192, 232, 255); background: rgb(192, 232, 255);
@ -77,10 +77,12 @@
</header> </header>
<div class="HalamanFull"> <div class="HalamanFull">
<canvas width="1058" height="480" id="game"></canvas> <canvas width="800" height="800" id="game"></canvas>
<div id="gameover" class="gameover"></div> <div id="gameover" class="gameover"></div>
<div> <div>
<div class="text">Controls: <br />Movement: W A S D <br /><br /></div> <div class="text">
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>
@ -103,21 +105,9 @@
//generate gambar external //generate gambar external
var KepalaUlarImage = new Image(); var KepalaUlarImage = new Image();
KepalaUlarImage.src = "image/KepalaHorizontalKanan.png"; KepalaUlarImage.src = "image/KepalaVertikalAtas.png"; // kepala ular
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"; BadanUlarImage.src = "image/BadanVertikal.png"; // badan ular awal
// ↑ 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();
@ -126,10 +116,10 @@
//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: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 }; var Ular = { x: 400, y: 400, 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(-1);
RandomizeApel(); RandomizeApel();
RandomSpawnWall(); RandomSpawnWall();
@ -147,16 +137,14 @@
? "Gameover " + GameOverTimer.toFixed(0).toString() ? "Gameover " + GameOverTimer.toFixed(0).toString()
: ""; : "";
if (GameOverTimer <= 0) { if (GameOverTimer <= 0) {
Ular.x = 528; Ular.x = 400;
Ular.y = 240; Ular.y = 400;
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(0); UpdateScore(-1);
RandomSpawnWall();
} }
} else { } else {
InputKeyboard(); InputKeyboard();
@ -169,24 +157,19 @@
//random spawn Apel //random spawn Apel
function RandomizeApel() { function RandomizeApel() {
var pembataslebar = Math.floor(canvas.width / grid); Apel.x = Math.floor(Math.random() * 50) * grid;
var pembatastinggi = Math.floor(canvas.height / grid); Apel.y = Math.floor(Math.random() * 50) * 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;
TembokX = Math.floor(Math.random() * pembataslebar) * grid; TembokY = Math.floor(Math.random() * 50) * 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++) {
@ -200,20 +183,13 @@
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 kelipatan ... berapa enaknya ya? 😁 //nambah tembok tiap score +10
function PenambahanTembok() { function PenambahanTembok() {
if (Tembok.length < Math.floor(score / 2)) { if (score > 0 && score % 10 === 0 && Tembok.length < (score/10)) {
RandomSpawnWall(); RandomSpawnWall();
} }
} }
@ -248,36 +224,10 @@
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) {
@ -297,7 +247,7 @@
//tabrak tembok = mati //tabrak tembok = mati
if (index === 0) { if (index === 0) {
Tembok.forEach(function(bata) { Tembok.forEach(function(bata) {
if (cell.x === bata.x && cell.y === bata.y) { if (cell.x === wall.x && cell.y === wall.y) {
GameOver(); GameOver();
} }
}); });