html 5 canvas：在游戏中使用绘制图像使循环变得非常慢

Question

我正在制作一个基于绘制图像的游戏，并在每一部分时间清除它。 我开始：

var peng = new Image();

和然后：

  peng.onload = function() {
context.drawImage(peng, pengXPosition, pengYPosition, pengWidth, pengHight);
};

并在循环：

var i=0;
function pengMoveRight(){ i++;if(i==1){peng.src = 'images/1.png';}else if(i==2)
       {peng.src = 'images/2.png';} else if(i==3){peng.src = 'images/3.png';}else if(i==4){
        peng.src = 'images/4.png';}else if(i==5){peng.src = 'images/5.png';}else if(i==6){
        peng.src = 'images/6.png';i-=6;}}

当我运行它时，它在IE上工作得很好但是在chrome和mozilla上它太慢而且角色即将消失..我使用了setinterval（）;一次和window.requestAnimationFrame（）;一次，他们两个都会导致同样的问题。 我该怎么做才能让它顺利移动？ 这是完整的脚本http://mark-tec.com/custom%20game/

Answer 1

尝试创建多个Image对象，而不是更改源代码。这样，drawImage调用始终可以使用预先加载的图像。

Answer 2

您需要预加载所有图像或使用精灵方法（所有图像打包到单个精灵中），以避免因图像加载而导致的初始延迟。

但是，在初始问题之后，一旦所有图像都被缓存，您的示例应该可以运行。