実行時にオブジェクトを作成して移動するには？

Question

私は自分のゲームアップデートでオブジェクトを作成して移動しようとしています。

function Banana() { 
    this.height = 1.96; 
    this.width = 3.955; 
    this.pos_x = CENTER - this.width/2; 
    this.pos_y = -475; 
    this.banana_image = banana_image; 
}; 

そして、これはMoveメソッドである：これは私のバナナのオブジェクトである

Banana.prototype.move = function(){ 
    if (this.pos_y > 500) { 
     //this.banana_image.parentElement.removeChild(this.banana_image); 
    } 
    this.height += ZOOM_RATE; 
    this.width += ZOOM_RATE; 
    this.pos_y += 3; 
    this.pos_x -= SIDES_RATE; 
}; 

これは、ゲームのアップデート一部です：

Game.update = function() { 

     this.player.move(); 

     //creating bananas 
     if (objs.lenght <= 0) { 
      this.banana = new Banana(); 
     } else { 
      for (i = 0; i < 10; i++) { 
       objs.push(new Banana()); 
      } 
     } 

     //moving bananas 
     for (i = 0; i < objs.lenght; i++) { 
      this.objs[0].move(); 
     } 


}; 

ゲームドロー：

function Game.draw = function() { 
    this.context.drawImage(road, 0,0, rw, rh); 
    this.context.drawImage(
     this.player.player_image, 
     this.player.pos_x, this.player.pos_y, 
     this.player.width, this.player.height); 
    this.context.drawImage(
     this.banana.banana_image, 
     this.banana.pos_x, this.banana.pos_y, 
     this.banana.width, this.banana.height); 
}; 

これを複数の人に聞いてみましたが、私はそれに対する答えを見つけることができません。

Answer 1

オブジェクトを10回移動して停止するとします。

まず、あなたはそれはあなたが常にゼロから描画を開始することキャンバスをクリアしているので、Game.drawの先頭に行を追加する必要がありますupdateとdrawの両方を呼び出すための関数を作る次に

this.context.clearRect(0,0,500,500); // clear canvas, adjust box size if needed 

、および

var count = 10; 

function updateAndDraw() { 
    Game.update(); 
    Game.draw(); 
    count--; 
    if (count) requestAnimationFrame(updateAndDraw); 
} 

// start moving: 
requestAnimationFrame(updateAndDraw); 

動きが小さい変更を行うことがmove方法を調整し、またはを使用するので、その後、お好みに合わせて速すぎて行くことがあります。再び呼び出される関数キュー​​の代わりに（ただし、アニメーションの流暢性が低下します）。あなたが最初に修正する必要がありますあなたのコード内のいくつかのエラーを持っている

注：

• lenghtがlength
• function Game.draw = function() {次のようになります。Game.draw前functionを削除します。
• ...コンソールで表示されるエラーメッセージを確認してください。