HTML5畫布繪製多個圖像

Question

我有這樣的代碼：http://jsfiddle.net/zyR9K/4/

var Enemies = { 
     x: 25, 
     y: 25, 
     width: 20, 
     height: 30, 
     speed: 0.5, 
     color: "#000", 
     draw: function() { 
      canvas.fillStyle = this.color; 
      canvas.fillRect(this.x+1, this.y, this.width, this.height); 
     }, 
     update: function() { 
      this.y += this.speed 
     } 
    }; 

我有一點問題，創造了一種算法，可以產生多個矩形WLD是這樣的：

任何人都可以幫助我嗎？

Answer 1

既然你想多個敵人（複數），你需要管理他們每個人的目標。我已經將你的'敵人'代碼移動到'Enemy'中，因爲它代表了一個單一的實例。然後創建和「敵人」的對象是持有幾個「敵人」對象的「集合」，並應用了「畫」與「更新」功能，每一個：

var canvas = $("#ContainerCanvas")[0].getContext('2d'); 
var CanvasWidth = 300; 
var CanvasHeight = 300; 
var FramePSet = 30; 

var frameRunner; 

var Enemies = { 
    collection: [], 
    draw: function() { 
     canvas.clearRect(0, 0, CanvasWidth, CanvasHeight); 

     for (var i = 0; i < this.collection.length; i++){ 
      this.collection[i].draw(); 
     } 
    }, 
    update: function() { 
     for (var i = 0; i < this.collection.length; i++){ 
      this.collection[i].update(); 
     } 
    } 
}; 

var Enemy = function() { 
    var model = {  
     x: 25, 
     y: 25, 
     width: 20, 
     height: 30, 
     speed: 0.5, 
     color: "#000", 
     draw: function() { 
      canvas.fillStyle = this.color; 
      canvas.fillRect(this.x+1, this.y, this.width, this.height); 
     }, 
     update: function() { 
      this.y += this.speed; 
     } 
    } 
    return model; 
}; 

function addEnemy(x, y){ 
    var nextEnemy = new Enemy(); 
    nextEnemy.x = x; 
    nextEnemy.y = y; 
    Enemies.collection.push(nextEnemy); 
} 

$(document).ready(function() { 
    addEnemy(25, 25); 
    addEnemy(60, 60); 
    addEnemy(95, 95); 

    frameRunner = setInterval(function() { 
     Enemies.update(); 
     Enemies.draw(); 
    }, 1000/FramePSet);  

}); 

你可以複製並粘貼到你的小提琴的js窗格。希望有所幫助。

Answer 2

var enemies = [ ]; 

var MAX_ROW = 5, 
    MAX_COL = 10; 

for(var r = 0; r < MAX_ROW; ++r) { 
    enemies[r] = [ ]; 
    switch(r) { 
    case 0: 
     for(var i = 6; i < 0; --i) { 
      enemies[0].push(new Enemy); 
     } 
     break; 
    case 1: 
     for(var i = 8; i < 0; --i) { 
      enemies[1].push(new Enemy); 
     } 
     break; 
    default: 
     for(var i = MAX_COL; i < 0; --i) { 
      enemies[r].push(new Enemy); 
     } 
    } 
} 

這？