Javascript 对于多个图形的冲突处理，它们的结构是否更好？
我是一个新手，正在开发一个简单的JavaScript网页，使用processing.js插件生成移动图形。我已经开始研究碰撞检测和处理。我检查每个图形，如果它太接近任何其他图形，我会改变它的方向。该程序有缺陷，因为图形最终会在多个其他图形上同时发生碰撞。这就产生了一种有趣（但不希望）的效果，使图形彼此“卡在”一起 我可以使用一个函数来检测多个碰撞，并以一种阻止图形对象进入彼此内部的方式来处理它们。然而，我觉得他们的观点是我方法中一个更根本的缺陷。我不想创建band aide解决方案，因为它们可能是我碰撞处理方法中的一个更具结构性的缺陷 我应该只编写一个函数来处理多个同时发生的冲突的bug，还是应该使用程序结构返回到绘图板Javascript 对于多个图形的冲突处理，它们的结构是否更好？,javascript,processing.js,Javascript,Processing.js,我是一个新手，正在开发一个简单的JavaScript网页，使用processing.js插件生成移动图形。我已经开始研究碰撞检测和处理。我检查每个图形，如果它太接近任何其他图形，我会改变它的方向。该程序有缺陷，因为图形最终会在多个其他图形上同时发生碰撞。这就产生了一种有趣（但不希望）的效果，使图形彼此“卡在”一起 我可以使用一个函数来检测多个碰撞，并以一种阻止图形对象进入彼此内部的方式来处理它们。然而，我觉得他们的观点是我方法中一个更根本的缺陷。我不想创建band aide解决方案，因为它们可能
<!DOCTYPE html>
<html>
<body bgcolor="lightblue" style="margin:0;">
<center>
<script src="processing.js"></script>
<script type="application/processing">
int orbNumber = 30;
void setup(){
h=[];
float t;
size(600,600);
frameRate(60);
//assign starting variables for floating objects
for(int a = 0; a < orbNumber; a++){
h[a] = new orb(0, 200, 1, 64);
h[a].xpos = random(1,width);
h[a].ypos = a * 100;
h[a].red = random(128,255);
h[a].blue = random(128,255);
h[a].green = random(128,255);
}
}
void draw() {
background(200,200,200,0);
//call the update method from the orb class to calculate postion and display graphic
for(int a = 0; a < orbNumber; a++)h[a].update();
//number the graphics
textFont("Arial", 22);
fill(255,255,255,80);
for(int a = 0; a < orbNumber; a++)text(a,h[a].xpos-6,h[a].ypos+6);
//for each graphic, check distance for each other graphic and change
//movement direction upon collisions
for(int a = 0; a < orbNumber; a++)for(int b = a+1; b < (orbNumber); b++){
if(circleCollision(h[a],h[b])){
t=h[a].xOffset;
h[a].xOffset=h[b].xOffset;
h[b].xOffset = t;
t=h[a].yOffset;
h[a].yOffset=h[b].yOffset;
h[b].yOffset = t;
h[a].update;
h[b].update;
h[a].imperfectEdge()
h[b].imperfectEdge()
}
}
}
function circleCollision(circle1,circle2){
var x1 = circle1.xpos;
var x2 = circle2.xpos;
var y1 = circle1.ypos;
var y2 = circle2.ypos;
var distance = sqrt( (x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) );
var widths = circle1.radius + circle2.radius;
var t = false;
if(distance<widths)t = true;
//text("distance = " + distance,20,20);
return t;
}
class orb {
float xpos, ypos, speed, diameter, xOffset, yOffset, radius;
int red, blue, green;
orb (float x, float y, float s, float size) {
xpos = x;
ypos = y;
diameter = size;
xOffset = s;
yOffset = s;
radius = .5 * diameter;
}
void update() {
ypos += yOffset;
xpos += xOffset;
if(yOffset<0&&ypos<0+radius){
yOffset=-yOffset;
imperfectEdge();
}
if(yOffset>0&&ypos>height-radius){
yOffset=-yOffset;
imperfectEdge();
}
if(xOffset<0&&xpos<0+radius){
xOffset=-xOffset;
imperfectEdge();
}
if(xOffset>0&&xpos>width-radius){
xOffset=-xOffset;
imperfectEdge();
}
noStroke();
for(a = diameter; a > 0; a-=5){
fill(red-a,blue-a,green-a);
ellipse(xpos, ypos, a, a);
}
}
void imperfectEdge(){
xOffset=xOffset+random(-.1,.1);
yOffset=yOffset+random(-.1,.1);
}
}
</script><canvas></canvas>
</body>
</html>
整数=30；
无效设置（）{
h=[]；
浮动t；
尺寸（600600）；
帧率（60）；
//为浮动对象指定起始变量
for（int a=0；a