diff --git a/BG.jpg b/BG.jpg new file mode 100644 index 0000000..aedd69d Binary files /dev/null and b/BG.jpg differ diff --git a/about.md b/about.md new file mode 100644 index 0000000..326f695 --- /dev/null +++ b/about.md @@ -0,0 +1 @@ +Permainan dengan nama HarGame () adalah game sederhana berbasis HTML,CSS, dan JavaScript dimana pemain menggerakan kotak biru ke kiri atau kanan untuk menghindari blok merah yang jatuh.Skor akan bertambah setiap detik, dan level akan meningkat otomatis sehingga kecepatan musuh semakin cepat.Jika terkena blok, game berakhir dan skor tertinggi disimpan dengan LocalStorage.Game ini menampilkan mekanik dasar seperti gerakan pemain, spawn musuh deteksi tabrakan,dan sistem level \ No newline at end of file diff --git a/db.php b/db.php index f29b89e..687e290 100644 --- a/db.php +++ b/db.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD connect_error) { die("Koneksi gagal: " . $conn->connect_error); } ?> +======= +connect_error) { + die("Koneksi gagal: " . $conn->connect_error); +} +?> +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/db.sql b/db.sql index 37e7fbe..3b637d1 100644 --- a/db.sql +++ b/db.sql @@ -1,3 +1,4 @@ +<<<<<<< HEAD USE dodge_game; @@ -6,3 +7,13 @@ CREATE TABLE users ( username VARCHAR(50) UNIQUE, password VARCHAR(255) ); +======= + +USE dodge_game; + +CREATE TABLE users ( + id INT AUTO_INCREMENT PRIMARY KEY, + username VARCHAR(50) UNIQUE, + password VARCHAR(255) +); +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/game.js b/game.js new file mode 100644 index 0000000..a66be12 --- /dev/null +++ b/game.js @@ -0,0 +1,65 @@ +const player = document.getElementById("player"); +const block = document.getElementById("block"); +const scoreText = document.getElementById("scoreText"); + +let score = 0; +let playerX = 180; + +// KECEPATAN (DIUBAH) +let speed = 1; +let speedIncrease = 0.6; +let maxSpeed = 12; + +document.addEventListener("keydown", (e) => { + if (e.key === "ArrowLeft" && playerX > 0) { + playerX -= 20; + } + if (e.key === "ArrowRight" && playerX < 360) { + playerX += 20; + } + player.style.left = playerX + "px"; +}); + +function moveBlock() { + let blockY = -40; + let blockX = Math.floor(Math.random() * 360); + block.style.left = blockX + "px"; + + let fall = setInterval(() => { + blockY += speed; + block.style.top = blockY + "px"; + + // TABRAKAN + if ( + blockY > 450 && + blockX < playerX + 40 && + blockX + 40 > playerX + ) { + alert("Game Over! Score: " + score); + score = 0; + speed = 1; // reset ke pelan (DIUBAH) + scoreText.textContent = "Score: 0"; + clearInterval(fall); + moveBlock(); + } + + // BLOCK LOLOS + if (blockY > 500) { + score++; + scoreText.textContent = "Score: " + score; + + // NAIK BERTAHAP (TERASA) + if (speed < maxSpeed) { + speed += speedIncrease; + } + + blockY = -40; + block.style.top = "-40px"; + clearInterval(fall); + moveBlock(); + } + + }, 16); // DIUBAH: lebih smooth (60 FPS) +} + +moveBlock(); diff --git a/game.php b/game.php index 41d3d9f..83dbb95 100644 --- a/game.php +++ b/game.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD - \ No newline at end of file + +======= +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]; + +?> + + + + + Hindari Block + + + + + +
+

Hindari Block

+

Player:

+
Score: 0
+ +
+
+
+
+

Credits: Haekal Adi Rendra & Gerrad

+
+ +
+

Leaderboard

