javascript - 在为一个小行星编写代码后，如何制作多个小行星？

Question

我正在使用 JavaScript 制作游戏，我创建了一颗垂直移动并随机选择 x 位置的小行星。

如何创建多个选择随机起点的小行星？

以下是我目前对小行星的了解:

//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 的参数化构造函数，其中所有随机化都应在实例化时发生，或者至少从构造函数中生成部分随机值。

此外，最好传入 Canvas 上下文对象而不是依赖闭包。