File size: 4,046 Bytes
e762863 5e8e113 2fe2a19 e762863 5e8e113 439b431 e762863 78ba153 5e8e113 78ba153 439b431 5e8e113 07e1eb1 5e8e113 439b431 78ba153 439b431 5e8e113 78ba153 439b431 78ba153 439b431 78ba153 439b431 5e8e113 439b431 07e1eb1 439b431 07e1eb1 439b431 07e1eb1 439b431 5e8e113 07e1eb1 5e8e113 07e1eb1 5e8e113 439b431 07e1eb1 5e8e113 07e1eb1 5e8e113 439b431 07e1eb1 439b431 07e1eb1 5e8e113 07e1eb1 4ab792f 07e1eb1 4ab792f 07e1eb1 5e8e113 e762863 |
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 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Catch Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<div class="ball"></div>
<div class="platform"></div>
<div class="score-board">Score: <span id="score">0</span></div>
</div>
<div class="controls">
<button id="left-button">◀</button>
<button id="right-button">▶</button>
</div>
<script>
const platform = document.querySelector('.platform');
const ball = document.querySelector('.ball');
const leftButton = document.getElementById('left-button');
const rightButton = document.getElementById('right-button');
const scoreDisplay = document.getElementById('score');
const gameContainer = document.querySelector('.game-container');
let platformPosition = 50; // Platform awal di tengah.
let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul secara acak.
let isCaught = false; // Apakah bola ditangkap.
let score = 0; // Skor awal.
// Fungsi untuk memindahkan platform ke kiri
function movePlatformLeft() {
if (platformPosition > 0) {
platformPosition -= 5;
}
platform.style.left = platformPosition + '%';
}
// Fungsi untuk memindahkan platform ke kanan
function movePlatformRight() {
if (platformPosition < 90) {
platformPosition += 5;
}
platform.style.left = platformPosition + '%';
}
// Keyboard controls
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') movePlatformLeft();
if (e.key === 'ArrowRight') movePlatformRight();
});
// Button controls
leftButton.addEventListener('click', movePlatformLeft);
rightButton.addEventListener('click', movePlatformRight);
// Mouse/Touch controls
gameContainer.addEventListener('mousemove', (e) => {
const containerWidth = gameContainer.offsetWidth;
platformPosition = (e.clientX / containerWidth) * 100;
platform.style.left = platformPosition + '%';
});
gameContainer.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const containerWidth = gameContainer.offsetWidth;
platformPosition = (touch.clientX / containerWidth) * 100;
platform.style.left = platformPosition + '%';
});
// Fungsi untuk menggerakkan bola
function moveBall() {
if (isCaught) return; // Jangan lanjut jika bola ditangkap.
ballPosition.top += 2; // Bola turun.
ball.style.top = ballPosition.top + '%';
ball.style.left = ballPosition.left + '%';
// Deteksi tabrakan (collision detection)
if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
isCaught = true;
score++; // Tambahkan skor.
scoreDisplay.textContent = score; // Update skor di layar.
resetGame();
}
// Game over jika bola melewati platform
if (ballPosition.top >= 100) {
if (!isCaught) {
alert('Game Over! Final Score: ' + score);
score = 0; // Reset skor.
scoreDisplay.textContent = score; // Update skor.
}
resetGame();
}
requestAnimationFrame(moveBall);
}
// Fungsi untuk mereset permainan
function resetGame() {
isCaught = false;
ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
}
// Memulai permainan
moveBall();
</script>
</body>
</html> |