File size: 5,004 Bytes
0460853 e1c3637 0460853 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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<!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>
<!-- Game Over Overlay -->
<div id="game-over-overlay" class="overlay">
<div class="overlay-content">
<h2>Game Over!</h2>
<p>Final Score: <span id="final-score"></span></p>
<button id="restart-button">Restart Game</button>
</div>
</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');
const overlay = document.getElementById('game-over-overlay');
const finalScoreDisplay = document.getElementById('final-score');
const restartButton = document.getElementById('restart-button');
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 += 0.8; // Bola turun lebih lambat
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) {
showGameOver();
}
resetGame();
}
requestAnimationFrame(moveBall);
}
// Fungsi untuk mereset permainan
function resetGame() {
isCaught = false;
ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
}
// Fungsi untuk menampilkan overlay Game Over
function showGameOver() {
finalScoreDisplay.textContent = score; // Tampilkan skor akhir.
overlay.style.display = 'flex'; // Tampilkan overlay.
}
// Tombol restart untuk memulai ulang permainan
restartButton.addEventListener('click', () => {
overlay.style.display = 'none'; // Sembunyikan overlay.
score = 0; // Reset skor.
scoreDisplay.textContent = score;
resetGame();
moveBall();
});
// Memulai permainan
moveBall();
</script>
</body>
</html> |