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

此外，首选传递画布上下文对象而不是依赖于闭包。

Answer 2

创建构造函数而不是静态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的答案。

Answer 3

将其置于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;
}

我没有测试过这段代码，但背后的逻辑思想是合理的。

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

3 个答案: