diff --git a/db.php b/db.php
new file mode 100644
index 0000000..bd5da08
--- /dev/null
+++ b/db.php
@@ -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);
+}
+?>
diff --git a/db.sql b/db.sql
new file mode 100644
index 0000000..d5b6cc4
--- /dev/null
+++ b/db.sql
@@ -0,0 +1,8 @@
+
+USE dodge_game;
+
+CREATE TABLE users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) UNIQUE,
+    password VARCHAR(255)
+);
diff --git a/game.php b/game.php
new file mode 100644
index 0000000..1f90569
--- /dev/null
+++ b/game.php
@@ -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>
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..2e2882b
--- /dev/null
+++ b/index.php
@@ -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>
diff --git a/logout.php b/logout.php
new file mode 100644
index 0000000..509b777
--- /dev/null
+++ b/logout.php
@@ -0,0 +1,4 @@
+<?php
+session_start();
+session_destroy();
+header("Location: index.php");
