Canvas 重新启动KineticJS游戏时,画布/层正在堆叠。导致性能问题。

Canvas 重新启动KineticJS游戏时,画布/层正在堆叠。导致性能问题。,canvas,kineticjs,Canvas,Kineticjs,我使用KineticJS制作了一个游戏,并添加了一个标准的html按钮,允许用户重新启动游戏。我基本上将所有游戏代码包装在一个函数中,然后将函数附加到按钮上。它可以工作,但每次重新加载游戏时,速度都会明显变慢。我认为这是因为画布和层每次都被重新生成,并且被堆叠在彼此的顶部 我尝试将destroy添加到click处理程序中,但它只是冻结了页面。我认为这可能是某种范围界定问题,与同时创建和删除画布有关 如果有人能看看我的JSFIDLE,看看他们是否能找到一种方法,让用户重新启动游戏而不影响性能,我将

我使用KineticJS制作了一个游戏,并添加了一个标准的html按钮,允许用户重新启动游戏。我基本上将所有游戏代码包装在一个函数中,然后将函数附加到按钮上。它可以工作,但每次重新加载游戏时,速度都会明显变慢。我认为这是因为画布和层每次都被重新生成,并且被堆叠在彼此的顶部

我尝试将destroy添加到click处理程序中,但它只是冻结了页面。我认为这可能是某种范围界定问题,与同时创建和删除画布有关

如果有人能看看我的JSFIDLE,看看他们是否能找到一种方法,让用户重新启动游戏而不影响性能,我将非常感谢您的输入

谢谢

特定的jQuery调用位于代码末尾:

 $('#restart').on('click' , function(){
restart();
});

您定义了一个单独的重启函数,在该函数中,始终使用vars来存储创建的对象,这是干净的。我敢打赌,当垃圾收集器不再使用时,您依赖于这些闭包来清除垃圾。 然而,即使在考虑重新启动游戏之前,您也应该想一想:当第一次调用restart时,所有的初始化过程都完成了,然后函数返回:为什么不在那一点上重新收集所有对象? 这是因为在这些对象和全局对象之间仍然有3种类型的链接: -DOM内容。contentStage是链接到“content”div的对象。 -事件处理程序。老鼠 -计时器。设置间隔

当您再次调用restart时,您将堆积新的内容/处理程序/计时器,而旧的内容/处理程序/计时器将无法回收:例如,您将有更多的和函数被setInterval调用,因此速度会减慢

==>您需要添加一个clear函数来清除DOM、删除鼠标处理程序和清除所有间隔。 只有在清除后,您才能安全地调用restart以拥有一个全新的游戏。
当心不要引用任何对象。

你的小提琴对我不起作用。无论如何,我会通过跟踪游戏中所有元素的位置并将它们重置为初始值来解决这个问题。不需要创建所有元素和周围的一切。是的,您的小提琴缺少必要的链接文件:-