无法检测 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>

这是我的代码。 我希望圆/球反射放置在顶部的第二个矩形。 请帮助我使用此程序所需的适当命令。 我尝试了很多可能性，并让第一个矩形按我的意愿工作（圆/球从矩形反射出来）。 我正在尝试制作两个人在本地玩的乒乓球游戏。 感谢你们对我的帮助。

Answer 1

如果球击中了球拍，则只需反转球方向矢量的 y 分量，即可将球反射到球拍的内侧。 纠正球的位置，使其接触到球拍：

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++;
}

完整示例：

 //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>