我有一个用jQuery编码的游戏，机器人在屏幕上移动。下面的代码是一个每20ms运行一次的循环，目前如果你有超过15个机器人你开始注意到浏览器滞后（仅仅因为所有高级碰撞检测都在进行）。
有没有办法减少延迟，我可以提高效率吗？
P.S。只是发布了一段代码，我无法找到一种方法让我的观点足够清楚！
$.playground().registerCallback(function(){ //Movement Loop
if(!pause) {
for (var i in bots) {
//bots - color, dir, x, y, z, spawned?, spawnerid, prevd
var self = $('#b' + i);
var current = bots[i];
if(bots[i][5]==1) {
var xspeed = 0, yspeed = 0;
if(current[1]==0) { yspeed = -D_SPEED; }
else if(current[1]==1) { xspeed = D_SPEED; }
else if(current[1]==2) { yspeed = D_SPEED; }
else if(current[1]==3) { xspeed = -D_SPEED; }
var x = current[2] + xspeed;
var y = current[3] + yspeed;
var z = current[3] + 120;
if(current[2]>0&&x>PLAYGROUND_WIDTH||current[2]<0&&x<-GRID_SIZE||
current[3]>0&&y>PLAYGROUND_HEIGHT||current[3]<0&&y<-GRID_SIZE) {
remove_bot(i, self);
} else {
if(current[7]!=current[1]) {
self.setAnimation(colors[current[0]][current[1]]);
bots[i][7] = current[1];
}
if(self.css({"left": ""+(x)+"px", "top": ""+(y)+"px", "z-index": z})) {
bots[i][2] = x;
bots[i][3] = y;
bots[i][4] = z;
bots[i][8]++;
}
}
}
}
$("#debug").html(dump(arrows));
$(".bot").each(function(){
var b_id = $(this).attr("id").substr(1);
var collision = false;
var c_bot = bots[b_id];
var b_x = c_bot[2];
var b_y = c_bot[3];
var b_d = c_bot[1];
$(this).collision(".arrow,#arrows").each(function(){ //Many thanks to Selim Arsever for this fix!
var a_id = $(this).attr("id").substr(1);
var piece = arrows[a_id];
var a_v = piece[0];
if(a_v==1) {
var a_x = piece[2];
var a_y = piece[3];
var d_x = b_x-a_x;
var d_y = b_y-a_y;
if(d_x>=4&&d_x<=5&&d_y>=1&&d_y<=2) {
//bots - color, dir, x, y, z, spawned?, spawnerid, prevd
bots[b_id][7] = c_bot[1];
bots[b_id][1] = piece[1];
collision = true;
}
}
});
if(!collision) {
$(this).collision(".wall,#level").each(function(){
var w_id = $(this).attr("id").substr(1);
var piece = pieces[w_id];
var w_x = piece[1];
var w_y = piece[2];
d_x = b_x-w_x;
d_y = b_y-w_y;
if(b_d==0&&d_x>=4&&d_x<=5&&d_y>=27&&d_y<=28) { kill_bot(b_id); collision = true; } //4 // 33
if(b_d==1&&d_x>=-12&&d_x<=-11&&d_y>=21&&d_y<=22) { kill_bot(b_id); collision = true; } //-14 // 21
if(b_d==2&&d_x>=4&&d_x<=5&&d_y>=-9&&d_y<=-8) { kill_bot(b_id); collision = true; } //4 // -9
if(b_d==3&&d_x>=22&&d_x<=23&&d_y>=20&&d_y<=21) { kill_bot(b_id); collision = true; } //22 // 21
});
}
if(!collision&&c_bot[8]>GRID_MOVE) {
$(this).collision(".spawn,#level").each(function(){
var s_id = $(this).attr("id").substr(1);
var piece = pieces[s_id];
var s_x = piece[1];
var s_y = piece[2];
d_x = b_x-s_x;
d_y = b_y-s_y;
if(b_d==0&&d_x>=4&&d_x<=5&&d_y>=19&&d_y<=20) { kill_bot(b_id); collision = true; } //4 // 33
if(b_d==1&&d_x>=-14&&d_x<=-13&&d_y>=11&&d_y<=12) { kill_bot(b_id); collision = true; } //-14 // 21
if(b_d==2&&d_x>=4&&d_x<=5&&d_y>=-11&&d_y<=-10) { kill_bot(b_id); collision = true; } //4 // -9
if(b_d==3&&d_x>=22&&d_x<=23&&d_y>=11&&d_y<=12) { kill_bot(b_id); collision = true; } //22 // 21*/
});
}
if(!collision) {
$(this).collision(".exit,#level").each(function(){
var e_id = $(this).attr("id").substr(1);
var piece = pieces[e_id];
var e_x = piece[1];
var e_y = piece[2];
d_x = b_x-e_x;
d_y = b_y-e_y;
if(d_x>=4&&d_x<=5&&d_y>=1&&d_y<=2) {
current_bots++;
bots[b_id] = false;
$("#current_bots").html(current_bots);
$("#b" + b_id).setAnimation(exit[2], function(node){$(node).fadeOut(200)});
}
});
}
if(!collision) {
$(this).collision(".bot,#level").each(function(){
var bd_id = $(this).attr("id").substr(1);
if(bd_id!=b_id) {
var piece = bots[bd_id];
var bd_x = piece[2];
var bd_y = piece[3];
d_x = b_x-bd_x;
d_y = b_y-bd_y;
if(d_x>=0&&d_x<=2&&d_y>=0&&d_y<=2) { kill_bot(b_id); kill_bot(bd_id); collision = true; }
}
});
}
});
}
}, REFRESH_RATE);
非常感谢，
答案 0 :(得分：4)
有很多方法可以改进您的代码。
您几乎只使用 O（n 2 ）算法进行碰撞检测。您正在针对每个对象测试每个机器人。例如，如果您有20个机器人和30个障碍物，则计算机必须测试(19+18+...+1) + (20*30) = 190+600 = 790碰撞。
减少必要碰撞测试量的一种简单方法是将场分割成更小的部分。一种简单的方法是使用排序列表。我假设你的对象有矩形边界。只需创建左边缘的排序列表。
sorted_left_border = [40, 51, 234, 240];
这是使用的伪代码：
for bot in all_bots:
left = bot.x, right = bot.x + bot.width
top = bot.y, bottom = bot.y + bot.height
// binary search is O(log n)
colliding_objects = binary_search for range in sorted_left_border
for obj in colliding_objects:
// check the other 3 borders
有多种方法可以使用所有4个边框，但它们要复杂得多。
如果输入几乎已排序，有些sorting algorithms可以在 O（n）时间附近排序，但我只使用Javascript内置排序功能。 （如果这太慢了，你可以稍后自己写。）
在将DOM重新插入浏览器HTML之前，请尝试脱机更新DOM。您现在的方式是，每次更改内容时，浏览器都必须更新DOM。浏览器必须每帧更新DOM不超过1次。
要从DOM中提取元素，jQuery中有detach方法。一定要使用只匹配分离元素的jQuery选择器：
// remove from DOM, avoid updating it.
var theGame = $("#theGame").detach();
// select all bots and do the updating
var bots = $(".bot", theGame);
// reinsert
theGame.appendTo("body");
将jQuery与DOM元素一起使用是错误的技巧。 DOM不是为此而构建的。如果您只是针对现代浏览器进行编程，请考虑使用<canvas> element。
答案 1 :(得分：1)
我认为格奥尔格所描述的是this。它是一个java applet，因此它比javascript更快，但它说明了原理。您将注意到，距离仅在对象与网格中相邻8个方格中的对象之间进行计算。如果这8个方格中没有其他对象，则根本不检查该气泡是否存在碰撞。
这种技术建立在一个哈希表上，在javascript中实现起来不应该太难，因为每个js对象都是一个哈希表！