为什么我的乒乓球游戏中的球会这样？

Question

在一定角度下，球会被困在球拍中，直到它通过。这是碰撞代码：

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>

Answer 1

其实有好几种情况你要纠正，但问题都是一样的。您没有考虑 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.

也类似

为什么我的乒乓球游戏中的球会这样？

Why does the ball in my pong game do this?

javascript

2d

collision-detection