forked from technolyceum/g11-m2
97 lines
2.0 KiB
HTML
97 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Simple Paddle Game</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #222;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
#game {
|
|
position: relative;
|
|
width: 400px;
|
|
height: 300px;
|
|
border: 2px solid white;
|
|
background: #000;
|
|
}
|
|
#paddle {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 175px;
|
|
width: 50px;
|
|
height: 10px;
|
|
background: white;
|
|
}
|
|
#ball {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: red;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="game">
|
|
<div id="paddle"></div>
|
|
<div id="ball"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const game = document.getElementById('game');
|
|
const paddle = document.getElementById('paddle');
|
|
const ball = document.getElementById('ball');
|
|
|
|
let paddleX = 175;
|
|
let ballX = 200, ballY = 100;
|
|
let ballSpeedX = 2, ballSpeedY = 2;
|
|
|
|
// Move paddle with mouse
|
|
game.addEventListener('mousemove', (e) => {
|
|
const rect = game.getBoundingClientRect();
|
|
paddleX = e.clientX - rect.left - 25;
|
|
// Keep paddle inside game area
|
|
if (paddleX < 0) paddleX = 0;
|
|
if (paddleX > 350) paddleX = 350;
|
|
paddle.style.left = paddleX + 'px';
|
|
});
|
|
|
|
// Game loop
|
|
setInterval(() => {
|
|
// Move ball
|
|
ballX += ballSpeedX;
|
|
ballY += ballSpeedY;
|
|
|
|
// Bounce off left/right walls
|
|
if (ballX <= 0 || ballX >= 390) ballSpeedX = -ballSpeedX;
|
|
// Bounce off top
|
|
if (ballY <= 0) ballSpeedY = -ballSpeedY;
|
|
// Bounce off paddle
|
|
if (
|
|
ballY >= 280 &&
|
|
ballX >= paddleX &&
|
|
ballX <= paddleX + 50
|
|
) {
|
|
ballSpeedY = -ballSpeedY;
|
|
}
|
|
// Reset if ball falls
|
|
if (ballY > 300) {
|
|
ballX = 200;
|
|
ballY = 100;
|
|
ballSpeedY = 2;
|
|
}
|
|
|
|
ball.style.left = ballX + 'px';
|
|
ball.style.top = ballY + 'px';
|
|
}, 20);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |