2013-07-04 129 views
1
var ExplodeFrame = 0; 
var ExplodeTimeout; 

所有这一部分都会检查玩家是否遇到熔岩。有用。请参阅评论部分致电动画似乎无法使setTimeout正常工作?

if((Player.x > Lavas[i].x && Player.x < (Lavas[i].x + Lavas[i].width)) || (Player.x + Player.width > Lavas[i].x && Player.x + Player.width < (Lavas[i].x + Lavas[i].width))) 
    { 
    if((Player.y > Lavas[i].y && Player.y < Lavas[i].y + Lavas[i].height) || (Player.y + Player.height > Lavas[i].y && Player.y + Player.height < Lavas[i].y + Lavas[i].height)) 
    { 
    ExplodeTimeout = setTimeout(DrawSpawnAnimation, 200); //this part is new and might not work 
    Player.jumping = false; 
    Player.velY = 0; 
    Player.velX = 0; 
    Player.x = Player.spawnX; 

    Player.y = Player.spawnY; 
    Player.playerColour = Player.colour; 

    } 
    } 


} 

这种方法似乎不适用于我?

function DrawSpawnAnimation() 
{ 

ExplodeFrame++; 
alert("current frame" + ExplodeFrame); 
var explodeX = Player.x - 50; 
var explodeY = Player.y - 50; 

if(ExplodeFrame == 1) 
{ 
ctxAnimation.drawImage(spriteSheet,0,2740,100,100,explodeX,explodeY,100,100); 
} 
else if(ExplodeFrame == 2) 
{ 
ctxAnimation.drawImage(spriteSheet,100,2740,100,100,explodeX,explodeY,100,100); 
} 
else if(ExplodeFrame == 3) 
{ 
ctxAnimation.drawImage(spriteSheet,200,2740,100,100,explodeX,explodeY,100,100); 
} 
else if(ExplodeFrame == 4) 
{ 
ctxAnimation.drawImage(spriteSheet,300,2740,100,100,explodeX,explodeY,100,100); 
} 
else if(ExplodeFrame == 5) 
{ 
ctxAnimation.drawImage(spriteSheet,400,2740,100,100,explodeX,explodeY,100,100); 
} 
else 
{ 
ExplodeFrame = 0; 
clearTimeout(ExplodeTimeout); 
    ctxAnimation.clearRect(0,0,canvasWidth,canvasHeight); 
} 

}

它应该显示在5帧的第二动画直到其结束。这就是我想要做的。

+0

DrawSpawnAnimation中的警报是否触发? – Anthony

+0

我不能推荐更多,学习使用适当的调试器。它允许您在执行代码时逐行浏览代码,并确切了解发生了什么。关于调试的Google Chrome开发人员工具:https://developers.google.com/chrome-developer-tools/docs/javascript-debugging –

+0

我建议您还要学习如何“接受”人们的答案(点击勾号大纲)你已经提出了6个问题,并且都没有接受。 – Jarrod

回答

0

setTimeout运行您的代码一次。看来你正在寻找每200毫秒运行一次的东西。为此,请使用setInterval。它以您尝试使用setTimeout的方式工作。当您使用setInterval,您可以通过调用clearInterval

1

setTimeout清除它只是触发一个函数一次:

http://www.w3schools.com/jsref/met_win_settimeout.asp

这听起来像你要找的是什么setInterval

http://www.w3schools.com/jsref/met_win_setinterval.asp

+0

请不要发布w3schools的东西,想知道为什么?阅读本文:http://www.w3fools.com/ – intuitivepixel

+0

我已将它设置为间隔,仍然没有! – Sam

+0

@intuitivepixel Ha !! w3schools对这个简单的东西并不是那么糟糕。但是w3fools确实是一个很好的观点。不会再做。 – nicholas

0

首先,用

替换if语句
ctxAnimation.drawImage(spriteSheet,(ExplodeFrame - 1) * 100,2740,100,100,explodeX,explodeY,100,100); 

其次,您只调用DrawSpawnAnimation方法一次。为了实际看到动画,你应该多次调用它。这样做是通过在DrawSpawnAnimation的末尾添加另一个超时设置来实现的:

function DrawSpawnAnimation() 
{ 
    ... 
    if (ExplodeFrame < 5) 
    { 
     setTimeout(DrawSpawnAnimation, 20); 
    } 
}