複数の小惑星をコード化した後、どうすればいいですか？

Question

私はJavaScriptを使ってゲームを作っています。私は、垂直方向に移動し、ランダムなxポジションを選んだ小惑星を1つ作成しました。

どのようにランダムな開始点を選ぶ複数の小惑星を作成できますか？

//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

あなたの移動を作成し、小惑星のオブジェクトのメソッドにルーチンを描く：

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

次にあなたが複数の小惑星を作成することができます、あなたのメインループで

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

を移動し、それらのすべてを描く：

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

---

@blunderboyがコメントで指摘したように、これはまだランダム化していないものをランダム化しません。 Powerslaveのパラメータ化されたコンストラクタを使うことができます。ここでは、インスタンス化時にすべてのランダム化が行われるか、コンストラクタ内からランダムな値の少なくとも一部が生成されます。

また、クロージャに頼るのではなく、キャンバスコンテキストオブジェクトを渡すことが望ましいでしょう。

Answer 2

がforループでそれを入れて、関数を呼び出すときにあなたがしたい小惑星の数にnを設定します。以下は

は、私は現在、小惑星のために持っているものです。このような

何か：

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

私はこのコードをテストしていませんが、その背後にあるロジック-アイデアは音です。

Answer 3

静的なJSONオブジェクトの代わりにコンストラクタを作成します。これはそれを行うための最適な方法はありませんが、かなりシンプルなものはで動作するように：

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

注：

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

その後、次のように小惑星を作成することができます。最適解を得るには、カプセル化、デザインパターンなどを適用してください。

EDIT：小惑星関連の機能のカプセル化と全体のアプローチの詳細については、bfavarettoの答えを参照してください。