Wie kann ich mehrere Asteroiden machen, nachdem ich den Code für einen gemacht habe?

Question

Ich verwende JavaScript, um ein Spiel zu machen, und ich habe einen Asteroiden erstellt, der vertikal bewegt und eine zufällige x Position auswählt.

Wie kann ich mehrere Asteroiden erstellen, die zufällige Startpunkte auswählen?

Unten ist das, was ich derzeit für den Asteroiden haben:

//create asteroid 
asteroid={ 
    x:width/2, 
    y:-6, 
    min:1.6, 
    max:2.2, 
    speed:1.6 
} 

// move asteroid 
if(asteroid.y<height){ 
    asteroid.y+=asteroid.speed; 
}else{ 
    asteroid.y=-6; 
    asteroid.x=Math.random()*(width-0)-0; 
} 

//draw asteroid 
ctx.beginPath(); 
ctx.fillStyle = "#D9BA5F"; 
ctx.arc(asteroid.x, asteroid.y,3,0,2*Math.PI,false); 
ctx.closePath(); 
ctx.fill(); 

Answer 1

machen Ihren Umzug und Routinen in die Methoden der Asteroid Objekte zeichnen:

// Define an Asteroid constructor 
function Asteroid(width, height) { 
    this.width = width; 
    this.height = height; 
    this.x = width/2; 
    this.y = -6; 
    this.min = 1.6; 
    this.max = 2.2; 
    this.speed = 1.6; 
} 

// Move asteroid 
Asteroid.prototype.move = function() { 
    if(this.y < this.height) { 
     this.y += this.speed; 
    } else { 
     this.y = -6; 
     this.x = Math.random()*(this.width-0)-0; 
    } 
} 

// Draw asteroid 
Asteroid.prototype.draw = function() { 
    ctx.beginPath(); 
    ctx.fillStyle = "#D9BA5F"; 
    ctx.arc(this.x, this.y, 3, 0, 2*Math.PI, false); 
    ctx.closePath(); 
    ctx.fill(); 
} 

Dann können Sie mehrere Asteroiden erstellen:

var asteroids = []; 
// create 10 asteroids 
for(var i = 0; i < 10; i++) { 
    asteroids.push(new Asteroid(Math.random()*10, Math.random()*10)); 
} 

In Ihrer Hauptschleife bewegen und ziehen sie alle:

for(var i = 0; i < asteroids.length; i++) { 
    asteroids[i].move(); 
    asteroids[i].draw(); 
} 

---

Wie @blunderboy in den Kommentaren darauf hingewiesen hat, wird damit immer noch nichts randomisiert, was Sie nicht bereits randomisiert haben. Sie könnten den parametrisierten Konstruktor von Powerslave verwenden, bei dem die gesamte Randomisierung zur Instanziierungszeit stattfinden sollte, oder mindestens einen Teil der Zufallswerte innerhalb des Konstruktors generieren.

Auch die Übergabe des Canvas-Kontextobjekts, statt sich auf einen Abschluss zu verlassen, wäre bevorzugt.

Answer 2

Legen Sie es in einer for Schleife und setzen n auf die Anzahl der Asteroiden Sie wollen, wenn Sie die Funktion aufrufen.

Etwas wie folgt aus:

function createAsteroid(n) { 

    for (var i = 1; i < n; i++) { 

    //create asteroid 
    asteroid[i] = { 
     x : width/2, 
     y : -6, 
     min : 1.6, 
     max : 2.2, 
     speed : 1.6 
    } 

    // move asteroid 
    if (asteroid[i].y < height) { 
     asteroid[i].y+ = asteroid.speed; 
    } 
    else { 
     asteroid[i].y = -6; 
     asteroid[i].x = Math.random() * (width-0) -0; 
    } 
    return asteroid; 
} 

Ich habe diesen Code nicht getestet, aber die Logik-Idee dahinter ist Klang.

Answer 3

Erstellen Sie einen Konstruktor anstelle eines statischen JSON-Objekts.

function Asteroid(x, y, min, max, speed) { 
    this.x = x; 
    this.y = y; 
    this.min = min; 
    this.max = max; 
    this.speed = speed; 
} 

Dann können Sie einen Asteroiden erstellen wie folgt:

var asteroid = new Asteroid(width/2, -6, 1.6, 2.2, 1.6); 

Hinweis: dies zu tun, es nicht der optimale Weg ist, aber ein ziemlich einfacher, mit zu arbeiten. Für optimale Lösung würden Sie Verkapselung, Entwurfsmuster, etc.

EDIT: Siehe bfavarettos Antwort für weitere Details über die Einkapselung Asteroiden-bezogene Funktionalität und den gesamten Ansatz.