HTML Ping Pong Game: Simple and Fun
<!DOCTYPE html>
<html>
<head>
<title>Ping Pong Game</title>
<style>
#game {
width: 400px;
height: 400px;
background-color: #ccc;
border-style: solid;
border-width: 2px;
border-radius: 8px;
position: relative;
margin: 0 auto;
}
<pre><code> #paddle1 {
width: 10px;
height: 100px;
background-color: #999;
position: absolute;
top: 0;
left: 0;
border-radius: 8px;
}
#paddle2 {
width: 10px;
height: 100px;
background-color: #999;
position: absolute;
top: 0;
right: 0;
border-radius: 8px;
}
#ball {
width: 10px;
height: 10px;
background-color: #000;
position: absolute;
top: 0;
left: 50%;
border-radius: 8px;
}
</style>
</code></pre>
</head>
<body>
<div id='game'>
<div id='paddle1'></div>
<div id='paddle2'></div>
<div id='ball'></div>
</div>
<script type='text/javascript'>
let game = document.getElementById('game');
let paddle1 = document.getElementById('paddle1');
let paddle2 = document.getElementById('paddle2');
let ball = document.getElementById('ball');
<pre><code> let topSpeed = 10;
let rightSpeed = 5;
let leftSpeed = -5;
let bottomSpeed = -10;
let gameTop = 0;
let gameRight = game.offsetWidth - paddle2.offsetWidth;
let gameLeft = 0;
let gameBottom = game.offsetHeight - paddle1.offsetHeight;
let paddle1Top = 0;
let paddle2Top = 0;
let ballTop = 0;
let ballLeft = 0;
let score1 = 0;
let score2 = 0;
// Movement for paddles and ball
document.addEventListener('keydown', function(event) {
if(event.keyCode === 39) {
paddle2Top += 5;
if(paddle2Top + paddle2.offsetHeight > gameBottom) {
paddle2Top = gameBottom - paddle2.offsetHeight;
}
paddle2.style.top = paddle2Top + 'px';
} else if (event.keyCode === 37) {
paddle2Top -= 5;
if(paddle2Top < gameTop) {
paddle2Top = gameTop;
}
paddle2.style.top = paddle2Top + 'px';
} else if (event.keyCode === 38) {
paddle1Top -= 5;
if(paddle1Top < gameTop) {
paddle1Top = gameTop;
}
paddle1.style.top = paddle1Top + 'px';
} else if (event.keyCode === 40) {
paddle1Top += 5;
if(paddle1Top + paddle1.offsetHeight > gameBottom) {
paddle1Top = gameBottom - paddle1.offsetHeight;
}
paddle1.style.top = paddle1Top + 'px';
}
});
// Game loop
function gameLoop() {
ballTop += topSpeed;
ballLeft += rightSpeed;
if(ballTop < gameTop) {
ballTop = gameTop;
topSpeed = -topSpeed;
}
if (ballLeft + ball.offsetWidth > gameRight) {
ballLeft = gameRight - ball.offsetWidth;
rightSpeed = -rightSpeed;
}
if(ballTop + ball.offsetHeight > paddle1Top && ballLeft < paddle1.offsetWidth) {
ballTop = paddle1Top - ball.offsetHeight;
topSpeed = -topSpeed;
}
if (ballLeft < paddle2.offsetWidth && ballTop + ball.offsetHeight > paddle2Top) {
ballLeft = paddle2.offsetWidth;
rightSpeed = -rightSpeed;
}
if (ballLeft < gameLeft) {
score2++;
ballLeft = game.offsetWidth / 2;
ballTop = game.offsetHeight / 2;
rightSpeed = -rightSpeed;
topSpeed = -topSpeed;
}
if (ballLeft + ball.offsetWidth > gameRight) {
score1++;
ballLeft = game.offsetWidth / 2;
ballTop = game.offsetHeight / 2;
rightSpeed = -rightSpeed;
topSpeed = -topSpeed;
}
ball.style.top = ballTop + 'px';
ball.style.left = ballLeft + 'px';
document.getElementById('score1').innerHTML = score1;
document.getElementById('score2').innerHTML = score2;
setTimeout(gameLoop, 10);
}
gameLoop();
</script>
<h2>Score: <span id='score1'>0</span> - <span id='score2'>0</span></h2>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnis 著作权归作者所有。请勿转载和采集!