Javascript HTML5游戏在浏览器中冻结

我正在尝试开发一个只使用HTML5和纯JavaScript的游戏（太空船和岩石）。 但游戏出乎意料地冻结了。在画布中生成岩石之前，一切都正常。 我无法纠正这个问题。
这是我在代码笔中的游戏：

更新： 我已经更新了上一个问题的代码

但是导弹精灵与岩石碰撞时，岩石会不均匀地弹出

任何关于碰撞韩国和导弹的建议。 或更好的算法，用于在精灵组中进行碰撞检测。

此循环永远不会结束：）

while（距离<100）{
岩石位置=[随机（0，宽度），随机（0，高度）]；
}

距离永远不会增加

此循环永远不会结束：）

while（距离<100）{
岩石位置=[随机（0，宽度），随机（0，高度）]；
}

---

距离永远不会增加

oooppppsss！！！。。。。。。。。。。。。。谢谢你@nils。。。我将循环更改为if条件。。。。你是个救生员……）我被这个循环激怒了……哈哈。。我现在非常高兴：dooopppsss！！！。。。。。。。。。。。。。谢谢你@nils。。。我将循环更改为if条件。。。。你是个救生员……）我被这个循环激怒了……哈哈。。我现在非常高兴：调整反馈——不是答案：为了更好的性能和更少的资源使用，您可以（1）将背景图像放在一个单独的div上，直接放在游戏画布后面（2）签出requestAnimationFrame而不是使用setInterval——RAF与显示刷新很好地同步。顺便说一句，很好的游戏图像！：-）谢谢对于反馈…@markEJust feedback——不是答案：为了更好的性能和更少的资源使用，您可以（1）将背景图像放在一个单独的div上，直接放在游戏画布后面（2）签出requestAnimationFrame而不是使用setInterval——RAF与显示刷新同步良好。顺便说一句，很好的游戏图像！：-）谢谢对于反馈…@markE

    while (distance < 100){
        rock_pos = [random(0, WIDTH), random(0, HEIGHT)];
    }