我在p5.js中编写了一些代码，看看我是否可以正确制作碰撞检测系统但是当我放入2个以上的方格时，方块似乎在其他方块内相互碰撞。我想知道是否有任何阻止这个加号，如果你有任何好的指示，如何整理/缩短我的代码ID，就像听到它们。
我的代码：
var r; //later defined as an array for the squares
var num; //number of squares
function setup(){
r = [];
num = 10;
createCanvas(windowWidth,windowHeight- 4);
for(var i = 0;i < num; i++){
r[i] = new Box(random(width-40),random(height-40),40,40);
}
}
function draw(){
background(40);
for(var i = 0;i < num; i++) {
r[i].show();
for(var j = 0;j<num; j++){
//this is the if statement evaluating if the left and right of the square is touching each other. i is one square and j is the other. you see in each if statement i have the acceleration being added, this is because if it wasn't then they would be true if the squares were touching each other on any side
if(r[i].right+r[i].xa >= r[j].left && r[i].bottom >= r[j].top && r[i].top <= r[j].bottom && r[i].left + r[i].xa <= r[j].right){
r[i].xa *= -1;
r[j].xa *= -1;
}
//this is also just as confusing just read through it carefully
if(r[i].bottom + r[i].ya >= r[j].top && r[i].right >=r[j].left && r[i].left <= r[j].right && r[i].top + r[i].ya <= r[j].bottom){
r[i].ya *= -1;
r[j].ya *= -1;
}
}
}
}
function Box(x, y, wid, hei){
this.x = x;//input for square shape
this.y = y;//ditto
this.width = wid;//ditto
this.height= hei;//ditto
this.xa = random(2,5);//xa is the x acceleration
this.ya = random(2,5);//ya is the y acceleration
this.left;
this.right;
this.top;
this.bottom;
this.show = function(){
this.left = this.x; //i define left,right,top,bottom in show function so they get updated
this.right = this.x +this.width;
this.top = this.y;
this.bottom = this.y +this.height;
push();
fill(255);
noStroke();
rect(this.x,this.y,this.width,this.height);
pop();//push pop just in case i want to change square colors individually in the future
this.x += this.xa;//adding acceleration to the squares
this.y += this.ya;//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
if(this.x > width-this.width||this.x <0){//bouncing off the right and left wall
this.xa *= -1;
if(this.x > width/2){// making sure if the square spawns or glitches on the other side of the wall it doesn't get stuck, this checks which side the square is on when it touches the wall then moves it directly on the wall
this.x = width-this.width;
}else{
this.x = 0;
}
}
if(this.y > height-this.height||this.y <0){// same as above but for the y axis
this.ya *= -1;
if(this.y > height/2){
this.y = height-this.height;
}else{
this.y = 0;
}
}
}
}
function windowResized(){
createCanvas(windowWidth,windowHeight- 4);//window resizing adjustment
}
您可以使用this查看它。 只需复制和粘贴。
答案 0 :(得分：2)
抱歉没有这样的事情
当场景中有许多移动物体时，碰撞解决方案并不容易。
你的问题主要是因为你在碰撞时对盒子的旅行方向做出了假设。您将方向乘以-1以反转方向。
对于2个对象都有好处，但是添加第3个对象，你最终会得到3个对象。每个反过来你改变方向，box1命中box2彼此远离，然后在同一帧box1命中box3现在box1和box3分开。你的速度是恒定的所以在三方碰撞后总会有2箱子朝同一方向行进但重叠。
下一帧上的重叠框检测到重叠和反向两个方向，因为它们已经朝同一方向行进，方向开关无法帮助它们分开。
分开一步，对代码进行以下修改只会确保在可能的情况下碰撞导致盒子彼此远离。
function draw() {
background(40);
for (var i = 0; i < num; i++) {
const bx1 = r[i];
r[i].show();
for (var j = 0; j < num; j++) {
if (j !== i) {
// t for top, b for bottom, r for right and l for left. 1 for first box 2 for second
// bx for box
const bx2 = r[j];
const t1 = bx1.top + bx1.ya;
const b1 = bx1.bottom + bx1.ya;
const l1 = bx1.left + bx1.xa;
const r1 = bx1.right + bx1.xa;
const t2 = bx2.top + bx2.ya;
const b2 = bx2.bottom + bx2.ya;
const l2 = bx2.left + bx2.xa;
const r2 = bx2.right + bx2.xa;
// the or's mean that the condition will complete at the first passed clause
// If not (not over lapping) AKA is overlapping
if (!(t1 > b2 || b1 < t2 || l1 > r2 || r1 < l2)) {
if (r1 >= l2) {
bx1.xa = -Math.abs(bx1.xa);
bx2.xa = Math.abs(bx2.xa);
}
if (l1 <= r2) {
bx1.xa = Math.abs(bx1.xa);
bx2.xa = -Math.abs(bx2.xa);
}
if (b1 >= t2) {
bx1.ya = -Math.abs(bx1.ya);
bx2.ya = Math.abs(bx2.ya);
}
if (t1 <= b2) {
bx1.ya = Math.abs(bx1.ya);
bx2.ya = -Math.abs(bx2.ya);
}
}
}
}
}
}
但这只会使问题远离重叠，现在有很多碰撞是错误的，因为没有测试来确定碰撞点
在上面的代码中，您试图从无法解决的位置进行解决。现实生活中的盒子永远不会重叠。现实生活中的盒子会变慢并加速。完美平坦的侧面一次不会碰到一边。
要执行此操作，您需要使用集成。它并不那么难，只是将时间分成更小步骤的过程。碰撞，移动，检查重叠，移开然后再碰撞。
此外，verlet集成将使其更容易。而不是将框速度存储为矢量，而是存储当前位置和先前位置。
box.x = 10;
box.y = 10;
box.ox = 8; // the boxes old position
box.oy = 8;
您按如下方式移动框
sx = box.x - box.ox;
sy = box.y - box.oy;
box.ox = box.x;
box.oy = box.y;
box.x += sx; // the boxes old position
box.y += sy;
当你遇到某些东西时，你需要改变旧位置，以便为下一次迭代提供正确的方向
if(box.y > ground){
box.y = ground - (box.y - ground); // move away from ground same dist as moved into ground
box.oy = box.y -sy;
}
将它们全部分组。 一次全部移动，然后立即测试碰撞。不要一次移动和测试一个。
Verlet集成更加宽容，因为它可以让运动速度吸收一些错误。而不是像标准矢量方法一样处于适当位置。