当在一定 Angular 下时，球会被困在 Racket 中，直到它通过。这是碰撞代码:
if(ball.x + ball.radius > player2.x && ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height || ball.x - ball.radius < player1.x + 20 && ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height) {
ball.speedX = -ball.speedX;
}
var ctx = document.getElementById("canvas").getContext('2d');
var player1 = {
x:10,
y:200,
height:100,
speed:10,
leftPressed:false,
rightPressed:false,
upPressed:false,
downPressed:false,
points: 0
},
player2 = {
x:770,
y:355,
height:100,
speed:5,
rightPressed:false,
leftPressed:false,
upPressed:false,
downPressed:false,
points: 0
},
ball = {
x:400,
y:250,
radius: 10,
speedX:8,
speedY:2
};
function drawPlayers() {
ctx.fillRect(player1.x, player1.y, 20, player1.height);
ctx.fillRect(player2.x, player2.y, 20, player2.height);
}
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fill();
}
function drawPoints() {
ctx.font = "17px Arial";
ctx.fillText("Points:" + player1.points, 10, 20);
ctx.fillText("Points:" + player2.points, 730, 20);
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayers();
drawBall();
drawPoints();
if(player1.leftPressed){
player1.x -=player1.speed;
}
if(player1.rightPressed){
player1.x +=player1.speed;
}
if(player1.upPressed){
player1.y -=player1.speed;
}
if(player1.downPressed){
player1.y +=player1.speed;
}
if(player2.leftPressed){
player2.x -=player2.speed;
}
if(player2.rightPressed){
player2.x +=player2.speed;
}
if(player2.upPressed){
player2.y -=player2.speed;
}
if(player2.downPressed){
player2.y +=player2.speed;
}
ball.x += ball.speedX;
ball.y += ball.speedY;
if(ball.x + ball.radius > canvas.width) {
player1.points ++;
ball.x = 400;
ball.y = 250;
}
else if(ball.x - ball.radius < 0) {
player2.points ++;
ball.x = 400;
ball.y = 250;
}
if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.speedY = -ball.speedY;
}
if(ball.x + ball.radius > player2.x && ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height || ball.x - ball.radius < player1.x + 20 && ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height) {
ball.speedX = -ball.speedX;
}
requestAnimationFrame(update);
}
update();
document.body.addEventListener("keydown", function(e) {
//left
if(e.keyCode === 65) {
player1.leftPressed = true;
}
//right
if(e.keyCode === 68) {
player1.rightPressed = true;
}
//up
if(e.keyCode === 87) {
player1.upPressed = true;
}
//down
if(e.keyCode === 83) {
player1.downPressed = true;
}
if(e.keyCode === 37) {
player2.leftPressed = true;
}
//right
if(e.keyCode === 39) {
player2.rightPressed = true;
}
//up
if(e.keyCode === 38) {
player2.upPressed = true;
}
//down
if(e.keyCode === 40) {
player2.downPressed = true;
}
});
document.body.addEventListener("keyup", function(e) {
//left
if(e.keyCode === 65) {
player1.leftPressed = false;
}
//right
if(e.keyCode === 68) {
player1.rightPressed = false;
}
//up
if(e.keyCode === 87) {
player1.upPressed = false;
}
//down
if(e.keyCode === 83) {
player1.downPressed = false;
}
if(e.keyCode === 37) {
player2.leftPressed = false;
}
//right
if(e.keyCode === 39) {
player2.rightPressed = false;
}
//up
if(e.keyCode === 38) {
player2.upPressed = false;
}
//down
if(e.keyCode === 40) {
player2.downPressed = false;
}
});canvas {
border:1px solid black;
}<html>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
</html>最佳答案
其实有几种情况需要改正，但问题都是一样的。您没有考虑 ball 侧身击中 player 的情况。更具体地说，这些是您错过的条件:
if (ball.x > player2.x && ball.y + ball.radius > player2.y)
if (ball.x > player2.x && ball.y + ball.radius < player2.y + player2.height)
对于 player1 也是如此。
关于javascript - 为什么我的乒乓球游戏中的球会这样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48432709/