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;
}
}

そのためのフィドル