Simple HTML Ping Pong Game: No Instructions Needed
<!DOCTYPE html>
<html>
<head>
<title>Ping Pong</title>
<style>
body {
font-family: sans-serif;
}
#game-container {
width: 500px;
height: 300px;
position: relative;
margin: auto;
border: 4px solid #000;
}
#game-container > div {
width: 20px;
height: 20px;
position: absolute;
background-color: #f00;
border-radius: 50%;
}
#paddle1 {
top: 0px;
left: 0px;
height: 80px;
width: 10px;
background-color: #000;
}
#paddle2 {
bottom: 0px;
right: 0px;
height: 80px;
width: 10px;
background-color: #000;
}
</style>
</head>
<body>
<h1>Ping Pong</h1>
<div id='game-container'>
<div id='ball'></div>
<div id='paddle1'></div>
<div id='paddle2'></div>
</div>
<script>
let ball = document.getElementById('ball');
let paddle1 = document.getElementById('paddle1');
let paddle2 = document.getElementById('paddle2');
let gameContainer = document.getElementById('game-container');
let xSpeed = 5;
let ySpeed = 5;
let xPosition = 250;
let yPosition = 150;
<pre><code> let gameLoop = () => {
xPosition += xSpeed;
yPosition += ySpeed;
ball.style.top = `${yPosition}px`;
ball.style.left = `${xPosition}px`;
// Bounce off walls
if (xPosition >= gameContainer.offsetWidth - ball.offsetWidth) {
xSpeed *= -1;
}
if (yPosition >= gameContainer.offsetHeight - ball.offsetHeight) {
ySpeed *= -1;
}
if (xPosition <= 0) {
xSpeed *= -1;
}
if (yPosition <= 0) {
ySpeed *= -1;
}
// Bounce off paddles
if (
xPosition >= paddle2.offsetLeft - ball.offsetWidth &&
xPosition <= paddle2.offsetLeft + paddle2.offsetWidth &&
yPosition >= paddle2.offsetTop - ball.offsetHeight &&
yPosition <= paddle2.offsetTop + paddle2.offsetHeight
) {
xSpeed *= -1;
}
if (
xPosition >= paddle1.offsetLeft - ball.offsetWidth &&
xPosition <= paddle1.offsetLeft + paddle1.offsetWidth &&
yPosition >= paddle1.offsetTop - ball.offsetHeight &&
yPosition <= paddle1.offsetTop + paddle1.offsetHeight
) {
xSpeed *= -1;
}
requestAnimationFrame(gameLoop);
};
requestAnimationFrame(gameLoop);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnik 著作权归作者所有。请勿转载和采集!