Làm cách nào để tạo nhiều tiểu hành tinh, sau khi tạo mã cho một tiểu hành tinh?

Question

Tôi đang sử dụng JavaScript để tạo trò chơi và tôi đã tạo một tiểu hành tinh di chuyển theo chiều dọc và chọn vị trí x ngẫu nhiên.

Làm cách nào để tạo nhiều tiểu hành tinh chọn điểm xuất phát ngẫu nhiên?

Dưới đây là những gì tôi hiện có cho các tiểu hành tinh:

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

Hãy di chuyển của bạn và vẽ thói quen vào các phương pháp của các đối tượng tiểu hành tinh:

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

Sau đó, bạn có thể tạo nhiều tiểu hành tinh:

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

Trong vòng lặp chính của bạn, di chuyển và vẽ chúng tất cả:

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

---

Như đã chỉ ra bởi @blunderboy trong các ý kiến, điều này vẫn không ngẫu nhiên bất cứ điều gì bạn đã không được ngẫu nhiên. Bạn có thể sử dụng hàm khởi tạo parametrized của Powerslave, trong đó tất cả ngẫu nhiên nên diễn ra tại thời điểm khởi tạo, hoặc tạo ra ít nhất một phần của các giá trị ngẫu nhiên từ bên trong hàm tạo.

Ngoài ra, việc chuyển trong đối tượng bối cảnh canvas thay vì dựa vào đóng cửa sẽ được ưu tiên.

Answer 2

Đặt nó trong một vòng lặp for và thiết lập n đến số lượng tiểu hành tinh mà bạn muốn khi gọi hàm.

Something như thế này:

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

tôi đã không kiểm tra mã này, nhưng logic-ý tưởng đằng sau nó là âm thanh.

Answer 3

Tạo hàm tạo thay vì đối tượng JSON tĩnh.

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

Sau đó, bạn có thể tạo một tiểu hành tinh như sau:

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

Lưu ý: đây không phải là cách tối ưu để làm việc đó, nhưng một trong khá đơn giản để làm việc với. Đối với giải pháp tối ưu, bạn sẽ áp dụng đóng gói, mẫu thiết kế, v.v.

EDIT: Xem câu trả lời của bfavaretto để biết thêm chi tiết về đóng gói chức năng liên quan đến tiểu hành tinh và toàn bộ cách tiếp cận.