Javascript Html5画布如何生成多个图像

我在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);
}

---

只有一个僵尸被创建与此？我怎样才能让它产生更多

您应该遍历

僵尸

数组，并对每个人调用

drawImage（）

额外提示：记住在所有迭代之后更改
x
和
y
。
首先，您在哪里声明变量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);
}

var zombies=new Array（）；
对于（变量i=0；i<100；i++）{
var zombie=新图像（）；
zombie.src='images/monster.png'；
drawImage（zombie，Math.floor（（Math.random（）*100）+1），Math.floor（（Math.random（）*100）+1）；
僵尸。推（僵尸）；
}

这将创建100个僵尸，随机x和y位置介于1和100之间。实例化后，它会将每个僵尸添加到僵尸数组。
必须将僵尸与僵尸分开：

创建一个类来描述什么是僵尸，并且只有在您定义了一组可爱的男孩和女孩之后：

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

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

现在，您可能需要为您的收藏：

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

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

现在，如果我们猜测的是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（）；还有僵尸；在常规的基础上，你已经有了一场比赛的开始！（我非常喜欢僵尸：-）
也许可以使用
setInterval（）<代码>僵尸调度程序=设置间隔（召唤僵尸，x*1000）您可以更改随机定位代码，使其在画布阶段的范围内工作-即使用画布宽度/高度来确定生成的数字的限制。同样像@squeamish ossifrage所说的，你可以使用setInterval来决定何时调用这个函数，这样僵尸就不会一次全部被创建。谢谢你的回答，但是在for循环结束后还有一个问题，它似乎会摧毁它创建的僵尸的所有实例？？？我遗漏了什么吗？也许你可以链接到你调用的所有javascript的要点？在没有看到代码的情况下，我很难确定到底发生了什么。如果将它们从画布上移除，则它们很可能被画过，或者画布正在被清除。