How to draw multiple array entities on canvas

Question

I want to draw out all of the objects that I have in my zombielist. but I can't get it to work.

var FatZombieWikki = new Image();
FatZombieWikki.src = "FatZombieWikki.png";

var Zombie = function(x, y) {
  this.x = x;
  this.y = y;
  this.Draw = function(ctx) {
	ctx.drawImage(FatZombieWikki,200,ZombieY,50,50);
  }
  this.Update = function(){
	if(ZombieY < 900) {
	  ZombieY += 0.5;
	} 
  }
}

var z = new Zombie(100, 200,);
var zombieList = [];

for (var i = 0; i < 10; i++) {
  zombieList.push(new Zombie(40 * i, 100));
}

Assuming that ctx.drawImage(FatZombieWikki,200,ZombieY,50,50); works, you now have to call the Draw() method of all the zombies inside the array. — Shilly
– Shilly, Commented Apr 20, 2018 at 10:28
@Shilly do you mean inside the for loop or inside the zombielist array? + the ctx.drawImage(FatZombieWikki,200,ZombieY,50,50); works — wille771
– wille771, Commented Apr 20, 2018 at 10:35

Durga · Accepted Answer · 2018-04-20 10:57:13Z

3

call your draw function inside loop, after creating object.

DEMO

var ctx = document.getElementById('c').getContext('2d');
var FatZombieWikki = new Image();
FatZombieWikki.src = "//i.sstatic.net/ubK40.jpg";

FatZombieWikki.onload = function(){
  var zombieList = [];

  for (var i = 0; i < 10; i++) {
    zombieList.push(new Zombie(40 * i, 30*i));
    zombieList[i].draw(ctx);
  }
}
var Zombie = function(x, y) {
  this.x = x;
  this.y = y;
  this.draw = function(ctx) {
    ctx.drawImage(FatZombieWikki,this.x,this.y,50,50);
  }
}

canvas{
 border:2px solid #000
}

<canvas id='c' width=500 height=400></canvas>

answered Apr 20, 2018 at 10:57

Durga

15.6k2 gold badges31 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ilsotov · Accepted Answer · 2018-04-20 10:34:05Z

0

zombieList.forEach(zombie => zombie.Draw(ctx))

answered Apr 20, 2018 at 10:34

ilsotov

1621 silver badge9 bronze badges

3 Comments

wille771 Over a year ago

i get "ctx is not defined"

ilsotov Over a year ago

You said that ctx.drawImage(FatZombieWikki,200,ZombieY,50,50); works. You should use the same ctx here

Red Over a year ago

Explain why or how this awnser would fix the problem instead of only a piece of code without any explaination.

Collectives™ on Stack Overflow

How to draw multiple array entities on canvas

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related