Code With Design

Introduction

If you are interested in writing a game in javascript using the new canvas tag than look no further. In this lesson I will be going over the game loop and what is required to get started with your own. If you have not yet gone through the introduction to the canvas you should click here. It only takes a couple minutes to go through and it will have the required code for this lesson.

The Basic Loop

In order to create a loop we are going to base it off of seconds using the set_interval() function. This function will allow us to call on a function x times per second. This is a good function to use when making a loop based game because it will wait for the function to finish before calling on it again even if the time is exceeded.

1
2

// call on a function every 100 milliseconds.
setInterval(“methodName()”, 100);

Drawing to the canvas

For now we are going to simply draw to the canvas using a draw function. You can call on a class.method in the set interval function. In the draw function that we are creating, we are going to have to draw something to the canvas. In the following code we will draw a line from point a to point b.

1
2
3
4
5
6
7

function draw() {
ctx.strokeStyle = “#333333”;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(60, 50);
ctx.stroke();
}

If the setInterval function has been properly setup, to take the draw function, than you should see a line appear on the canvas. Now lets get a little wild and crazy and give that line some movement.

Layers

The canvas works in layers. If you draw something to it, the item will stay until something has been drawn over it. Because of this the canvas needs to be reset and will need to be reset and have everything drawn back on to it in layers from the background to the foreground.

In a two dimensional game you are going to want to draw the items from the bottom up. The items should be drawn in the following order if you are looking at the ground from a birds eye view.

Draw the dirt
Draw the grass
Draw the trees
Draw the birds

Movement

Create public variables for x position, y position and counter.

1
2
3

var posX = 50;
var posY = 50;
var counter = 0;

Within the draw function we are going to add the following code which will increase the counter and set the position of the line. In the draw method we will need to redraw the background to clear the canvas. Add the following code to the function and place it above everything else within the code block.

1
2

ctx.fillStlye = “#ffffff”;
ctx.fillRect(0,0,800,400);

This will clear the previous items on every draw event. Now we can draw the items onto this layer by adding some logic to the draw function and changing the lineTo using the x and y positions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function draw() {
 
// redraw the background.
ctx.fillStyle = “#ffffff”;
ctx.fillRect(0,0,800,400);
 
// increase the counter
counter++;
 
// reset the counter so the line doesn’t get out of hand.
if(counter == 100) {
counter = 0;
}
 
// Stroke the line.
ctx.strokeStyle = “#333333”;
ctx.beginPath();
ctx.moveTo(posX,posY);
ctx.lineTo(posX + counter, posY + counter);
ctx.stroke();
}

You will now have a moving line on the canvas that will reset every 100 updates.