File size: 5,417 Bytes
0460853 cbff512 0460853 cbff512 0460853 cbff512 0460853 cbff512 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 137 138 139 140 141 142 143 |
<!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.
let fallSpeed = 0.5; // Kecepatan bola turun lebih lambat.
// 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 += fallSpeed; // Bola turun dengan kecepatan 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() {
// Reset posisi platform dan bola
platformPosition = 50; // Platform kembali ke tengah
ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang
ball.style.left = ballPosition.left + '%';
ball.style.top = ballPosition.top + '%';
platform.style.left = platformPosition + '%';
isCaught = false;
fallSpeed = 0.5; // Reset kecepatan bola
}
// 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> |