Javascript 在为一颗小行星编写代码之后，如何生成多颗小行星？

我正在使用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();

//创建小行星
小行星={
x：宽度/2，
y:-6，
最低：1.6，
最高：2.2，
速度：1.6
}
//移动小行星
if（asteroid.y将其放入
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;
}

函数createAsteroid（n）{
对于（变量i=1；i

我还没有测试过这段代码，但它背后的逻辑思想是合理的。
移动并将例程绘制到小行星对象的方法中：

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

//定义小行星构造函数
功能小行星（宽度、高度）{
这个。宽度=宽度；
高度=高度；
这.x=宽度/2；
y=-6；
这个最小值=1.6；
这个最大值=2.2；
该速度=1.6；
}
//移动小行星
Asteroid.prototype.move=函数（）{
if（此.y<此高度）{
this.y+=this.speed；
}否则{
y=-6；
this.x=Math.random（）*（this.width-0）-0；
}
}
//画小行星
Asteroid.prototype.draw=函数（）{
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));
}

var小行星=[]；
//创造10颗小行星
对于（变量i=0；i<10；i++）{
小行星推（新小行星（Math.random（）*10，Math.random（）*10））；
}

在主循环中，移动并绘制它们：

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

for（var i=0；i


正如@blunderboy在评论中指出的，这仍然不会随机化您尚未随机化的任何内容。您可以使用Powerslave的参数化构造函数，其中所有随机化都应在实例化时进行，或者至少从构造函数中生成一部分随机值

此外，最好传入画布上下文对象而不是依赖闭包。
创建构造函数而不是静态JSON对象

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

然后可以按如下方式创建小行星：

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

注意：这不是最佳的解决方法，而是一种非常简单的方法。为了获得最佳解决方案，您可以应用封装、设计模式等

编辑：有关封装小行星相关功能和整个方法的更多详细信息，请参见bfavaretto的答案。
您不能有像
asteroid+i=something
这样的赋值，也不能返回结果对象。有几种方法。bfavaretto和我的回答。例如，使用您的方法，您可以简单地创建一个
asteroid
局部变量，存储对正在构建的小行星的引用，并在函数末尾返回
结果，或者（尽管我非常不建议使用globals），您可以将相关行更改为
asteroids[I]=一些东西
，当然，使用预先创建的
小行星
全局数组。……仍然存在一个问题，即小行星的值是硬编码的，而不是动态/随机的。此外，您在“构造”之后立即对小行星应用硬编码的运动。我希望我们的答案可以结合起来！：）@BFAVARETO哈哈哈，很好！：）感谢所有贡献的人！这是我真正需要的，因为我已经没有太多时间来完成这个游戏了。：）答案确实不错。OP想在随机位置绘制小行星，但你的代码也在随机分配小行星的尺寸。不是吗？看这里
新小行星（Math.random（）*10，Math.random（）*10）
5票……哈。