简单的落沙玩具滞后

时间:2012-12-16 18:55:33

标签: javascript html5 canvas html5-canvas

好吧,经过三次查看这个问题并发现与我的问题没什么关系,我现在会问。


我很好奇并决定尝试看看我是否可以在画布上制作一个非常基本的落砂玩具。

我成功地做到了,因为“沙子”在地面上像它应该的那样堆积,但由于空气中颗粒和地面颗粒之间的撞击检测,它会非常快地减速。

See for yourself 编辑:可能是死链接,here's a JsFiddle instead

单击并按住鼠标按钮即可生成粒子。在你产生了大约200个颗粒之后,它会被瘫痪。

for(i in P){
    if(P[i].Y<canvas.height-1){
        P[i].Y++
        for(j in G){//This loop seems to cause the lag
            if(P[i].X==G[j].X&&P[i].Y==G[j].Y-1){
                G[G.length]={X:P[i].X,Y:P[i].Y}
            }
        }
    }else{
        G[G.length]={X:P[i].X,Y:P[i].Y}
    }
}

我只是想知道是否有一些我做得非常糟糕的事情;我很确定它不应该严重滞后。我也想知道是否有一种方法可以在没有嵌套循环的情况下完成它,但似乎我能够完成这项工作的唯一方法是检查每个单独的空气粒子对每个单独的地面粒子,这使它滞后。 / p>

如果链接被破坏,请说出这个词,我会在这里发布整个代码。

由于

1 个答案:

答案 0 :(得分:2)

更容易记住每堆沙子的高度(例如,对于每一列或画布中的x坐标)并检查它。您可以直接使用索引(应该与x坐标相同),因此您不需要遍历所有地面位置以找到正确的位置。

每个空中沙子只需要检查一次,即检查相应柱子的桩高。

此外,当沙子击中桩时,将其从“活动粒子”列表中移除,因此您不需要每次都检查它,使外部for - 循环尽可能小/短。

使用桩的高度重新绘制每一堆(当沙粒具有单独的颜色时不能很好地工作......)或者将不再落下的沙子放在单独的记忆结构中以正确地重新堆放。