5803025019/KELOMPOK01-intro-Haekal-Adi-Rendra-Gerrad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
5803025056 2025-12-15 21:16:27 -05:00
parent 1d5433eceb
commit db356f55be
5 changed files with 364 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
db.php Normal file
View File

@ -0,0 +1,12 @@
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "dodge_game";
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
?>

8
db.sql Normal file
View File

@ -0,0 +1,8 @@
USE dodge_game;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE,
password VARCHAR(255)
);

295
game.php Normal file
View File

@ -0,0 +1,295 @@
<?php
session_start();
if (!isset($_SESSION['user'])) {
header("Location: index.php");
exit;
}
$username = $_SESSION['user'];
// koneksi db
$conn = new mysqli("localhost", "root", "", "dodge_game");
// Ambil skin user dari database
$q = $conn->query("SELECT skin FROM users WHERE username='$username'");
$skinColor = $q->fetch_assoc()["skin"];
// Daftar warna skin
$skinList = [
"cyan" => "#00ffff",
"blue" => "#0066ff",
"yellow" => "#ffee00",
"purple" => "#ff55ff",
"green" => "#33ff55"
];
// Warna player yang dipakai
$playerColor = $skinList[$skinColor];
?>
<!DOCTYPE html>
<html>
<head>
<title>Hindari Block</title>
<style>
body {
font-family: Arial;
background: url('assets/bg.jpg') no-repeat center center fixed;
background-size: cover;
color: white;
margin: 0;
display: flex;
}
#gameWrapper {
width: 75%;
padding: 20px;
text-align: center;
}
#gameArea {
width: 400px;
height: 500px;
background: #222;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 10px #000;
}
#player {
width: 40px;
height: 40px;
background: <?= $playerColor ?>;
position: absolute;
bottom: 10px;
left: 180px;
border-radius: 8px;
}
#block {
width: 40px;
height: 40px;
background: red;
position: absolute;
top: -40px;
left: 180px;
border-radius: 8px;
}
#leaderboard {
width: 25%;
padding: 20px;
background: #111;
border-left: 2px solid #333;
height: 100vh;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border-bottom: 1px solid #333;
}
/* ===== POPUP GAME OVER ===== */
#gameOverPopup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
justify-content: center;
align-items: center;
}
.popup-box {
background: #222;
padding: 25px;
border-radius: 10px;
text-align: center;
width: 300px;
box-shadow: 0 0 10px #000;
}
.popup-box button {
margin-top: 15px;
padding: 10px;
width: 120px;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 6px;
}
#btnRestart {
background: #00d37e;
}
#btnLmenu {
background: #00d37e;
}
</style>
</head>
<body>
<div id="gameWrapper">
<h1>Hindari Block</h1>
<p>Player: <b><?= $username ?></b></p>
<div class="score-box">Score: <span id="score">0</span></div>
<div id="gameArea">
<div id="player"></div>
<div id="block"></div>
</div>
<p>Credits: Haekal Adi Rendra & Gerrad</p>
</div>
<div id="leaderboard">
<h2>Leaderboard</h2>
<table>
<tr>
<th>User</th>
<th>Score</th>
</tr>
<?php
$result = $conn->query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20");
while ($row = $result->fetch_assoc()) {
echo "<tr><td>{$row['username']}</td><td>{$row['score']}</td></tr>";
}
?>
</table>
</div>
<!-- ========= POPUP GAME OVER ========= -->
<div id="gameOverPopup">
<div class="popup-box">
<h2>Game Over</h2>
<p>Score Kamu: <span id="finalScore"></span></p>
<button id="btnRestart">New Game</button>
<button id="btnmenu">Menu</button>
</div>
</div>
<audio id="soundMove" src="assets/sound/move.wav"></audio>
<audio id="soundScore" src="assets/sound/score.wav"></audio>
<audio id="soundGameOver" src="assets/sound/gameover.wav"></audio>
<script>
let currentUser = "<?= $username ?>";
</script>
<script>
// ========= GAME SCRIPT ==========
const player = document.getElementById("player");
const block = document.getElementById("block");
let score = 0;
let gameRunning = true;
document.addEventListener("keydown", e => {
if (!gameRunning) return;
let left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
if (e.key === "ArrowLeft" && left > 0) {
player.style.left = (left - 20) + "px";
soundMove.currentTime = 0;
soundMove.play();
}
if (e.key === "ArrowRight" && left < 360) {
player.style.left = (left + 20) + "px";
soundMove.currentTime = 0;
soundMove.play();
}
});
let blockSpeed = 5; // kecepatan awal block
function fall() {
if (!gameRunning) return;
let blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top"));
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
let playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
// TABRAKAN
if (blockTop > 450 && Math.abs(blockLeft - playerLeft) < 40) {
gameRunning = false;
soundGameOver.play();
saveScore(score);
showGameOver(score);
return;
}
// Jika block sudah jatuh ke bawah
if (blockTop > 500) {
block.style.top = "-40px";
block.style.left = Math.floor(Math.random() * 360) + "px";
score++;
document.getElementById("score").innerText = score;
// ======== TINGKATKAN KECEPATAN BLOCK BERDASARKAN SCORE ========
if (score === 15) blockSpeed = 7;
if (score === 25) blockSpeed = 8;
if (score === 35) blockSpeed = 10;
if (score === 45) blockSpeed = 12;
if (score === 60) blockSpeed = 14;
if (score === 80) blockSpeed = 16;
if (score === 100) blockSpeed = 18;
soundScore.currentTime = 0;
soundScore.play();
} else {
block.style.top = (blockTop + blockSpeed) + "px";
}
requestAnimationFrame(fall);
}
fall();
// ================== SIMPAN SKOR KE SERVER ==================
function saveScore(finalScore) {
fetch("save_score.php", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: "username=" + currentUser + "&score=" + finalScore
});
}
// ================== POPUP GAME OVER ==================
const popup = document.getElementById("gameOverPopup");
const finalScoreText = document.getElementById("finalScore");
const btnRestart = document.getElementById("btnRestart");
const btnmenu = document.getElementById("btnmenu");
function showGameOver(finalScore) {
finalScoreText.textContent = finalScore;
popup.style.display = "flex";
}
btnRestart.onclick = () => {
window.location.reload();
};
btnmenu.onclick = () => {
window.location.href = "menu.php";
};
</script>
</body>
</html>

45
index.php Normal file
View File

@ -0,0 +1,45 @@
<?php
session_start();
require 'db.php';
$message = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
$query = $conn->query("SELECT * FROM users WHERE username='$username'");
if ($query->num_rows > 0) {
$row = $query->fetch_assoc();
if (password_verify($password, $row['password'])) {
$_SESSION['user'] = $row['username'];
header("Location: menu.php"); // ⬅ KE MENU BUKAN GAME
exit;
} else {
$message = "Password salah!";
}
} else {
$message = "Username tidak ditemukan!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="box">
<h2>Login</h2>
<form method="POST">
<input type="text" name="username" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<button type="submit">Masuk</button>
</form>
<p><?= $message ?></p>
<a href="register.php">Register</a>
</div>
</body>
</html>

4
logout.php Normal file
View File

@ -0,0 +1,4 @@
<?php
session_start();
session_destroy();
header("Location: index.php");