File size: 3,560 Bytes
0460853 eb2d242 0460853 c530330 daef768 0460853 daef768 c530330 daef768 c530330 daef768 c530330 daef768 c530330 daef768 c530330 daef768 c530330 daef768 c530330 daef768 c530330 daef768 c530330 ac83adc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Falling Ball Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<div id="ball" class="ball"></div>
<div id="platform" class="platform"></div>
<div id="score">Score: 0</div>
<div id="level">Level: 1</div>
</div>
<script>
let ball = document.getElementById("ball");
let platform = document.getElementById("platform");
let score = document.getElementById("score");
let levelDisplay = document.getElementById("level");
let currentScore = 0;
let level = 1;
let fallSpeed = 3; // Initial fall speed (seconds)
let platformX = window.innerWidth / 2 - 50;
platform.style.left = platformX + "px";
let isTouching = false;
// Kontrol menggunakan Mouse
document.addEventListener("mousemove", (e) => {
platformX = e.clientX - platform.offsetWidth / 2;
if (platformX < 0) platformX = 0;
if (platformX > window.innerWidth - platform.offsetWidth) {
platformX = window.innerWidth - platform.offsetWidth;
}
platform.style.left = platformX + "px";
});
// Kontrol menggunakan Sentuhan
document.addEventListener("touchmove", (e) => {
if (isTouching) {
let touchX = e.touches[0].clientX;
platformX = touchX - platform.offsetWidth / 2;
if (platformX < 0) platformX = 0;
if (platformX > window.innerWidth - platform.offsetWidth) {
platformX = window.innerWidth - platform.offsetWidth;
}
platform.style.left = platformX + "px";
}
}, { passive: false });
document.addEventListener("touchstart", (e) => {
isTouching = true;
});
document.addEventListener("touchend", (e) => {
isTouching = false;
});
let dropBall = () => {
let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
ball.style.left = ballX + "px";
ball.style.animation = `fall ${fallSpeed}s linear infinite`;
};
ball.addEventListener("animationiteration", () => {
let ballPosition = ball.getBoundingClientRect();
let platformPosition = platform.getBoundingClientRect();
if (ballPosition.bottom >= platformPosition.top &&
ballPosition.left >= platformPosition.left &&
ballPosition.right <= platformPosition.right) {
currentScore++;
if (currentScore % 10 === 0) {
level++;
levelDisplay.innerHTML = "Level: " + level;
fallSpeed -= 0.2;
dropBall(); // Drop ball again with updated speed
}
score.innerHTML = "Score: " + currentScore;
dropBall();
} else if (ballPosition.bottom >= window.innerHeight) {
currentScore = 0;
level = 1;
fallSpeed = 3; // Reset fall speed
score.innerHTML = "Score: " + currentScore;
levelDisplay.innerHTML = "Level: " + level;
dropBall();
}
});
dropBall();
</script>
</body>
</html> |