無法檢測 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>