|
<!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; |
|
let ballPosition = { top: 0, left: Math.random() * 90 }; |
|
let isCaught = false; |
|
let score = 0; |
|
|
|
|
|
function movePlatformLeft() { |
|
if (platformPosition > 0) { |
|
platformPosition -= 5; |
|
} |
|
platform.style.left = platformPosition + '%'; |
|
} |
|
|
|
|
|
function movePlatformRight() { |
|
if (platformPosition < 90) { |
|
platformPosition += 5; |
|
} |
|
platform.style.left = platformPosition + '%'; |
|
} |
|
|
|
|
|
window.addEventListener('keydown', (e) => { |
|
if (e.key === 'ArrowLeft') movePlatformLeft(); |
|
if (e.key === 'ArrowRight') movePlatformRight(); |
|
}); |
|
|
|
|
|
leftButton.addEventListener('click', movePlatformLeft); |
|
rightButton.addEventListener('click', movePlatformRight); |
|
|
|
|
|
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 + '%'; |
|
}); |
|
|
|
|
|
function moveBall() { |
|
if (isCaught) return; |
|
ballPosition.top += 2; |
|
ball.style.top = ballPosition.top + '%'; |
|
ball.style.left = ballPosition.left + '%'; |
|
|
|
|
|
if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) { |
|
isCaught = true; |
|
score++; |
|
scoreDisplay.textContent = score; |
|
resetGame(); |
|
} |
|
|
|
|
|
if (ballPosition.top >= 100) { |
|
if (!isCaught) { |
|
alert('Game Over! Final Score: ' + score); |
|
score = 0; |
|
scoreDisplay.textContent = score; |
|
} |
|
resetGame(); |
|
} |
|
|
|
requestAnimationFrame(moveBall); |
|
} |
|
|
|
|
|
function resetGame() { |
|
isCaught = false; |
|
ballPosition = { top: 0, left: Math.random() * 90 }; |
|
} |
|
|
|
|
|
moveBall(); |
|
</script> |
|
</body> |
|
</html> |