const gameArea = document.getElementById('gameArea');
const ball = document.getElementById('ball'); let ballX = gameArea.offsetWidth / 2 - ball.offsetWidth / 2;
let ballY = gameArea.offsetHeight / 2 - ball.offsetHeight / 2;
let ballSpeedX = 0;
let ballSpeedY = 0;
const gravity = 0.5;
const bounceFactor = -0.8;
const maxSpeed = 10; function updateBallPosition() {
ballSpeedY += gravity;
ballX += ballSpeedX;
ballY += ballSpeedY; // Check for wall collisions
if (ballX < 0 || ballX + ball.offsetWidth > gameArea.offsetWidth) {
ballSpeedX *= bounceFactor;
ballX = Math.max(0, Math.min(gameArea.offsetWidth - ball.offsetWidth, ballX));
} // Check for ground collision
if (ballY + ball.offsetHeight > gameArea.offsetHeight) {
ballSpeedY *= bounceFactor;
ballY = gameArea.offsetHeight - ball.offsetHeight;
if (Math.abs(ballSpeedY) < 1) {
ballSpeedY = 0;
}
} // Apply speed limits
ballSpeedX = Math.max(-maxSpeed, Math.min(maxSpeed, ballSpeedX));
ballSpeedY = Math.max(-maxSpeed, Math.min(maxSpeed, ballSpeedY)); ball.style.left = `${ballX}px`;
ball.style.top = `${ballY}px`; requestAnimationFrame(updateBallPosition);
} ball.addEventListener('click', (event) => {
const clickX = event.offsetX;
const clickY = event.offsetY; // Calculate the direction of the bounce based on where the ball was tapped
const centerX = ball.offsetWidth / 2;
const centerY = ball.offsetHeight / 2;
const deltaX = clickX - centerX;
const deltaY = clickY - centerY; ballSpeedX = deltaX * 0.5; // Adjust the horizontal bounce
ballSpeedY = deltaY * -1; // Adjust the vertical bounce
}); // Initialize ball position
ball.style.left = `${ballX}px`;
ball.style.top = `${ballY}px`; // Start the game loop
updateBallPosition();
