Html5 canvas如何生成多個圖像

Question

我在html5畫布上製作了一個簡單的殭屍遊戲，想知道如何在隨機的地方每x秒創建一個殭屍？到目前爲止，我有

var zombies = new Array(); 

function SummonZombies(){ 
    TotalZombies++; 
    zombies[TotalZombies] = new Image(); 
    zombies[TotalZombies].src = 'images/monster.png'; 
    ctx.drawImage(zombies[TotalZombies], zombie_x, zombie_y); 
} 

只有一個殭屍正在創建這個？我將如何讓它產生更多。

Answer 1

你應該遍歷zombies數組，並調用drawImage()大家。

額外提示：記得在全部迭代後更改x和y。

Answer 2

首先，你在哪裏聲明變量TotalZombies？

嘗試這樣：

var zombies = new Array(); 

for (var i = 0; i < 100; i++) { 
    var zombie = new Image(); 
    zombie.src = 'images/monster.png'; 
    ctx.drawImage(zombie, Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1)); 
    zombies.push(zombie); 
} 

這將創建100個殭屍，隨機x和y位置1和100之間將他們已實例化後，每個殭屍添加到殭屍陣列。

Answer 3

你必須從你的殭屍分離Zombi：
創建一個類，將描述一個Zombi是什麼，只有經過你可以定義這樣可愛的傢伙和女孩的集合：

// This Class defines what a Zombi is. 
function Zombi(x,y) { 
    this.x = x; 
    this.y = y; 
} 

var ZombiImage = new Image(); 
ZombiImage.src = "images/monster.png"; 

// image of a zombi is shared amongst all zombies, so it is 
// defined on the prototype 
Zombi.prototype.image = ZombiImage; 

// draw the zombi on provided context 
Zombi.prototype.draw = function(ctx) { 
     ctx.drawImage(this.image, this.x, this.y); 
} 

現在對於集合：

// This class defines a collection of Zombies. 
function Zombies() { 
    this.zombies = []; 
} 

// summons a zombi at a random place. returns the summoned zombi. 
myZombies.prototype.summon() { 
    var randX = Math.random()*100; 
    var randY = Math.random()*100; 
    return this.summonAt(randX, randY); 
} 

// summons a zombi at x,y. returns the summoned zombi. 
myZombies.prototype.summonAt = function (x,y) { 
    var newZombi = new Zombi(x,y); 
    this.zombies.push(); 
    return newZombi; 
} 

// draws all zombies on provided context. 
myZombies.prototype.drawAll = function (ctx) { 
    var i=0; 
    var __zombies = this.zombies; 
    for (;i<__zombies.length; i++) { 
     __zombies[i].draw(ctx); 
    } 
} 

// collection of all zombies for your game. 
var zombies = new Zombies(); 

// here you can call zombies.summon(); or zombies.drawAll(); 
// and even zombies.summonAt(x,y); 

其實上面的代碼中被簡化：你必須處理圖像的onload事件來啓動圖像加載只有在比賽結束後。
但是你應該明白：分開問題（處理一個殭屍vs一個殭屍集合）會讓你更快達到目標。通過這種簡單的設計，您可以輕鬆地爲殭屍添加行爲。

只是一個例子中，我將添加seekBrain行走行爲：

// This Class defines what a Zombi is. 
function Zombi(x,y) { 
    this.x = x; 
    this.y = y; 
    this.dirX = 0 ; // direction X 
    this.dirY = 0; // direction Y 
    this.speed = 0.1; // common speed for all zombies 
} 

// have the zombi seek the brain located at (x,y) 
Zombi.prototype.seekBrain = function (x,y) { 
    this.dirX = (x - this.x); 
    this.dirY = (y - this.y); 
    // normalize direction 
    var norm = Math.sqrt(this.dirX*this.dirX + this.dirY*this.dirY ); 
    this.dirX/=norm; 
    this.dirY/=norm; 
} 

// Have the zombi walk in its current direction 
Zombi.prototype.walk = function() { 
     this.x += this.dirX * this.speed; 
     this.y += this.dirY * this.speed; 
} 

// image and draw remains the same 

現在你可能要爲您的集合：

// makes all zombies walk. 
    Zombies.walkAll = function() { 
    var i=0; 
    var __zombies = this.zombies; 
    for (;i<__zombies.length; i++) { 
     __zombies[i].walk(); 
    } 
} 

// constructor, summon, summonAt, and drawAll remains the same. 

所以召喚隨機地方zombi每xxx毫秒，做類似的事情：

// summons a zombi at a random place every 2 seconds (==2000 ms) 
setTimeInterval(2000, function() { zombies.summon(); }); 

現在，如果hero.x和hero.y是我們猜你可以做：

// Have a random zombi hunt for hero's brain every 2 seconds 
setTimeInterval(2000, function() { 
      var which = Math.floor(zombies.zombies.length * Math.random()); 
      zombies.zombies[which].seekBrain(hero.x, hero.y); 
}); 

只要你打電話給zombies.walkAll（）;和zombies.drawAll（）;定期，你已經開始了一場比賽！ （我喜歡這麼多的殭屍:-)）