+ + + + + + + query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20"); + while ($row = $result->fetch_assoc()) { + echo ""; + } + ?> +
UserScore
{$row['username']}{$row['score']}
+
+ + +
+
+

Game Over

+

Score Kamu:

+ + + +
+
+ + + + + + + + + + +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/gameover.wav b/gameover.wav new file mode 100644 index 0000000..f324b3f Binary files /dev/null and b/gameover.wav differ diff --git a/index.php b/index.php index 85d214e..7e965da 100644 --- a/index.php +++ b/index.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD +======= +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!"; + } +} +?> + + + +Login + + + +
+

Login

+
+
+
+ +
+

+Register +
+ + +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/joinus.md b/joinus.md new file mode 100644 index 0000000..fcc53fe --- /dev/null +++ b/joinus.md @@ -0,0 +1,7 @@ +Step Untuk Join + +Mampu menguasai bahasa pemrograman seperti Html, CSS, dan JavaScript + +Mampu bekerja sama dengan tim + + diff --git a/logout.php b/logout.php index fda681e..6d8555f 100644 --- a/logout.php +++ b/logout.php @@ -1,4 +1,11 @@ +<<<<<<< HEAD >>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/menu.php b/menu.php index c188910..459b333 100644 --- a/menu.php +++ b/menu.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD +======= + + + + + +Menu Utama + + + + + + + + +
+

Menu Utama

+

Halo,

+ + + + + + + + + + + +
+ + + +
+
+

Pengaturan

+ + + + + + +
+
+ + + + + + +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/move.wav b/move.wav new file mode 100644 index 0000000..582445e Binary files /dev/null and b/move.wav differ diff --git a/register.php b/register.php index b672df5..a63479c 100644 --- a/register.php +++ b/register.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD +======= +query("SELECT * FROM users WHERE username='$username'"); + if ($check->num_rows > 0) { + $message = "Username sudah digunakan!"; + } else { + $sql = "INSERT INTO users(username, password) VALUES('$username', '$password')"; + if ($conn->query($sql)) { + header("Location: index.php"); + exit; + } else { + $message = "Gagal registrasi!"; + } + } +} +?> + + + + + Register + + + +
+

Register

+
+
+
+ +
+

+ Login +
+ + +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/save_score.php b/save_score.php index 4e3c535..23176eb 100644 --- a/save_score.php +++ b/save_score.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD num_rows > 0) { echo "OK"; ?> +======= +connect_error) { + die("DB Error: " . $conn->connect_error); +} + +$username = $_POST['username']; +$score = intval($_POST['score']); + +// cek jika user sudah punya skor sebelumnya +$check = $conn->query("SELECT * FROM leaderboard WHERE username='$username'"); + +if ($check->num_rows > 0) { + // update jika score baru lebih tinggi + $conn->query("UPDATE leaderboard SET score=GREATEST(score, $score) WHERE username='$username'"); +} else { + // insert jika belum ada + $conn->query("INSERT INTO leaderboard (username, score) VALUES ('$username', $score)"); +} + +echo "OK"; +?> +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 diff --git a/score.wav b/score.wav new file mode 100644 index 0000000..d8941f5 Binary files /dev/null and b/score.wav differ diff --git a/skins.php b/skins.php index 201baf8..8bdd3a8 100644 --- a/skins.php +++ b/skins.php @@ -1,3 +1,4 @@ +<<<<<<< HEAD { +======= +query("SELECT skin FROM users WHERE username='$user'"); +$currentSkin = $qSkin->fetch_assoc()['skin']; + +// LIST SKIN +$skins = [ + "cyan" => "#00ffff", + "blue" => "#0066ff", + "yellow" => "#ffee00", + "purple" => "#ff55ff", + "green" => "#33ff55" +]; + +// AMBIL SKIN USER +$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'"); +$data = $qSkin->fetch_assoc(); + +// PROSES SIMPAN SKIN +if (isset($_POST['chooseSkin'])) { + $selectedSkin = $_POST['skin']; + $conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'"); + $currentSkin = $selectedSkin; +} +?> + + + + +Pilih Skin + + + + + + + +

