Compare commits
3 Commits
720425e3f3
...
8eb715465a
| Author | SHA1 | Date | |
|---|---|---|---|
|
8eb715465a | ||
|
|
61f14cea00 | ||
|
|
8e49077466 |
BIN
assets/BG.jpg
Normal file
BIN
assets/BG.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
65
assets/game.js
Normal file
65
assets/game.js
Normal file
@ -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();
|
||||||
BIN
assets/sound/gameover.wav
Normal file
BIN
assets/sound/gameover.wav
Normal file
Binary file not shown.
BIN
assets/sound/move.wav
Normal file
BIN
assets/sound/move.wav
Normal file
Binary file not shown.
BIN
assets/sound/score.wav
Normal file
BIN
assets/sound/score.wav
Normal file
Binary file not shown.
196
assets/style.css
Normal file
196
assets/style.css
Normal file
@ -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); }
|
||||||
|
}
|
||||||
39
db.php
39
db.php
@ -1,12 +1,27 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
$host = "localhost";
|
<?php
|
||||||
$user = "root";
|
$host = "localhost";
|
||||||
$pass = "";
|
$user = "root";
|
||||||
$db = "dodge_game";
|
$pass = "";
|
||||||
|
$db = "dodge_game";
|
||||||
$conn = new mysqli($host, $user, $pass, $db);
|
|
||||||
|
$conn = new mysqli($host, $user, $pass, $db);
|
||||||
if ($conn->connect_error) {
|
|
||||||
die("Koneksi gagal: " . $conn->connect_error);
|
if ($conn->connect_error) {
|
||||||
}
|
die("Koneksi gagal: " . $conn->connect_error);
|
||||||
?>
|
}
|
||||||
|
?>
|
||||||
|
=======
|
||||||
|
<?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);
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
|
|||||||
27
db.sql
27
db.sql
@ -1,8 +1,19 @@
|
|||||||
|
<<<<<<< HEAD
|
||||||
USE dodge_game;
|
|
||||||
|
USE dodge_game;
|
||||||
CREATE TABLE users (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
CREATE TABLE users (
|
||||||
username VARCHAR(50) UNIQUE,
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
password VARCHAR(255)
|
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
|
||||||
|
|||||||
909
game.php
909
game.php
@ -1,295 +1,614 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
session_start();
|
<?php
|
||||||
if (!isset($_SESSION['user'])) {
|
session_start();
|
||||||
header("Location: index.php");
|
if (!isset($_SESSION['user'])) {
|
||||||
exit;
|
header("Location: index.php");
|
||||||
}
|
exit;
|
||||||
|
}
|
||||||
$username = $_SESSION['user'];
|
$username = $_SESSION['user'];
|
||||||
|
// koneksi db
|
||||||
// koneksi db
|
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
||||||
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
// Ambil skin user dari database
|
||||||
// Ambil skin user dari database
|
$q = $conn->query("SELECT skin FROM users WHERE username='$username'");
|
||||||
$q = $conn->query("SELECT skin FROM users WHERE username='$username'");
|
$skinColor = $q->fetch_assoc()["skin"];
|
||||||
$skinColor = $q->fetch_assoc()["skin"];
|
// Daftar warna skin
|
||||||
|
$skinList = [
|
||||||
// Daftar warna skin
|
"cyan" => "#00ffff",
|
||||||
$skinList = [
|
"blue" => "#0066ff",
|
||||||
"cyan" => "#00ffff",
|
"yellow" => "#ffee00",
|
||||||
"blue" => "#0066ff",
|
"purple" => "#ff55ff",
|
||||||
"yellow" => "#ffee00",
|
"green" => "#33ff55"
|
||||||
"purple" => "#ff55ff",
|
];
|
||||||
"green" => "#33ff55"
|
// Warna player yang dipakai
|
||||||
];
|
$playerColor = $skinList[$skinColor];
|
||||||
|
?>
|
||||||
// Warna player yang dipakai
|
<!DOCTYPE html>
|
||||||
$playerColor = $skinList[$skinColor];
|
<html>
|
||||||
|
<head>
|
||||||
?>
|
<title>Hindari Block Multi</title>
|
||||||
|
<style>
|
||||||
<!DOCTYPE html>
|
body {
|
||||||
<html>
|
font-family: Arial;
|
||||||
<head>
|
background: url('assets/bg.jpg') no-repeat center center fixed;
|
||||||
<title>Hindari Block</title>
|
background-size: cover;
|
||||||
<style>
|
color: white;
|
||||||
body {
|
margin: 0;
|
||||||
font-family: Arial;
|
display: flex;
|
||||||
background: url('assets/bg.jpg') no-repeat center center fixed;
|
}
|
||||||
background-size: cover;
|
#gameWrapper {
|
||||||
color: white;
|
width: 75%;
|
||||||
margin: 0;
|
padding: 20px;
|
||||||
display: flex;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
#gameArea {
|
||||||
#gameWrapper {
|
width: 400px;
|
||||||
width: 75%;
|
height: 500px;
|
||||||
padding: 20px;
|
background: #222;
|
||||||
text-align: center;
|
margin: 0 auto;
|
||||||
}
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
#gameArea {
|
border-radius: 10px;
|
||||||
width: 400px;
|
box-shadow: 0 0 10px #000;
|
||||||
height: 500px;
|
}
|
||||||
background: #222;
|
#player {
|
||||||
margin: 0 auto;
|
width: 40px;
|
||||||
position: relative;
|
height: 40px;
|
||||||
overflow: hidden;
|
background: <?= $playerColor ?>;
|
||||||
border-radius: 10px;
|
position: absolute;
|
||||||
box-shadow: 0 0 10px #000;
|
bottom: 10px;
|
||||||
}
|
left: 180px;
|
||||||
|
border-radius: 8px;
|
||||||
#player {
|
}
|
||||||
width: 40px;
|
.block {
|
||||||
height: 40px;
|
width: 40px;
|
||||||
background: <?= $playerColor ?>;
|
height: 40px;
|
||||||
position: absolute;
|
background: red;
|
||||||
bottom: 10px;
|
position: absolute;
|
||||||
left: 180px;
|
border-radius: 8px;
|
||||||
border-radius: 8px;
|
}
|
||||||
}
|
#leaderboard {
|
||||||
|
width: 25%;
|
||||||
|
padding: 20px;
|
||||||
#block {
|
background: #111;
|
||||||
width: 40px;
|
border-left: 2px solid #333;
|
||||||
height: 40px;
|
height: 100vh;
|
||||||
background: red;
|
}
|
||||||
position: absolute;
|
table {
|
||||||
top: -40px;
|
width: 100%;
|
||||||
left: 180px;
|
border-collapse: collapse;
|
||||||
border-radius: 8px;
|
}
|
||||||
}
|
th, td {
|
||||||
|
padding: 8px;
|
||||||
#leaderboard {
|
border-bottom: 1px solid #333;
|
||||||
width: 25%;
|
}
|
||||||
padding: 20px;
|
/* ===== POPUP GAME OVER ===== */
|
||||||
background: #111;
|
#gameOverPopup {
|
||||||
border-left: 2px solid #333;
|
display: none;
|
||||||
height: 100vh;
|
position: fixed;
|
||||||
}
|
top: 0;
|
||||||
|
left: 0;
|
||||||
table {
|
width: 100%;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
border-collapse: collapse;
|
background: rgba(0,0,0,0.7);
|
||||||
}
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
th, td {
|
}
|
||||||
padding: 8px;
|
.popup-box {
|
||||||
border-bottom: 1px solid #333;
|
background: #222;
|
||||||
}
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
/* ===== POPUP GAME OVER ===== */
|
text-align: center;
|
||||||
#gameOverPopup {
|
width: 300px;
|
||||||
display: none;
|
box-shadow: 0 0 10px #000;
|
||||||
position: fixed;
|
}
|
||||||
top: 0;
|
.popup-box button {
|
||||||
left: 0;
|
margin-top: 15px;
|
||||||
width: 100%;
|
padding: 10px;
|
||||||
height: 100%;
|
width: 120px;
|
||||||
background: rgba(0,0,0,0.7);
|
border: none;
|
||||||
justify-content: center;
|
cursor: pointer;
|
||||||
align-items: center;
|
font-size: 16px;
|
||||||
}
|
border-radius: 6px;
|
||||||
|
background: #00d37e;
|
||||||
.popup-box {
|
}
|
||||||
background: #222;
|
</style>
|
||||||
padding: 25px;
|
</head>
|
||||||
border-radius: 10px;
|
<body>
|
||||||
text-align: center;
|
<div id="gameWrapper">
|
||||||
width: 300px;
|
<h1>Hindari Block Multi</h1>
|
||||||
box-shadow: 0 0 10px #000;
|
<p>Player: <b><?= $username ?></b></p>
|
||||||
}
|
<div class="score-box">Score: <span id="score">0</span></div>
|
||||||
|
<div id="gameArea">
|
||||||
.popup-box button {
|
<div id="player"></div>
|
||||||
margin-top: 15px;
|
</div>
|
||||||
padding: 10px;
|
<p>Credits: Haekal Adi Rendra & Gerrad</p>
|
||||||
width: 120px;
|
</div>
|
||||||
border: none;
|
<div id="leaderboard">
|
||||||
cursor: pointer;
|
<h2>Leaderboard</h2>
|
||||||
font-size: 16px;
|
<table>
|
||||||
border-radius: 6px;
|
<tr>
|
||||||
}
|
<th>User</th>
|
||||||
|
<th>Score</th>
|
||||||
#btnRestart {
|
</tr>
|
||||||
background: #00d37e;
|
<?php
|
||||||
}
|
$result = $conn->query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20");
|
||||||
|
while ($row = $result->fetch_assoc()) {
|
||||||
#btnLmenu {
|
echo "<tr><td>{$row['username']}</td><td>{$row['score']}</td></tr>";
|
||||||
background: #00d37e;
|
}
|
||||||
}
|
?>
|
||||||
</style>
|
</table>
|
||||||
</head>
|
</div>
|
||||||
|
|
||||||
<body>
|
<!-- ========= POPUP GAME OVER ========= -->
|
||||||
|
<div id="gameOverPopup">
|
||||||
<div id="gameWrapper">
|
<div class="popup-box">
|
||||||
<h1>Hindari Block</h1>
|
<h2>Game Over</h2>
|
||||||
<p>Player: <b><?= $username ?></b></p>
|
<p>Score Kamu: <span id="finalScore"></span></p>
|
||||||
<div class="score-box">Score: <span id="score">0</span></div>
|
<button id="btnRestart">New Game</button>
|
||||||
|
<button id="btnmenu">Menu</button>
|
||||||
<div id="gameArea">
|
</div>
|
||||||
<div id="player"></div>
|
</div>
|
||||||
<div id="block"></div>
|
|
||||||
</div>
|
<audio id="soundMove" src="assets/sound/move.wav"></audio>
|
||||||
<p>Credits: Haekal Adi Rendra & Gerrad</p>
|
<audio id="soundScore" src="assets/sound/score.wav"></audio>
|
||||||
</div>
|
<audio id="soundGameOver" src="assets/sound/gameover.wav"></audio>
|
||||||
|
|
||||||
<div id="leaderboard">
|
<script>
|
||||||
<h2>Leaderboard</h2>
|
let currentUser = "<?= $username ?>";
|
||||||
<table>
|
|
||||||
<tr>
|
// ========= AUDIO =========
|
||||||
<th>User</th>
|
const soundMove = document.getElementById("soundMove");
|
||||||
<th>Score</th>
|
const soundScore = document.getElementById("soundScore");
|
||||||
</tr>
|
const soundGameOver = document.getElementById("soundGameOver");
|
||||||
|
|
||||||
<?php
|
// ========= GAME VARIABLES =========
|
||||||
$result = $conn->query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20");
|
const player = document.getElementById("player");
|
||||||
while ($row = $result->fetch_assoc()) {
|
const gameArea = document.getElementById("gameArea");
|
||||||
echo "<tr><td>{$row['username']}</td><td>{$row['score']}</td></tr>";
|
let score = 0;
|
||||||
}
|
let gameRunning = true;
|
||||||
?>
|
let blockSpeed = 2;
|
||||||
</table>
|
const maxBlockSpeed = 14;
|
||||||
</div>
|
let blocks = [];
|
||||||
|
|
||||||
<!-- ========= POPUP GAME OVER ========= -->
|
// ========= CREATE MULTIPLE BLOCKS AT ONCE =========
|
||||||
<div id="gameOverPopup">
|
function spawnBlocks() {
|
||||||
<div class="popup-box">
|
if (!gameRunning) return;
|
||||||
<h2>Game Over</h2>
|
|
||||||
<p>Score Kamu: <span id="finalScore"></span></p>
|
// Tentukan jumlah block yang akan muncul (1–3)
|
||||||
|
let blockCount = 1;
|
||||||
<button id="btnRestart">New Game</button>
|
if (score >= 300) blockCount = Math.floor(Math.random() * 2) + 2; // 2–3
|
||||||
<button id="btnmenu">Menu</button>
|
else if (score >= 150) blockCount = Math.floor(Math.random() * 2) + 1; // 1–2
|
||||||
</div>
|
else if (score >= 50) blockCount = Math.random() < 0.3 ? 2 : 1; // 30% chance 2 block
|
||||||
</div>
|
// score < 50 → selalu 1
|
||||||
<audio id="soundMove" src="assets/sound/move.wav"></audio>
|
|
||||||
<audio id="soundScore" src="assets/sound/score.wav"></audio>
|
const usedPositions = []; // agar tidak tumpang tindih
|
||||||
<audio id="soundGameOver" src="assets/sound/gameover.wav"></audio>
|
|
||||||
|
for (let i = 0; i < blockCount; i++) {
|
||||||
<script>
|
let leftPos;
|
||||||
let currentUser = "<?= $username ?>";
|
let attempts = 0;
|
||||||
</script>
|
do {
|
||||||
|
leftPos = Math.floor(Math.random() * 10) * 40; // grid: 0,40,80,...,360
|
||||||
<script>
|
attempts++;
|
||||||
// ========= GAME SCRIPT ==========
|
} while (usedPositions.includes(leftPos) && attempts < 20);
|
||||||
const player = document.getElementById("player");
|
|
||||||
const block = document.getElementById("block");
|
if (attempts >= 20) continue; // skip jika terlalu sulit cari posisi
|
||||||
let score = 0;
|
|
||||||
let gameRunning = true;
|
usedPositions.push(leftPos);
|
||||||
|
|
||||||
document.addEventListener("keydown", e => {
|
let newBlock = document.createElement("div");
|
||||||
if (!gameRunning) return;
|
newBlock.classList.add("block");
|
||||||
|
newBlock.style.top = "-60px";
|
||||||
let left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
|
newBlock.style.left = leftPos + "px";
|
||||||
|
gameArea.appendChild(newBlock);
|
||||||
if (e.key === "ArrowLeft" && left > 0) {
|
blocks.push(newBlock);
|
||||||
player.style.left = (left - 20) + "px";
|
}
|
||||||
soundMove.currentTime = 0;
|
}
|
||||||
soundMove.play();
|
|
||||||
}
|
// ========= PLAYER MOVEMENT (grid 40px) =========
|
||||||
|
document.addEventListener("keydown", e => {
|
||||||
if (e.key === "ArrowRight" && left < 360) {
|
if (!gameRunning) return;
|
||||||
player.style.left = (left + 20) + "px";
|
let left = parseInt(player.style.left) || 180;
|
||||||
soundMove.currentTime = 0;
|
|
||||||
soundMove.play();
|
if (e.key === "ArrowLeft" && left > 0) {
|
||||||
}
|
player.style.left = (left - 40) + "px";
|
||||||
});
|
soundMove.currentTime = 0;
|
||||||
|
soundMove.play();
|
||||||
|
}
|
||||||
let blockSpeed = 5; // kecepatan awal block
|
if (e.key === "ArrowRight" && left < 360) {
|
||||||
|
player.style.left = (left + 40) + "px";
|
||||||
function fall() {
|
soundMove.currentTime = 0;
|
||||||
if (!gameRunning) return;
|
soundMove.play();
|
||||||
|
}
|
||||||
let blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top"));
|
});
|
||||||
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
|
|
||||||
let playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
|
// ========= UPDATE SPEED =========
|
||||||
|
function updateBlockSpeed() {
|
||||||
// TABRAKAN
|
blockSpeed = 2 + Math.floor(score / 18);
|
||||||
if (blockTop > 450 && Math.abs(blockLeft - playerLeft) < 40) {
|
if (blockSpeed > maxBlockSpeed) blockSpeed = maxBlockSpeed;
|
||||||
gameRunning = false;
|
}
|
||||||
soundGameOver.play();
|
|
||||||
saveScore(score);
|
// ========= SPAWN INTERVAL (dinamis) =========
|
||||||
showGameOver(score);
|
let spawnDelay = 1400;
|
||||||
return;
|
|
||||||
}
|
function startSpawner() {
|
||||||
|
spawnBlocks(); // spawn pertama
|
||||||
// Jika block sudah jatuh ke bawah
|
setInterval(() => {
|
||||||
if (blockTop > 500) {
|
if (gameRunning) {
|
||||||
block.style.top = "-40px";
|
spawnBlocks();
|
||||||
block.style.left = Math.floor(Math.random() * 360) + "px";
|
|
||||||
score++;
|
// Percepat spawn sesuai score
|
||||||
document.getElementById("score").innerText = score;
|
if (score >= 400) spawnDelay = 400;
|
||||||
|
else if (score >= 300) spawnDelay = 500;
|
||||||
// ======== TINGKATKAN KECEPATAN BLOCK BERDASARKAN SCORE ========
|
else if (score >= 200) spawnDelay = 600;
|
||||||
if (score === 15) blockSpeed = 7;
|
else if (score >= 100) spawnDelay = 800;
|
||||||
if (score === 25) blockSpeed = 8;
|
else if (score >= 50) spawnDelay = 1000;
|
||||||
if (score === 35) blockSpeed = 10;
|
}
|
||||||
if (score === 45) blockSpeed = 12;
|
}, spawnDelay);
|
||||||
if (score === 60) blockSpeed = 14;
|
}
|
||||||
if (score === 80) blockSpeed = 16;
|
|
||||||
if (score === 100) blockSpeed = 18;
|
startSpawner();
|
||||||
|
|
||||||
soundScore.currentTime = 0;
|
// Spawn tambahan di awal agar langsung ramai
|
||||||
soundScore.play();
|
setTimeout(() => spawnBlocks(), 800);
|
||||||
} else {
|
setTimeout(() => spawnBlocks(), 1600);
|
||||||
block.style.top = (blockTop + blockSpeed) + "px";
|
|
||||||
}
|
// ========= GAME LOOP =========
|
||||||
|
function fall() {
|
||||||
requestAnimationFrame(fall);
|
if (!gameRunning) return;
|
||||||
}
|
|
||||||
fall();
|
const playerLeft = parseInt(player.style.left) || 180;
|
||||||
|
|
||||||
|
blocks = blocks.filter(block => {
|
||||||
|
let top = parseInt(block.style.top || -60);
|
||||||
// ================== SIMPAN SKOR KE SERVER ==================
|
let left = parseInt(block.style.left);
|
||||||
function saveScore(finalScore) {
|
|
||||||
fetch("save_score.php", {
|
top += blockSpeed;
|
||||||
method: "POST",
|
block.style.top = top + "px";
|
||||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
||||||
body: "username=" + currentUser + "&score=" + finalScore
|
// Collision
|
||||||
});
|
if (top >= 450 && top <= 490 && Math.abs(left - playerLeft) < 40) {
|
||||||
}
|
gameRunning = false;
|
||||||
|
soundGameOver.play();
|
||||||
|
saveScore(score);
|
||||||
// ================== POPUP GAME OVER ==================
|
showGameOver(score);
|
||||||
const popup = document.getElementById("gameOverPopup");
|
return false;
|
||||||
const finalScoreText = document.getElementById("finalScore");
|
}
|
||||||
const btnRestart = document.getElementById("btnRestart");
|
|
||||||
const btnmenu = document.getElementById("btnmenu");
|
// Lolos bawah
|
||||||
|
if (top > 550) {
|
||||||
function showGameOver(finalScore) {
|
score += 10;
|
||||||
finalScoreText.textContent = finalScore;
|
document.getElementById("score").innerText = score;
|
||||||
popup.style.display = "flex";
|
updateBlockSpeed();
|
||||||
}
|
soundScore.currentTime = 0;
|
||||||
|
soundScore.play();
|
||||||
btnRestart.onclick = () => {
|
block.remove();
|
||||||
window.location.reload();
|
return false;
|
||||||
};
|
}
|
||||||
|
|
||||||
btnmenu.onclick = () => {
|
return true;
|
||||||
window.location.href = "menu.php";
|
});
|
||||||
};
|
|
||||||
|
requestAnimationFrame(fall);
|
||||||
</script>
|
}
|
||||||
|
fall();
|
||||||
</body>
|
|
||||||
</html>
|
// ========= SAVE SCORE =========
|
||||||
|
function saveScore(finalScore) {
|
||||||
|
fetch("save_score.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||||
|
body: "username=" + encodeURIComponent(currentUser) + "&score=" + finalScore
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========= GAME OVER POPUP =========
|
||||||
|
const popup = document.getElementById("gameOverPopup");
|
||||||
|
const finalScoreText = document.getElementById("finalScore");
|
||||||
|
|
||||||
|
document.getElementById("btnRestart").onclick = () => location.reload();
|
||||||
|
document.getElementById("btnmenu").onclick = () => location.href = "menu.php";
|
||||||
|
|
||||||
|
function showGameOver(finalScore) {
|
||||||
|
finalScoreText.textContent = finalScore;
|
||||||
|
popup.style.display = "flex";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
=======
|
||||||
|
<?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>
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
|
|||||||
138
index.php
138
index.php
@ -1,45 +1,93 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
session_start();
|
<?php
|
||||||
require 'db.php';
|
session_start();
|
||||||
|
require 'db.php';
|
||||||
$message = "";
|
|
||||||
|
$message = "";
|
||||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
||||||
$username = $_POST['username'];
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
$password = $_POST['password'];
|
$username = $_POST['username'];
|
||||||
|
$password = $_POST['password'];
|
||||||
$query = $conn->query("SELECT * FROM users WHERE username='$username'");
|
|
||||||
|
$query = $conn->query("SELECT * FROM users WHERE username='$username'");
|
||||||
if ($query->num_rows > 0) {
|
|
||||||
$row = $query->fetch_assoc();
|
if ($query->num_rows > 0) {
|
||||||
if (password_verify($password, $row['password'])) {
|
$row = $query->fetch_assoc();
|
||||||
$_SESSION['user'] = $row['username'];
|
if (password_verify($password, $row['password'])) {
|
||||||
header("Location: menu.php"); // ⬅ KE MENU BUKAN GAME
|
$_SESSION['user'] = $row['username'];
|
||||||
exit;
|
header("Location: menu.php"); // ⬅ KE MENU BUKAN GAME
|
||||||
} else {
|
exit;
|
||||||
$message = "Password salah!";
|
} else {
|
||||||
}
|
$message = "Password salah!";
|
||||||
} else {
|
}
|
||||||
$message = "Username tidak ditemukan!";
|
} else {
|
||||||
}
|
$message = "Username tidak ditemukan!";
|
||||||
}
|
}
|
||||||
?>
|
}
|
||||||
<!DOCTYPE html>
|
?>
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html>
|
||||||
<title>Login</title>
|
<head>
|
||||||
<link rel="stylesheet" href="assets/style.css">
|
<title>Login</title>
|
||||||
</head>
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
<body>
|
</head>
|
||||||
<div class="box">
|
<body>
|
||||||
<h2>Login</h2>
|
<div class="box">
|
||||||
<form method="POST">
|
<h2>Login</h2>
|
||||||
<input type="text" name="username" placeholder="Username" required><br>
|
<form method="POST">
|
||||||
<input type="password" name="password" placeholder="Password" required><br>
|
<input type="text" name="username" placeholder="Username" required><br>
|
||||||
<button type="submit">Masuk</button>
|
<input type="password" name="password" placeholder="Password" required><br>
|
||||||
</form>
|
<button type="submit">Masuk</button>
|
||||||
<p><?= $message ?></p>
|
</form>
|
||||||
<a href="register.php">Register</a>
|
<p><?= $message ?></p>
|
||||||
</div>
|
<a href="register.php">Register</a>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</body>
|
||||||
|
</html>
|
||||||
|
=======
|
||||||
|
<?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>
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
|
|||||||
15
logout.php
15
logout.php
@ -1,4 +1,11 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
session_start();
|
<?php
|
||||||
session_destroy();
|
session_start();
|
||||||
header("Location: index.php");
|
session_destroy();
|
||||||
|
header("Location: index.php");
|
||||||
|
=======
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
session_destroy();
|
||||||
|
header("Location: index.php");
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
|
|||||||
294
menu.php
294
menu.php
@ -1,97 +1,197 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
session_start();
|
<?php
|
||||||
if (!isset($_SESSION['user'])) {
|
session_start();
|
||||||
header("Location: index.php");
|
if (!isset($_SESSION['user'])) {
|
||||||
exit;
|
header("Location: index.php");
|
||||||
}
|
exit;
|
||||||
?>
|
}
|
||||||
|
?>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html>
|
||||||
<title>Menu Utama</title>
|
<head>
|
||||||
<link rel="stylesheet" href="assets/style.css">
|
<title>Menu Utama</title>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
<style>
|
|
||||||
/* Popup background */
|
<style>
|
||||||
#settingsPopup {
|
/* Popup background */
|
||||||
display: none;
|
#settingsPopup {
|
||||||
position: fixed;
|
display: none;
|
||||||
top: 0;
|
position: fixed;
|
||||||
left: 0;
|
top: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
background: rgba(0,0,0,0.7);
|
height: 100%;
|
||||||
justify-content: center;
|
background: rgba(0,0,0,0.7);
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
|
}
|
||||||
/* Popup box */
|
|
||||||
.popup-box {
|
/* Popup box */
|
||||||
background: #1e1e1e;
|
.popup-box {
|
||||||
width: 350px;
|
background: #1e1e1e;
|
||||||
padding: 20px;
|
width: 350px;
|
||||||
border-radius: 12px;
|
padding: 20px;
|
||||||
text-align: center;
|
border-radius: 12px;
|
||||||
color: white;
|
text-align: center;
|
||||||
box-shadow: 0 0 20px black;
|
color: white;
|
||||||
}
|
box-shadow: 0 0 20px black;
|
||||||
|
}
|
||||||
.popup-option {
|
|
||||||
width: 100%;
|
.popup-option {
|
||||||
padding: 12px;
|
width: 100%;
|
||||||
margin-top: 8px;
|
padding: 12px;
|
||||||
border: none;
|
margin-top: 8px;
|
||||||
border-radius: 8px;
|
border: none;
|
||||||
font-size: 15px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
font-size: 15px;
|
||||||
}
|
cursor: pointer;
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
</head>
|
|
||||||
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<div class="box" style="width: 350px;">
|
|
||||||
<h2>Menu Utama</h2>
|
<div class="box" style="width: 350px;">
|
||||||
<p>Halo, <b><?= $_SESSION['user'] ?></b></p>
|
<h2>Menu Utama</h2>
|
||||||
|
<p>Halo, <b><?= $_SESSION['user'] ?></b></p>
|
||||||
<a href="game.php">
|
|
||||||
<button style="width: 100%;">Mulai Game</button>
|
<a href="game.php">
|
||||||
</a>
|
<button style="width: 100%;">Mulai Game</button>
|
||||||
|
</a>
|
||||||
<!-- Tombol Settings membuka popup -->
|
|
||||||
<button onclick="openSettings()" style="width: 100%; background:#00d37e;">Pengaturan</button>
|
<!-- Tombol Settings membuka popup -->
|
||||||
|
<button onclick="openSettings()" style="width: 100%; background:#00d37e;">Pengaturan</button>
|
||||||
<a href="logout.php">
|
|
||||||
<button style="width: 100%; background: #ff4d4d;">Keluar</button>
|
<a href="logout.php">
|
||||||
</a>
|
<button style="width: 100%; background: #ff4d4d;">Keluar</button>
|
||||||
</div>
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ================= SETTINGS POPUP ================== -->
|
|
||||||
<div id="settingsPopup">
|
<!-- ================= SETTINGS POPUP ================== -->
|
||||||
<div class="popup-box">
|
<div id="settingsPopup">
|
||||||
<h2>Pengaturan</h2>
|
<div class="popup-box">
|
||||||
|
<h2>Pengaturan</h2>
|
||||||
<a href="skins.php">
|
|
||||||
<button class="popup-option" style="background:#ffaa00;">Pilih Skin</button>
|
<a href="skins.php">
|
||||||
</a>
|
<button class="popup-option" style="background:#ffaa00;">Pilih Skin</button>
|
||||||
|
</a>
|
||||||
<button class="popup-option" onclick="closeSettings()" style="background:#555;">Kembali</button>
|
|
||||||
</div>
|
<button class="popup-option" onclick="closeSettings()" style="background:#555;">Kembali</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
function openSettings() {
|
<script>
|
||||||
document.getElementById("settingsPopup").style.display = "flex";
|
function openSettings() {
|
||||||
}
|
document.getElementById("settingsPopup").style.display = "flex";
|
||||||
|
}
|
||||||
function closeSettings() {
|
|
||||||
document.getElementById("settingsPopup").style.display = "none";
|
function closeSettings() {
|
||||||
}
|
document.getElementById("settingsPopup").style.display = "none";
|
||||||
</script>
|
}
|
||||||
|
</script>
|
||||||
</body>
|
|
||||||
</html>
|
</body>
|
||||||
|
</html>
|
||||||
|
=======
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
if (!isset($_SESSION['user'])) {
|
||||||
|
header("Location: index.php");
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Menu Utama</title>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Popup background */
|
||||||
|
#settingsPopup {
|
||||||
|
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 */
|
||||||
|
.popup-box {
|
||||||
|
background: #1e1e1e;
|
||||||
|
width: 350px;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 0 20px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
margin-top: 8px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="box" style="width: 350px;">
|
||||||
|
<h2>Menu Utama</h2>
|
||||||
|
<p>Halo, <b><?= $_SESSION['user'] ?></b></p>
|
||||||
|
|
||||||
|
<a href="game.php">
|
||||||
|
<button style="width: 100%;">Mulai Game</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Tombol Settings membuka popup -->
|
||||||
|
<button onclick="openSettings()" style="width: 100%; background:#00d37e;">Pengaturan</button>
|
||||||
|
|
||||||
|
<a href="logout.php">
|
||||||
|
<button style="width: 100%; background: #ff4d4d;">Keluar</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ================= SETTINGS POPUP ================== -->
|
||||||
|
<div id="settingsPopup">
|
||||||
|
<div class="popup-box">
|
||||||
|
<h2>Pengaturan</h2>
|
||||||
|
|
||||||
|
<a href="skins.php">
|
||||||
|
<button class="popup-option" style="background:#ffaa00;">Pilih Skin</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button class="popup-option" onclick="closeSettings()" style="background:#555;">Kembali</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openSettings() {
|
||||||
|
document.getElementById("settingsPopup").style.display = "flex";
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeSettings() {
|
||||||
|
document.getElementById("settingsPopup").style.display = "none";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
Kelompok 1
|
|
||||||
|
|
||||||
Nama Anggota:
|
|
||||||
|
|
||||||
Haekal - ( Mengcoding css )
|
|
||||||
Adi - (mengcoding javascript )
|
|
||||||
Rendra & Gerrad - ( mengcoding html dan php )
|
|
||||||
132
register.php
132
register.php
@ -1,43 +1,89 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
require 'db.php';
|
<?php
|
||||||
|
require 'db.php';
|
||||||
$message = "";
|
|
||||||
|
$message = "";
|
||||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
||||||
$username = $_POST['username'];
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
|
$username = $_POST['username'];
|
||||||
|
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
|
||||||
$check = $conn->query("SELECT * FROM users WHERE username='$username'");
|
|
||||||
if ($check->num_rows > 0) {
|
$check = $conn->query("SELECT * FROM users WHERE username='$username'");
|
||||||
$message = "Username sudah digunakan!";
|
if ($check->num_rows > 0) {
|
||||||
} else {
|
$message = "Username sudah digunakan!";
|
||||||
$sql = "INSERT INTO users(username, password) VALUES('$username', '$password')";
|
} else {
|
||||||
if ($conn->query($sql)) {
|
$sql = "INSERT INTO users(username, password) VALUES('$username', '$password')";
|
||||||
header("Location: index.php");
|
if ($conn->query($sql)) {
|
||||||
exit;
|
header("Location: index.php");
|
||||||
} else {
|
exit;
|
||||||
$message = "Gagal registrasi!";
|
} else {
|
||||||
}
|
$message = "Gagal registrasi!";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
}
|
||||||
|
?>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html>
|
||||||
<title>Register</title>
|
<head>
|
||||||
<link rel="stylesheet" href="assets/style.css">
|
<title>Register</title>
|
||||||
</head>
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
<body>
|
</head>
|
||||||
<div class="box">
|
<body>
|
||||||
<h2>Register</h2>
|
<div class="box">
|
||||||
<form method="POST">
|
<h2>Register</h2>
|
||||||
<input type="text" name="username" placeholder="Username" required><br>
|
<form method="POST">
|
||||||
<input type="password" name="password" placeholder="Password" required><br>
|
<input type="text" name="username" placeholder="Username" required><br>
|
||||||
<button type="submit">Daftar</button>
|
<input type="password" name="password" placeholder="Password" required><br>
|
||||||
</form>
|
<button type="submit">Daftar</button>
|
||||||
<p><?= $message ?></p>
|
</form>
|
||||||
<a href="index.php">Login</a>
|
<p><?= $message ?></p>
|
||||||
</div>
|
<a href="index.php">Login</a>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</body>
|
||||||
|
</html>
|
||||||
|
=======
|
||||||
|
<?php
|
||||||
|
require 'db.php';
|
||||||
|
|
||||||
|
$message = "";
|
||||||
|
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
|
$username = $_POST['username'];
|
||||||
|
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
|
||||||
|
|
||||||
|
$check = $conn->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!";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Register</title>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<h2>Register</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">Daftar</button>
|
||||||
|
</form>
|
||||||
|
<p><?= $message ?></p>
|
||||||
|
<a href="index.php">Login</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
|
|||||||
@ -1,24 +1,51 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
session_start();
|
<?php
|
||||||
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
session_start();
|
||||||
|
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
||||||
if ($conn->connect_error) {
|
|
||||||
die("DB Error: " . $conn->connect_error);
|
if ($conn->connect_error) {
|
||||||
}
|
die("DB Error: " . $conn->connect_error);
|
||||||
|
}
|
||||||
$username = $_POST['username'];
|
|
||||||
$score = intval($_POST['score']);
|
$username = $_POST['username'];
|
||||||
|
$score = intval($_POST['score']);
|
||||||
// cek jika user sudah punya skor sebelumnya
|
|
||||||
$check = $conn->query("SELECT * FROM leaderboard WHERE username='$username'");
|
// 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
|
if ($check->num_rows > 0) {
|
||||||
$conn->query("UPDATE leaderboard SET score=GREATEST(score, $score) WHERE username='$username'");
|
// update jika score baru lebih tinggi
|
||||||
} else {
|
$conn->query("UPDATE leaderboard SET score=GREATEST(score, $score) WHERE username='$username'");
|
||||||
// insert jika belum ada
|
} else {
|
||||||
$conn->query("INSERT INTO leaderboard (username, score) VALUES ('$username', $score)");
|
// insert jika belum ada
|
||||||
}
|
$conn->query("INSERT INTO leaderboard (username, score) VALUES ('$username', $score)");
|
||||||
|
}
|
||||||
echo "OK";
|
|
||||||
?>
|
echo "OK";
|
||||||
|
?>
|
||||||
|
=======
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
||||||
|
|
||||||
|
if ($conn->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
|
||||||
|
|||||||
BIN
settings.php
BIN
settings.php
Binary file not shown.
402
skins.php
402
skins.php
@ -1,134 +1,270 @@
|
|||||||
<?php
|
<<<<<<< HEAD
|
||||||
session_start();
|
<?php
|
||||||
if (!isset($_SESSION['user'])) {
|
session_start();
|
||||||
header("Location: index.php");
|
if (!isset($_SESSION['user'])) {
|
||||||
exit;
|
header("Location: index.php");
|
||||||
}
|
exit;
|
||||||
|
}
|
||||||
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
|
||||||
$user = $_SESSION['user'];
|
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
||||||
|
$user = $_SESSION['user'];
|
||||||
// AMBIL SKIN USER SEKARANG
|
|
||||||
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
|
// AMBIL SKIN USER SEKARANG
|
||||||
$currentSkin = $qSkin->fetch_assoc()['skin'];
|
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
|
||||||
|
$currentSkin = $qSkin->fetch_assoc()['skin'];
|
||||||
// LIST SKIN
|
|
||||||
$skins = [
|
// LIST SKIN
|
||||||
"cyan" => "#00ffff",
|
$skins = [
|
||||||
"blue" => "#0066ff",
|
"cyan" => "#00ffff",
|
||||||
"yellow" => "#ffee00",
|
"blue" => "#0066ff",
|
||||||
"purple" => "#ff55ff",
|
"yellow" => "#ffee00",
|
||||||
"green" => "#33ff55"
|
"purple" => "#ff55ff",
|
||||||
];
|
"green" => "#33ff55"
|
||||||
|
];
|
||||||
// AMBIL SKIN USER
|
|
||||||
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
|
// AMBIL SKIN USER
|
||||||
$data = $qSkin->fetch_assoc();
|
$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
|
||||||
|
$data = $qSkin->fetch_assoc();
|
||||||
// PROSES SIMPAN SKIN
|
|
||||||
if (isset($_POST['chooseSkin'])) {
|
// PROSES SIMPAN SKIN
|
||||||
$selectedSkin = $_POST['skin'];
|
if (isset($_POST['chooseSkin'])) {
|
||||||
$conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'");
|
$selectedSkin = $_POST['skin'];
|
||||||
$currentSkin = $selectedSkin;
|
$conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'");
|
||||||
}
|
$currentSkin = $selectedSkin;
|
||||||
?>
|
}
|
||||||
|
?>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html>
|
||||||
<title>Pilih Skin</title>
|
<head>
|
||||||
<link rel="stylesheet" href="assets/style.css">
|
<title>Pilih Skin</title>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
<style>
|
|
||||||
body {
|
<style>
|
||||||
text-align: center;
|
body {
|
||||||
padding-top: 40px;
|
text-align: center;
|
||||||
color: white;
|
padding-top: 40px;
|
||||||
}
|
color: white;
|
||||||
|
}
|
||||||
.skin-container {
|
|
||||||
margin-top: 20px;
|
.skin-container {
|
||||||
}
|
margin-top: 20px;
|
||||||
|
}
|
||||||
.skin-box {
|
|
||||||
width: 90px;
|
.skin-box {
|
||||||
height: 90px;
|
width: 90px;
|
||||||
border-radius: 12px;
|
height: 90px;
|
||||||
display: inline-block;
|
border-radius: 12px;
|
||||||
margin: 12px;
|
display: inline-block;
|
||||||
cursor: pointer;
|
margin: 12px;
|
||||||
transition: 0.2s;
|
cursor: pointer;
|
||||||
border: 4px solid transparent;
|
transition: 0.2s;
|
||||||
}
|
border: 4px solid transparent;
|
||||||
|
}
|
||||||
.skin-box:hover {
|
|
||||||
transform: scale(1.1);
|
.skin-box:hover {
|
||||||
}
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
.skin-selected {
|
|
||||||
border: 4px solid #fff;
|
.skin-selected {
|
||||||
box-shadow: 0 0 15px white;
|
border: 4px solid #fff;
|
||||||
}
|
box-shadow: 0 0 15px white;
|
||||||
|
}
|
||||||
.hidden-radio {
|
|
||||||
display: none;
|
.hidden-radio {
|
||||||
}
|
display: none;
|
||||||
</style>
|
}
|
||||||
</head>
|
</style>
|
||||||
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<h2>Pilih Skin Pemain</h2>
|
|
||||||
|
<h2>Pilih Skin Pemain</h2>
|
||||||
<form method="POST">
|
|
||||||
|
<form method="POST">
|
||||||
<div class="skin-container">
|
|
||||||
|
<div class="skin-container">
|
||||||
<?php foreach ($skins as $name => $color): ?>
|
|
||||||
<label>
|
<?php foreach ($skins as $name => $color): ?>
|
||||||
<input
|
<label>
|
||||||
type="radio"
|
<input
|
||||||
name="skin"
|
type="radio"
|
||||||
class="hidden-radio"
|
name="skin"
|
||||||
value="<?= $name ?>"
|
class="hidden-radio"
|
||||||
<?= $currentSkin == $name ? "checked" : "" ?>
|
value="<?= $name ?>"
|
||||||
>
|
<?= $currentSkin == $name ? "checked" : "" ?>
|
||||||
<div
|
>
|
||||||
class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
|
<div
|
||||||
style="background: <?= $color ?>"
|
class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
|
||||||
></div>
|
style="background: <?= $color ?>"
|
||||||
</label>
|
></div>
|
||||||
<?php endforeach; ?>
|
</label>
|
||||||
|
<?php endforeach; ?>
|
||||||
</div>
|
|
||||||
|
</div>
|
||||||
<br><br>
|
|
||||||
<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>
|
<br><br>
|
||||||
|
<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>
|
||||||
</form>
|
|
||||||
|
</form>
|
||||||
<a href="menu.php">
|
|
||||||
<button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
|
<a href="menu.php">
|
||||||
</a>
|
<button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
|
||||||
|
</a>
|
||||||
<script>
|
|
||||||
// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
|
<script>
|
||||||
const radios = document.querySelectorAll("input[name='skin']");
|
// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
|
||||||
const boxes = document.querySelectorAll(".skin-box");
|
const radios = document.querySelectorAll("input[name='skin']");
|
||||||
|
const boxes = document.querySelectorAll(".skin-box");
|
||||||
boxes.forEach((box, index) => {
|
|
||||||
box.addEventListener("click", () => {
|
boxes.forEach((box, index) => {
|
||||||
// pilih radio
|
box.addEventListener("click", () => {
|
||||||
radios[index].checked = true;
|
// pilih radio
|
||||||
|
radios[index].checked = true;
|
||||||
// remove highlight
|
|
||||||
boxes.forEach(b => b.classList.remove("skin-selected"));
|
// remove highlight
|
||||||
|
boxes.forEach(b => b.classList.remove("skin-selected"));
|
||||||
// add highlight ke yang dipilih
|
|
||||||
box.classList.add("skin-selected");
|
// add highlight ke yang dipilih
|
||||||
});
|
box.classList.add("skin-selected");
|
||||||
});
|
});
|
||||||
</script>
|
});
|
||||||
|
</script>
|
||||||
</body>
|
|
||||||
|
</body>
|
||||||
|
=======
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
if (!isset($_SESSION['user'])) {
|
||||||
|
header("Location: index.php");
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$conn = new mysqli("localhost", "root", "", "dodge_game");
|
||||||
|
$user = $_SESSION['user'];
|
||||||
|
|
||||||
|
// AMBIL SKIN USER SEKARANG
|
||||||
|
$qSkin = $conn->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;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Pilih Skin</title>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 40px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-box {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-box:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-selected {
|
||||||
|
border: 4px solid #fff;
|
||||||
|
box-shadow: 0 0 15px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-radio {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Pilih Skin Pemain</h2>
|
||||||
|
|
||||||
|
<form method="POST">
|
||||||
|
|
||||||
|
<div class="skin-container">
|
||||||
|
|
||||||
|
<?php foreach ($skins as $name => $color): ?>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="skin"
|
||||||
|
class="hidden-radio"
|
||||||
|
value="<?= $name ?>"
|
||||||
|
<?= $currentSkin == $name ? "checked" : "" ?>
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
|
||||||
|
style="background: <?= $color ?>"
|
||||||
|
></div>
|
||||||
|
</label>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<a href="menu.php">
|
||||||
|
<button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
|
||||||
|
const radios = document.querySelectorAll("input[name='skin']");
|
||||||
|
const boxes = document.querySelectorAll(".skin-box");
|
||||||
|
|
||||||
|
boxes.forEach((box, index) => {
|
||||||
|
box.addEventListener("click", () => {
|
||||||
|
// pilih radio
|
||||||
|
radios[index].checked = true;
|
||||||
|
|
||||||
|
// remove highlight
|
||||||
|
boxes.forEach(b => b.classList.remove("skin-selected"));
|
||||||
|
|
||||||
|
// add highlight ke yang dipilih
|
||||||
|
box.classList.add("skin-selected");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
>>>>>>> 720425e3f38951553731cb9aae9a4c9a34f6c2b4
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user