Wie erstellt man Objekte zur Laufzeit und bewegt sie?

Question

Ich versuche, Objekte auf meinem Spielupdate zu erstellen und sie zu verschieben. Das ist meine Banane Objekt:

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

Und das ist die Move-Methode:

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

Dies ist der Spiel-Update Teil:

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


}; 

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

Ich habe versucht, dies an mehrere Personen zu stellen, aber ich kann keine Antwort dafür finden.

Answer 1

Angenommen, Sie möchten die Objekte 10 Mal verschieben und dann anhalten.

Zuerst müssen Sie eine Linie zu Beginn des Game.draw, hinzufügen, so dass es die Leinwand machen löscht immer Sie von Grund auf neu Zeichnen beginnen:

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

Dann wird eine Funktion sowohl nennen machen update und draw und diese Funktion Warteschlange wieder aufgerufen werden:

var count = 10; 

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

// start moving: 
requestAnimationFrame(updateAndDraw); 

die Bewegung gehen kann zu schnell nach Ihren Wünschen, so passen Sie dann die move Methode, um kleinere Änderungen vorzunehmen, oder verwenden Sie setTimeout statt requestAnimationFrame (aber das wird die Animation weniger flüssig machen).

Beachten Sie, dass Sie ein paar Fehler im Code haben, die Sie zum ersten Mal beheben müssen:

• lenghtlength
• function Game.draw = function() { sein sollte: entfernen function vor Game.draw.
• ... überprüfen Sie die Fehlermeldungen, die Sie in der Konsole erhalten.