Pilih Skin Pemain

+ +
+ +
+ + $color): ?> + + + +
+ +

+ + +
+ + + + + + + + +>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4 \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..42eaf3a --- /dev/null +++ b/style.css @@ -0,0 +1,196 @@ +/* ============================ + GLOBAL STYLE +============================ */ +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #1b1b1b, #2a2a2a); + color: #f5f5f5; + text-align: center; + margin: 0; + padding: 0; +} + +/* ============================ + AUTH BOX (Login / Register) +============================ */ +.box { + background: #1f1f1f; + margin: 100px auto; + width: 350px; + padding: 30px; + border-radius: 15px; + box-shadow: 0px 0px 20px rgba(0, 150, 255, 0.2); + animation: fadeIn 0.6s ease-in-out; +} + +.box h2 { + margin-bottom: 20px; + color: #00aaff; + letter-spacing: 1px; +} + +input, button { + padding: 12px; + margin: 8px 0; + width: 90%; + border-radius: 10px; + border: none; + outline: none; + font-size: 15px; +} + +input { + background: #2e2e2e; + color: white; +} + +button { + background: #007bff; + color: white; + font-weight: bold; + transition: 0.3s; +} + +button:hover { + background: #005fcc; + transform: scale(1.03); +} + +/* ============================ + GAME AREA +============================ */ +#gameArea { + width: 400px; + height: 500px; + background: #111; + border-radius: 15px; + margin: 30px auto; + position: relative; + overflow: hidden; + border: 2px solid #00aaff; + box-shadow: 0px 0px 25px rgba(0, 170, 255, 0.4); + animation: fadeIn 0.8s; +} + +/* Player */ +#player { + width: 40px; + height: 40px; + background: cyan; + position: absolute; + bottom: 10px; + left: 180px; + border-radius: 8px; +} + + +/* Falling Block */ +#block { + width: 45px; + height: 45px; + background: linear-gradient(135deg, #ff4d4d, #ff0000); + border-radius: 10px; + position: absolute; + top: -50px; + left: 180px; + box-shadow: 0 0 12px rgba(255, 50, 50, 0.8); +} + +/* ============================ + TOP BAR (Game Page) +============================ */ +.top-bar { + margin-top: 20px; + background: #1f1f1f; + width: 100%; + padding: 15px 0; + color: #00d0ff; + font-size: 18px; + box-shadow: 0 3px 15px rgba(0, 150, 255, 0.2); +} + +.top-bar a { + color: #ff5252; + margin-left: 15px; + text-decoration: none; + transition: 0.3s; +} + +.top-bar a:hover { + color: #ff7777; +} + +/* ================= POPUP GAME OVER ================= */ +#gameOverPopup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.85); + display: none; + justify-content: center; + align-items: center; + z-index: 9999; +} + +.popup-box { + background: #1e1e1e; + padding: 30px; + width: 300px; + text-align: center; + border-radius: 12px; + box-shadow: 0 0 15px rgba(0,0,0,0.5); + animation: popIn 0.25s ease-out; +} + +.popup-box h2 { + margin-bottom: 10px; +} + +.popup-box button { + width: 130px; + padding: 10px; + font-size: 16px; + border-radius: 8px; + border: none; + cursor: pointer; + margin: 5px; +} + +#btnRestart { + background: #0aa4ff; + color: white; +} + +#btnMenu { + background: #00d37e; + color: white; +} +#btnMenu:hover { + background: #00b86b; +} + +@keyframes popIn { + from { transform: scale(0.6); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} + +/* ============================ + SCORE TEXT +============================ */ +#scoreText { + font-size: 26px; + font-weight: bold; + margin-top: 10px; + color: #00eaff; + text-shadow: 0px 0px 10px rgba(0, 200, 255, 0.7); +} + +/* ============================ + ANIMATIONS +============================ */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +}