Javascript Canvas Game Create a Page

First create an index page. You can name this file anything you want as long as it is saved as an html extension. This is where your game lives. You can see it by opening your index page.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
		<style>
			html,body { margin: 0px; padding: 0px; }
			body { background-image: url(images/background.jpg); }
		</style>
	</head>
	<body>
		<script src="js/main.js"></script>
	</body>
</html>

It won’t look like much of anything yet. Let’s fix that by adding a background image. Your index page says the background image is located at images/background.jpg. So let’s create a folder in the same place as your index page and add a background.jpg image in it.

The game will be built on a javascript engine using acanvas. First add a js folder and put a main.js file in it. Adding the following with create a canvas with dimensions 979pixels X 606pixels and add it to the index page.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 979;
canvas.height = 606;
document.body.appendChild(canvas);

The following will create a background image and draw it on the canvas.

var bgImage = new Image();
bgImage.onload = function () {
	ctx.drawImage(bgImage, 0, 0);
};
bgImage.src = "images/canvas_background.png";

Background Image

You’ll notice that there is an onload function called. It takes time for javascript to load up the background image.

You can download this example.

Javascript Canvas Game Add a Hero

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

var heroImage = new Image();
heroImage.onload = function () {
	ctx.drawImage(heroImage, 474, 287);
};
heroImage.src = "images/hero.png";

Background Image

You can download this example.

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.

Javascript Canvas Game Slay Monster

Slaying monsters in our javascript arena.

var slayMonster = function() {
	if(isTouching(hero, monster)) {
		monster.x = 100;
		monster.y = 100;
	}
};

var isTouching = function(a, b) {
	var ret = false;
	if((a.x <= (b.x + b.width)) && (b.x <= (a.x + b.width)) && (a.y <= (b.y + b.height)) && (b.y <= (a.y + b.height))) {
		ret = true;
	}
	return ret;
};

Slay monster function simply checks if the hero and monster are touching and then respawns the monster at location 100, 100.

The slayMonster function should be called in the main function.

slayMonster();

It’s more fun if we had some stats on how many monsters we have slain. Add a variable to the hero array to keep track of how many monsters have been slain.

hero.monstersSlain = 0;

Now in the slayMonsters if isTouching block add an incrementer.

++hero.monstersSlain;

We need to show this on the screen. Add an HTML element to store the stat in. We’ll also need jQuery, a helpful javascript library.

<div id="monsters_slain_header">
	<span>Monsters Slain: </span><span id="monsters_slain">0</span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

To push the monsters slain count to the html element, add this to your render function.

$('#monsters_slain').html(hero.monstersSlain);

Let’s add some styling to our stat bar.

#monsters_slain_header { color: white; font-weight: bold; font-size: 18px; margin: 10px 15px; }

You can download this example.

Javascript Canvas Game Monster Gates

Monsters should spawn randomly at gate opening in arena. First, add the gates array.

var gates = new Array(
		new Array(canvas.width / 2, 0),
		new Array(canvas.width, canvas.height / 2),
		new Array(canvas.width / 2, canvas.height),
		new Array(0, canvas.height / 2)
	);

Then we want to spawn a monster randomly.

var spawnMonster = function() {
	gate = Math.floor(Math.random() * 4) + 1;
	monster.x = gates[gate - 1][0];
	monster.y = gates[gate - 1][1];
};

And change this in the slayMonster function

monster.x = 100;
monster.y = 100;

for

spawnMonster();

Added bonus, we can have the monster start at a spawn point by adding.

spawnMonster();

And change the monster array values.

monster.x = -100;
monster.y = -100;

This means that the monster will be drawn off the screen before it is spawned.

You can download this example.

Javascript Canvas Game Pokemon

Wouldn’t it be more fun if we were dealing with Pokemon instead of an Ogre?

Background Image

These are the image dimensions for the pokemon.

var pokemon_dimensions = new Array(
	new Array(27, 32),
	new Array(27, 32),
	new Array(29, 32),
	new Array(27, 32),
	new Array(21, 32),
	new Array(32, 24),
	new Array(31, 32),
	new Array(32, 30),
	new Array(30, 32),
	new Array(27, 32),
	new Array(26, 32),
	new Array(28, 32),
	new Array(30, 32),
	new Array(32, 24),
	new Array(32, 30),
	new Array(24, 32),
	new Array(32, 26),
	new Array(18, 32)
);

Add this to your spawnMonster function.

pokemon = Math.floor(Math.random() * 18) + 1;
monsterImage.src = "images/pokemon/"+pokemon+".png";
monster.width = pokemon_dimensions[pokemon - 1][0];
monster.height = pokemon_dimensions[pokemon - 1][1];

Let’s rename some methods. monstersSlain should be pokemonCaught. slayMonster should be catchPokemon.

You can download this example.