Simple HTML Ping Pong Game: No Instructions Needed
<html>
<head>
<title>Simple Ping Pong Game</title>
<style>
body {
font-family: sans-serif;
text-align: center;
background-color: #F0F0F0;
}
#game {
display: flex;
justify-content: center;
margin-top: 20px;
}
#game div {
width: 100px;
height: 20px;
background-color: #F5F5F5;
border: 1px solid #AFAFAF;
border-radius: 10px;
position: relative;
}
#game div:first-child {
margin-right: 10px;
}
#game div:last-child {
margin-left: 10px;
}
#game div span {
position: absolute;
top: -3px;
left: -3px;
width: 10px;
height: 10px;
background-color: #444;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Ping Pong</h1>
<div id='game'>
<div><span></span></div>
<div><span></span></div>
</div>
<script>
let game = document.getElementById('game');
let leftPaddle = game.children[0];
let rightPaddle = game.children[1];
let leftPaddlePosition = 0;
let rightPaddlePosition = 0;
let ballPosition = {
x: 0,
y: 0
}
let ballDirection = {
x: 1,
y: 1
}
let score = {
left: 0,
right: 0
}
const paddleSpeed = 10;
const ballSpeed = 5;
document.addEventListener('keydown', event => {
if (event.keyCode == 87) {
leftPaddlePosition -= paddleSpeed;
} else if (event.keyCode == 83) {
leftPaddlePosition += paddleSpeed;
} else if (event.keyCode == 38) {
rightPaddlePosition -= paddleSpeed;
} else if (event.keyCode == 40) {
rightPaddlePosition += paddleSpeed;
}
leftPaddle.style.top = leftPaddlePosition + 'px';
rightPaddle.style.top = rightPaddlePosition + 'px';
});
function moveBall() {
ballPosition.x += ballDirection.x * ballSpeed;
ballPosition.y += ballDirection.y * ballSpeed;
let leftPaddleTop = leftPaddlePosition;
let leftPaddleBottom = leftPaddlePosition + leftPaddle.offsetHeight;
let rightPaddleTop = rightPaddlePosition;
let rightPaddleBottom = rightPaddlePosition + rightPaddle.offsetHeight;
if (ballPosition.x <= 0) {
if (ballPosition.y > leftPaddleTop && ballPosition.y < leftPaddleBottom) {
ballDirection.x = 1;
} else {
score.right += 1;
resetBallPosition();
}
}
if (ballPosition.x >= game.offsetWidth) {
if (ballPosition.y > rightPaddleTop && ballPosition.y < rightPaddleBottom) {
ballDirection.x = -1;
} else {
score.left += 1;
resetBallPosition();
}
}
if (ballPosition.y <= 0 || ballPosition.y >= game.offsetHeight) {
ballDirection.y *= -1;
}
game.style.backgroundPosition = `${ballPosition.x}px ${ballPosition.y}px`;
window.requestAnimationFrame(moveBall);
}
function resetBallPosition() {
ballPosition.x = game.offsetWidth / 2;
ballPosition.y = game.offsetHeight / 2;
}
window.requestAnimationFrame(moveBall);
</script>
</body>
</htm
原文地址: https://www.cveoy.top/t/topic/lnh4 著作权归作者所有。请勿转载和采集!