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

首先，你在哪里声明变量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 2

您应该遍历zombies数组，并对所有人调用drawImage()。

额外提示：请记住在所有迭代后更改x和y。

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事件才能在图像加载后启动游戏。
但是你应该明白这个问题：将问题分开（处理一个僵尸与僵尸的集合）会让你更快地达到你的目标。
通过这种简单的设计，您将能够轻松地为僵尸添加行为。

还有一个例子，我将添加seekBrain和walk行为：

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

所以要在每个xxx ms随机地召唤一个zombi，做类似的事情：

// 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（）;定期，你有一个游戏的开始！（我非常喜欢僵尸:-)）

Html5 canvas如何生成多个图像

3 个答案: