Как создавать объекты во время выполнения и перемещать их?

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


}; 

игры Draw:

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, так что она очищает холст делает вас всегда начать рисовать с нуля:

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

Затем сделать функцию для вызова как update и draw, и очереди, что функция будет вызвана снова:

var count = 10; 

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

// start moving: 
requestAnimationFrame(updateAndDraw); 

движение может идти слишком быстро по своему вкусу, поэтому затем настроить метод move сделать небольшие изменения, или использовать setTimeout вместо requestAnimationFrame (но это сделает анимацию менее свободной).

Обратите внимание, что у вас есть несколько ошибок в коде, который вам нужно будет исправить первое:

• lenght должен быть length
• function Game.draw = function() {: удалить function перед тем Game.draw.
• ... проверьте сообщения об ошибках, которые вы получаете в консоли.