Let’s Build a Game! Part 1

June 29th, 2013

Game screen
Canvas has been something I wanted to make games with for a while now. It can be tough to put the time into it when you are focusing on other things, but every now and then I get to sit down and play around. But I have learned a few things, so lets see if I can help you too as well!.

So to begin, you can find an example of the game here https://github.com/Rchristiani/Space. I will be creating a separate repo for the game, so that you can see the code as it is from part to part. The game we will be creating will be very simple. We will have a few key features:

1. Player movement from input
2. Getting the player firing bullets!
3. Getting the enemy to fire back.

So in the end we will have a simple game. You have your players ship, it can move up and down and left and right etc, you can fire bullets, and we will have an enemy that can fire back at us. Super simple but pretty satisfying to get set up. Lets dive in!

All game files can be found Here. So that you can follow along, or create your own!

Setting up

For us to get started we will need a very simple set up.

We will need an index.html that looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sweet Space Game!</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<canvas id="canvas"></canvas>
	<script src="game.js"></script>
</body>
</html>

Pretty Straight forward. A simple HTML5 document with a canvas element, a css file for some small styles and our main game.js file. The game.js file is where we will be spending pretty much all of our time.

The CSS file is pretty straight forward as well:

body{
	margin: 0px;
	padding: 0px;
}
canvas {
	margin: 50px auto;
	display: block;
	width: 800px;
	height: 600px;
}

Nothing special there, just getting rid of some default styles and then centering and sizing the canvas. Done.

Now lets getting into the meat and potatoes! Drawing on the canvas!

Drawing to the Canvas

Getting something drawn on the canvas is simple. Lets start by setting up our file a little bit.

First we will create a Game object so that we do not pollute the global scope and we have a nice little container for all our logic and methods. 

//Main Game object
//Everything else will live inside here
var Game = {};
//Grab the canvas element
Game.canvas = document.getElementById('canvas');
//Set our context to be 2d
Game.ctx = Game.canvas.getContext('2d');

//Set some constants
Game.H = 600;
Game.W = 800;
//Set the height and width of the canvas
Game.canvas.height = Game.H;
Game.canvas.width = Game.W;

Game.update = function() {
	//Lets paint the background
	//Set the fill style to be one of those not quite black but cool colors
	Game.ctx.fillStyle = '#273636';
	//Paint the background 
	Game.ctx.fillRect(0,0,Game.W,Game.H);
};

//Call the update function
Game.update();

Now lets make a player object, in there we will hold the players x and y positions as well as height and width. We will place this just right after our update function.

Game.player = {
	x: 0,
	y: 0,
	w: 64,
	h: 64,
	paint: function() {
		Game.ctx.fillStyle = "#ffffff";
		Game.ctx.fillRect(this.x,this.y,this.w,this.h);
	}
}

One thing to note about this player object is that we have it’s paint method, what this lets us do is simply call Game.player.paint(); right after we finish painting the background.

Right now we are also going to go ahead and set up a game loop. We will use requestAnimationFrame. I will just use it straight, but a quick google will get you a pretty robust polyfill so that you can support older browsers.

It is pretty simple. The bottom of our file will now look like this:


//We will remove this call
//Game.update();
//And call it here instead
requestAnimationFrame(Game.update());

And to finish that off, we will update our update function to now call itself. 

Game.update = function() {
	//Lets paint the background
	//Set the fill style to be one of those not quite black but cool colors
	Game.ctx.fillStyle = '#273636';
	//Paint the background 
	Game.ctx.fillRect(0,0,Game.W,Game.H);
	//Paint the player
	Game.player.paint();
        //Now we call update from here to start looping 
	requestAnimationFrame(Game.update);
};

Now, a white square isn’t very exciting now it is? Nope! So lets change this up a bit to draw an image of a space ship! This is a pretty simple fix. In the project files on github you will find the image I am using, and check the README.md for info on where I got the assets.

Player object will now look like this:

Game.player = {
	x: 0,
	y: 0,
	w: 64,
	h: 64,
	//Add an image
	img: new Image(),
	paint: function() {
		//Set the src
		this.img.src = 'imgs/player_ship.gif';
		//Draw the image
		Game.ctx.drawImage(this.img,this.x,this.y,this.w,this.h);
	}
}

We now have a spaceship! On the screen!!! Pretty neat right?

In part 2 we will look at getting that player moving around, and use some particles to draw some stars in the background. We will also get our player firing. Check back soon!


Warning: count(): Parameter must be an array or an object that implements Countable in /home/ryanch6/public_html/wp-includes/class-wp-comment-query.php on line 405