javascript - Javascript 画布动画停止使用控制键

Question

首先，我制作了一个动画

http://jsfiddle.net/hS2uF/

现在，我已经尝试在控制键中实现这个动画几个小时了，但我仍然不知道出了什么问题：/？（虽然它允许我控制对象..）

http://jsfiddle.net/7cua6/

任何帮助将不胜感激！:)

Answer 1

您需要更改以下几行

imgBackground.addEventListener('load', drawBg, false); // init to drawBg

和

function init(){
//drawBg(); remove this as you already calling on load of image
loop();
document.addEventListener('keydown', checkKeyDown, false);
document.addEventListener('keyup', checkKeyUp, false);  
}

现在动画可以工作了，但是您使用的是运行 60fps 的 requestAnimationFrame，因此您无法正确看到动画。所以如果你想使用 requestAnimationFrame 那么你需要有更多的精灵。

如果您无法提供更多精灵，则不要使用 requestAnimationFrame 而是使用 setTimeout（虽然不推荐）并使用您在第一个示例中使用的 10fps。

更新 ：

这是使您的动画正常工作的 小提琴

更多更新：

为了在移动蝌蚪时获得更好的 fps 改变这个

Player.prototype.checkDirection = function(){
if(this.isUpKey){
    this.drawY -= this.speed*this.width/10; // using width of the tadpole and 10fps
}
if(this.isRightKey){
    this.drawX += this.speed*this.width/10;
}
if(this.isDownKey){
    this.drawY += this.speed*this.width/10;
}
if(this.isLeftKey){
    this.drawX -= this.speed*this.width/10;
}
}

小提琴为此