g11s6/g11-m2
Template
1
0
Fork 0
forked from g11s4/g11-m2
Code Pull Requests Activity

Compare commits

merge into: g11s6:main
Branches Tags
g11s6:main g11s4:main
...
pull from: g11s4:main
Branches Tags
g11s4:main g11s6:main

1 Commits
main ... main

Author SHA1 Message Date
root
622b71b2ba Added pinpong.html 2025-11-11 14:54:32 +03:00
2 changed files with 97 additions and 0 deletions
Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

97
pingpong.html Normal file
View File

@@ -0,0 +1,97 @@
<!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>