JS代码中的奇怪错误（可能是某些可变状态缓存）

Question

我正在尝试使用JS和Canvas制作小型游戏。它是西门子手机的旧版“ Stack Attack” 2D平台程序的实现。

因此，我实现了一些基本逻辑来生成，移动和抛出盒子。

然后，我遇到了一个非常奇怪的行为：有时盒子会在很小的时间内被扔到同一位置，而我特殊的“保护”功能（该功能检查列是否在当前时刻是否“可用”）不会救命。因此，这些框重叠，并且彼此之间部分重叠。

我不知道如何有效地调试它，所以请您帮我解决这个错误。也许我的代码中有一个我没有注意到的简单的逻辑错误。

我在这里制作了一个Codepen：https://codepen.io/anon/pen/ajrqMB

将框向下移动的功能：

function moveColumnDown(pos) {
   var b = []
   for (var i = 0; i < boxes.length; i++) {
      if (boxes[i].x / cw == pos) {
         b.push(boxes[i])
      }
   }
   for (var i = 0; i < b.length; i++) {
      if (i == 0 && b[i].y < height-3-ch ||
          i > 0 && b[i].y + ch < b[i-1].y) {
         for (var j = i; j < b.length; j++) {
            b[j].y += spd_y
         }
         break;
      }
   }
   cols_state[pos] = (b.length == 0 || b[b.length-1].y >= y_offset+ch)
}

我正在看这段代码，无法理解顶部的重叠框是如何下降的：无论如何，i > 0 && b[i].y + ch < b[i-1].y其中ch是单个框高的条件{ ...

这行

cols_state[pos] = (b.length == 0 || b[b.length-1].y >= y_offset+ch)

函数末尾的

更新列状态。放下该框后，列状态将设置为false。我猜想在功能moveColumnDown()中的框向下移动一点之后，状态会更新-再次变为false。但是由于某种未知的原因，下一个盒子仍然被丢弃了。我认为当列状态仍为true时，它们可能会在相同的滴答处掉线-但即使在这种情况下，在false函数中分配drop()也应该可以缓解该问题。但是问题仍然存在。

更新：似乎模型中放置的盒子数量与显示的盒子的实际数量不匹配（这要大得多）。这也很奇怪。在这张图片上有46个盒子（不在传送带上），但是boxes[]数组包含53个元素。