JavaScript Canvas矩形生成项目中矩形速度异常递增问题求助

嘿，我发现你的问题出在update函数里的循环逻辑上，咱们一步步拆解：

问题根源 #

看你的update函数代码：

update:function() { 
    rect.ctx.clearRect(0,0,500,500); 
    c_rect_arr(); 
    for(var i = 0;i<ct;i++) { 
        rect.ctx.fillRect(rect_arr_c[i].x,rect_arr_c[i].y,rect_arr_c[i].width,rect_arr_c[i].width); 
        move_rect(); // 这里是关键！
    } 
} 

你在遍历每个矩形的for循环内部调用了move_rect()，而move_rect()本身会遍历所有矩形并更新它们的位置。举个例子：

• 当有2个矩形时，for循环执行2次，每次都跑一遍move_rect()，相当于每个矩形的位置被更新了2次，速度看起来是原来的2倍；
• 当新增到3个矩形时，move_rect()会被执行3次，速度就变成了原来的3倍，以此类推——这就是为什么每次加新矩形，旧矩形的速度会“递增”。

修复方案 #

只需要把move_rect()的调用从for循环里移出来，放到循环外面，这样每次update周期里，所有矩形只被更新一次位置：

修改后的update函数：

update:function() { 
    rect.ctx.clearRect(0,0,500,500); 
    c_rect_arr(); 
    // 先更新所有矩形的位置（只执行一次）
    move_rect(); 
    // 再绘制所有矩形
    for(var i = 0;i<ct;i++) { 
        rect.ctx.fillRect(rect_arr_c[i].x,rect_arr_c[i].y,rect_arr_c[i].width,rect_arr_c[i].width); 
    } 
} 

额外优化建议 #

为了让代码更健壮，还有几个小细节可以调整：

• 避免全局变量：把rect_arr_c和ct放到rect对象内部，减少全局作用域污染，比如在rect里加this.rect_arr_c = []; this.ct = 0;，然后把所有相关引用改成rect.rect_arr_c和rect.ct；
• 矩形宽高一致性：你现在用fillRect时把宽和高都设成了width，如果是正方形没问题，但如果想做矩形，建议在c_rect里加height属性，改成rect.ctx.fillRect(..., rect_arr_c[i].height);；
• 更准确的碰撞边界：当前的碰撞检测只判断了x和y，没有考虑矩形本身的尺寸，会导致矩形一半超出画布才反弹。可以把判断条件改成：

  if(rect_arr_c[i].x < 0 || rect_arr_c[i].x + rect_arr_c[i].width > 500) {
      rect_arr_c[i].vx *= -1;
  }
  if(rect_arr_c[i].y < 0 || rect_arr_c[i].y + rect_arr_c[i].height > 500) {
      rect_arr_c[i].vy *= -1;
  }
  

内容的提问来源于stack exchange，提问作者OsmanB