Javascript Canvas Game Add Monster

Let’s add a monster to our javascript arena. You’ll need a monster.png image.

var monsterImage = new Image();
monsterImage.onload = function () {
	ctx.drawImage(monsterImage, 100, 100);
};
monsterImage.src = "images/monster.png";

Background Image

Next, let’s make them move. We’ll make it so we can control the hero’s movement. First, we need to update the images so they load every time the hero and monster move. Change the image code to:

var bgImage = new Image();
bgImage.src = "images/canvas_background.png";

var heroImage = new Image();
heroImage.src = "images/hero.png";

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

Basically removing the onload functions.

We will then reload the images every few miliseconds with:

var hero = {};
hero.height = 32;
hero.width = 32;
hero.x = (canvas.width / 2) - (hero.width / 2);
hero.y = (canvas.height / 2) - (hero.height / 2);

var monster = {};
monster.height = 32
monster.width = 30;
monster.x = 100;
monster.y = 100;

var render = function () {
	ctx.clearRect (0, 0, canvas.width, canvas.height);
	ctx.drawImage(bgImage, 0, 0);
	ctx.drawImage(monsterImage, monster.x, monster.y);
	ctx.drawImage(heroImage, hero.x, hero.y);
};

var main = function() {
	render();
};

setInterval(main, 100);

Now let’s make our monster move.

var moveMonster = function () {
	monster.x += monster.xDirection;
	monster.y += monster.yDirection;
	resetObjectLocation(monster);
};

var updateMonsterDirection = function () {
	monster.xDirection = ((Math.random() < 0.5)? -1 : 1) * Math.random() * monster.speed;
	monster.yDirection= ((Math.random() < 0.5)? -1 : 1) * Math.random() * monster.speed;
};

var resetObjectLocation = function(object) {
	if(object.y < 0) {
		object.y = 0;
	}
	if(object.x < 0) {
		object.x = 0;
	}
	if(object.y > (canvas.height - object.height)) {
		object.y = canvas.height - object.height;
	}
	if(object.x > (canvas.width - object.width)) {
		object.x = canvas.width - object.width;
	}
}

And add the following to the main method.

moveMonster();

Add the following to the monster array.

monster.speed = 15;
monster.xDirection = monster.speed;
monster.yDirection = monster.speed;

This goes at the bottom of your file to tell the monster to change direction every half second

setInterval(updateMonsterDirection, 500;

But what if we wanted to control the hero using the arrow keys? It would be the same logic just based on input from the keyboard. Here’s how we receive input from the keyboard.

var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);

var moveHero = function () {
	if(38 in keysDown) { // Player holding up
		hero.y -= hero.speed;
	}
	if(40 in keysDown) { // Player holding down
		hero.y += hero.speed;
	}
	if(37 in keysDown) { // Player holding left
		hero.x -= hero.speed;
	}
	if(39 in keysDown) { // Player holding right
		hero.x += hero.speed;
	}
	resetObjectLocation(hero);
};

Don’t forget to add speed to your hero array.

hero.speed = 15;

And add moveHero method call to your main method.

moveHero();

You can download this example.