无法检测 p5.js 中矩形和圆形之间的碰撞

Question

 var rectx = 287.5; var recty = 460; var rectx2 = 287.5 var recty2 = 0 var rectwidth = 100 var rectheight = 25 //ball vars var xBall = Math.floor(Math.random() * 300) + 50; var yBall = 50; var diameter = 75; var xBallChange = 5; var yBallChange = 5; //Misc var started = false; var score = 0; var score2 = 0; function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(0); //main commands xBall += xBallChange; yBall += yBallChange; if (xBall < diameter/2 || xBall > windowWidth - 0.5*diameter) { xBallChange *= -1; } if (yBall < diameter/2 || yBall > windowHeight - diameter) { yBallChange *= -1; } if ((xBall > rectx && xBall < rectx + rectwidth) && (yBall + (diameter/2) >= recty)) { xBallChange *= -1; yBallChange *= -1; score++; } //Player 1 fill (0,255,255); noStroke(); rect(rectx,recty,rectwidth,rectheight); //Player 2 fill(0,255,255) noStroke() rect(rectx2,recty2,rectwidth,rectheight); //The ball fill (255,255,0); noStroke(); ellipse(xBall,yBall,75,75) // The partition fill(148,0,211) noStroke() rect(0,257,750,1) } function keyPressed() { //Player 1 Input if (keyCode === LEFT_ARROW) { rectx -= 50; } else if (keyCode === RIGHT_ARROW) { rectx += 50; } //Player 2 Input if (keyCode === 65) { rectx2 -= 50; } else if (keyCode === 68) { rectx2 += 50; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

This is my code. I want the circle/ball to reflect off the second rectangle placed on top. Please help me with the appropriate commands required for this program. I have tried many possibilities and have got the first rectangle to work as I want(the circle/ball reflects off the rectangle). I am trying to make the pong game for two people to play locally. THank you for helping me.

Answer 1

If the ball hits the paddle, then only invert the y component of the direction vector of the ball to reflect the ball on the inner side of the paddle. Correct the position of the ball so that it touches the paddle:

if (xBall > rectx && xBall < rectx + rectwidth && yBall + diameter/2 >= recty) {
    yBallChange *= -1;
    yBall = recty - diameter/2;
    score++;
}

This is only an approximation of course, the reflection at the corners is incorrect and the ball does not bounce on the left or right edge of the paddle, but it is a good starting point.

Implement a similar algorithm for the 2nd paddle:

if (xBall > rectx2 && xBall < rectx2 + rectwidth && yBall - diameter/2 < recty2+rectheight) {
    yBallChange *= -1;
    yBall = recty2 + rectheight + diameter/2;
    score2++;
}

Complete example:

 //Rect vars var rectx = 287.5; var recty = 460; var rectx2 = 287.5 var recty2 = 0 var rectwidth = 100 var rectheight = 25 //ball vars var xBall = Math.floor(Math.random() * 300) + 50; var yBall = 50; var diameter = 75; var xBallChange = 5; var yBallChange = 5; //Misc var started = false; var score = 0; var score2 = 0; function setup() { createCanvas(750, 485); } function draw() { background(0); //main commands xBall += xBallChange; yBall += yBallChange; if (xBall < diameter/2 || xBall > width - diameter/2) { xBallChange *= -1; } if (yBall < diameter/2 || yBall > height - diameter/2) { yBallChange *= -1; } if (xBall > rectx && xBall < rectx + rectwidth && yBall + diameter/2 >= recty) { yBallChange *= -1; yBall = recty - diameter/2; score++; } if (xBall > rectx2 && xBall < rectx2 + rectwidth && yBall - diameter/2 < recty2+rectheight) { yBallChange *= -1; yBall = recty2 + rectheight + diameter/2; score2++; } //Player 1 fill (0,255,255); noStroke(); rect(rectx,recty,rectwidth,rectheight); //Player 2 fill(0,255,255) noStroke() rect(rectx2,recty2,rectwidth,rectheight); //The ball fill (255,255,0); noStroke(); ellipse(xBall,yBall,75,75) // The partition fill(148,0,211) noStroke() rect(0,257,750,1) } function keyPressed() { //Player 1 Input if (keyCode === LEFT_ARROW) { rectx -= 50; } else if (keyCode === RIGHT_ARROW) { rectx += 50; } //Player 2 Input if (keyCode === 65) { rectx2 -= 50; } else if (keyCode === 68) { rectx2 += 50; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>