diff --git a/about.md b/about.md deleted file mode 100644 index f1542a1..0000000 --- a/about.md +++ /dev/null @@ -1 +0,0 @@ -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/assets/BG.jpg b/assets/BG.jpg new file mode 100644 index 0000000..aedd69d Binary files /dev/null and b/assets/BG.jpg differ diff --git a/assets/game.js b/assets/game.js new file mode 100644 index 0000000..e7b8cf0 --- /dev/null +++ b/assets/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/assets/sound/gameover.wav b/assets/sound/gameover.wav new file mode 100644 index 0000000..f324b3f Binary files /dev/null and b/assets/sound/gameover.wav differ diff --git a/assets/sound/move.wav b/assets/sound/move.wav new file mode 100644 index 0000000..582445e Binary files /dev/null and b/assets/sound/move.wav differ diff --git a/assets/sound/score.wav b/assets/sound/score.wav new file mode 100644 index 0000000..d8941f5 Binary files /dev/null and b/assets/sound/score.wav differ diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..d1943cf --- /dev/null +++ b/assets/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); } +} diff --git a/db.php b/db.php new file mode 100644 index 0000000..f29b89e --- /dev/null +++ b/db.php @@ -0,0 +1,12 @@ +connect_error) { + die("Koneksi gagal: " . $conn->connect_error); +} +?> diff --git a/db.sql b/db.sql new file mode 100644 index 0000000..37e7fbe --- /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/events.md b/events.md deleted file mode 100644 index 50fdfdd..0000000 --- a/events.md +++ /dev/null @@ -1,14 +0,0 @@ -## EVENTS - -## Mulai Pembuatan HarGame (menghindari blok merah) - Diskusi Dan Membuat Judul Game Pada Tanggal 12 November 2025 - -## Memulai Pembuatan Html Dan Php - - - -## Memulai Pembuatan Css - - -## memulai Pembuatan javascript - \ No newline at end of file diff --git a/game.php b/game.php new file mode 100644 index 0000000..86f7ddd --- /dev/null +++ b/game.php @@ -0,0 +1,295 @@ +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:

+ + + +
+
+ + + + + + + + + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..85d214e --- /dev/null +++ b/index.php @@ -0,0 +1,45 @@ +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 +
+ + diff --git a/logout.php b/logout.php new file mode 100644 index 0000000..fda681e --- /dev/null +++ b/logout.php @@ -0,0 +1,4 @@ + + + + + +Menu Utama + + + + + + + + +
+

Menu Utama

+

Halo,

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

Pengaturan

+ + + + + + +
+
+ + + + + + diff --git a/readme.md b/readme.md deleted file mode 100644 index 9d54230..0000000 --- a/readme.md +++ /dev/null @@ -1,7 +0,0 @@ -Kelompok 1 - -Nama Anggota: - -Haekal - ( Mengcoding css ) -Adi - (mengcoding javascript ) -Rendra & Gerrad - ( mengcoding html dan php ) \ No newline at end of file diff --git a/register.php b/register.php new file mode 100644 index 0000000..b672df5 --- /dev/null +++ b/register.php @@ -0,0 +1,43 @@ +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 +
+ + diff --git a/save_score.php b/save_score.php new file mode 100644 index 0000000..4e3c535 --- /dev/null +++ b/save_score.php @@ -0,0 +1,24 @@ +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"; +?> diff --git a/settings.php b/settings.php new file mode 100644 index 0000000..e69de29 diff --git a/skins.php b/skins.php new file mode 100644 index 0000000..201baf8 --- /dev/null +++ b/skins.php @@ -0,0 +1,134 @@ +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): ?> + + + +
+ +

+ + +
+ + + + + + + + + \ No newline at end of file