File size: 6,157 Bytes
e762863 5e8e113 2fe2a19 e762863 5e8e113 439b431 7459f56 e762863 78ba153 7459f56 78ba153 7459f56 5e8e113 78ba153 439b431 7459f56 439b431 7459f56 5e8e113 7459f56 5e8e113 439b431 78ba153 439b431 5e8e113 78ba153 439b431 78ba153 439b431 78ba153 439b431 5e8e113 439b431 7459f56 439b431 5e8e113 7459f56 5e8e113 7459f56 5e8e113 439b431 7459f56 5e8e113 7459f56 5e8e113 439b431 7459f56 439b431 7459f56 5e8e113 7459f56 5e8e113 7459f56 07e1eb1 7459f56 4ab792f 7459f56 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 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 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
<!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 class="lives">Lives: <span id="lives">3</span></div>
</div>
<div class="controls">
<button id="left-button">◀</button>
<button id="right-button">▶</button>
<button id="pause-button">Pause</button>
</div>
<!-- Game Over message -->
<div class="game-over-message">
<h2>Game Over!</h2>
<p>Final Score: <span id="final-score"></span></p>
<button id="restart-button">Restart</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 livesDisplay = document.getElementById('lives');
const pauseButton = document.getElementById('pause-button');
const gameContainer = document.querySelector('.game-container');
const gameOverMessage = document.querySelector('.game-over-message');
const finalScoreDisplay = document.getElementById('final-score');
const restartButton = document.getElementById('restart-button');
let platformPosition = 50; // Posisi platform di tengah
let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola mulai di posisi acak
let score = 0; // Skor
let lives = 3; // Nyawa
let isCaught = false; // Status tangkap bola
let gamePaused = false; // Status pause
let ballSpeed = 2; // Kecepatan bola
let level = 1; // Level permainan
let timer = 30; // Timer permainan
// Pause Functionality
pauseButton.addEventListener('click', () => {
gamePaused = !gamePaused;
if (gamePaused) {
pauseButton.textContent = 'Resume';
} else {
pauseButton.textContent = 'Pause';
moveBall(); // Continue game after pause
}
});
// 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 + '%';
}
// Kontrol tombol
leftButton.addEventListener('click', movePlatformLeft);
rightButton.addEventListener('click', movePlatformRight);
// Fungsi untuk menggerakkan bola
function moveBall() {
if (gamePaused) return; // Jangan jalankan permainan jika di-pause
ballPosition.top += ballSpeed;
ball.style.top = ballPosition.top + '%';
ball.style.left = ballPosition.left + '%';
// Deteksi tabrakan
if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
isCaught = true;
score++;
scoreDisplay.textContent = score;
resetBall();
}
// Game Over jika bola jatuh tanpa ditangkap
if (ballPosition.top >= 100) {
if (!isCaught) {
lives--;
livesDisplay.textContent = `Lives: ${lives}`;
if (lives <= 0) {
showGameOver(); // Tampilkan Game Over
}
}
resetBall();
}
updateLevel(); // Perbarui level setelah mencapai skor tertentu
requestAnimationFrame(moveBall);
}
// Fungsi untuk mereset bola
function resetBall() {
isCaught = false;
ballPosition = { top: 0, left: Math.random() * 90 };
}
// Fungsi untuk memperbarui level
function updateLevel() {
if (score >= level * 10) {
level++;
ballSpeed += 0.5; // Meningkatkan kecepatan bola setiap level
}
}
// Fungsi untuk reset permainan
function resetGame() {
score = 0;
lives = 3;
level = 1;
ballSpeed = 2;
timer = 30;
scoreDisplay.textContent = score;
livesDisplay.textContent = `Lives: ${lives}`;
finalScoreDisplay.textContent = score;
levelDisplay.textContent = `Level: ${level}`;
timerDisplay.textContent = `Time: ${timer}s`;
gameOverMessage.style.display = 'none'; // Sembunyikan Game Over
resetBall();
moveBall(); // Mulai kembali permainan
}
// Fungsi untuk menampilkan Game Over
function showGameOver() {
gameContainer.style.display = 'none'; // Sembunyikan konten permainan
gameOverMessage.style.display = 'block'; // Tampilkan Game Over
}
// Fungsi untuk timer
function countdownTimer() {
if (!gamePaused && timer > 0) {
timer--;
timerDisplay.textContent = `Time: ${timer}s`;
} else if (timer <= 0) {
alert('Game Over! Time is up.');
resetGame();
}
}
// Update timer setiap detik
setInterval(countdownTimer, 1000);
// Restart game ketika tombol restart diklik
restartButton.addEventListener('click', resetGame);
moveBall(); // Memulai permainan
</script>
</body>
</html> |