Creating an HTML 5 Game – Part 2–Moving Stuff Around

Article
08/01/2011

Part 1 – The beginning
Part 2 – Moving stuff around – You Are Here!
Part 3- Simple Parallax Stars

Hi ok this is part 2 of the HTML 5 game tutorial, in this section we are going to cover some simple animation and how to handle input. So last time we showed you how to draw a square on the screen that didn’t do much. So now what:

Capture inputs
Update locations of items on the screen.

I think at this point we also need to start putting down some ground work on the engine. The first thing we need to get down is the game loop. The game loop allows your game to run whether the user has input or not. The game loop usually follows the flow of handle user input, update AI, update objects and then draw to the screen. Fairly simple and straight forward. The way we can do this is by using the setInterval function or by using a loop. I am going to use the setInterval function as it allows me to control how many frames per second i am drawing to tweak the performance. e.g.

var FPS = 30;
window.onload = init;

function init(canvas){
setInterval(update, 1000/FPS);
}

function update(){
// Handle input
// Update AI
// Handle Physics
// Update Objects
// Draw
}

We also need the canvas context so in the init function we are going to fetch the canvas object and store it in a global variable called context:

var elem = document.getElementById(canvasName);
if (elem && elem.getContext) {
context = elem.getContext("2d");
}

Replace the code inside the script block from part one with the above code. Now we have a loop lets go about handling input. Input can be a little bit of a pain as each browser does things a little differently. First off what’s common is how you bind to the input event. You use the following:

document.onkeydown = null;
document.onkeyup = null;
document.onkeypress = null;

You can bind to mouse events but for this game we are just going to bind to they keyboard. There are also a couple of different strategies when it comes to handling input. You can track which keys are currently pressed or you can just use the key press event depending if you want to handle single presses or if you want to hand if a key is held down. For this game because it is a side scroller we need to know if a key is down. I usually put the event binding in the init function but its not necessary So we have:

document.onkeydown = keyDownEvent;
document.onkeyup = keyUpEvent;

function keyDownEvent(evt){
}

function keyUpEvent(evt){
}

The evt is the event details where we can check which key is pressed. To check which key is pressed we check if the keyCode field is set else we use charCode. For some reason each browser does this differently. This is solved quite easily with the following line of code inside the handler:

var key = evt.keyCode != 0 ? evt.keyCode : evt.charCode;

What i do now is check which keys are pressed by using the key that is pressed and the event. I only track keys which I use for this sample but you could put in a custom key mapping solution here if you like.

switch (key) {
case 40:
downPress = true;
break;
case 38:
upPress = true;
break;
case 37:
leftPress = true;
break;
case 39:
rightPress = true;
break;
}

In the end the key event handling code looks like:

var downPress = false;
var upPress = false;
var leftPress = false;
var rightPress = false;

function keydownGame(evt) {
var key = evt.keyCode != 0 ? evt.keyCode : evt.charCode;

switch (key) {
case 40:
downPress = true;
break;
case 38:
upPress = true;
break;
case 37:
leftPress = true;
break;
case 39:
rightPress = true;
break;
}
}

function keyupGame(evt) {
var key = evt.keyCode != 0 ? evt.keyCode : evt.charCode;

switch (key) {
case 40:
downPress = false;
break;
case 38:
upPress = false;
break;
case 37:
leftPress = false;
break;
case 39:
rightPress = false;
break;
}
}

Fairly Straight forward, now what we need to do is track the position of the item we have and move it around based on the key presses. So lets go and create some variables to store position and the speed of movement and then make stuff move.

var x = 0;
var y = 0;
var speed = 10;

Then we need to add the key press handing to the update function. Here we just change the x and y positions by the speed.

if(downPress) y += speed;
if(upPress) y-= speed;
if(leftPress) x-=speed;
if(rightPress) x+=speed;

Then we add some bounds checking.

if(x<0) x = 0;
if(x>400) x = 400;

if(y<0) y = 0;
if(y>200) y = 200;

And lastly we handle the draw

context.clearRect(0,0,400,200);
if(context){
context.fillRect(x - 25,y -25,50,50);
}

You will see i use a new context function clearRect(0,0,400,200). This clears a region of your canvas, and is necessary if you are moving things around, I clear the whole canvas every time I draw.

So now we have simple animation being handled as well as input. Till the next tutorial

Later

Dave

Source Code:

<!DOCTYPE html>
<html>
<head>
<title>The Swarm</title>
<script>
var FPS = 30;
var canvasName = "myCanvas";
var x = 0;
var y = 0;
var speed = 10;
var context;
var downPress = false;
var upPress = false;
var leftPress = false;
var rightPress = false;

window.onload = init;

function init(){
var elem = document.getElementById(canvasName);
if (elem && elem.getContext) {
context = elem.getContext("2d");
}
setInterval(update, 1000/FPS);

document.onkeydown = keyDownEvent;
document.onkeyup = keyUpEvent;
}

function update(){
// Handle input
if(downPress) y += speed;
if(upPress) y-= speed;
if(leftPress) x-=speed;
if(rightPress) x+=speed;

if(x<0) x = 0;
if(x>400) x = 400;

if(y<0) y = 0;
if(y>200) y = 200;
// Update AI
// Handle Physics
// Update Objects
// Draw

context.clearRect(0,0,400,200);
if(context){
context.fillRect(x - 25,y -25,50,50);
}
}

function keyDownEvent(evt) {
var key = evt.keyCode != 0 ? evt.keyCode : evt.charCode;

switch (key) {
case 40:
downPress = true;
break;
case 38:
upPress = true;
break;
case 37:
leftPress = true;
break;
case 39:
rightPress = true;
break;
}
}

function keyUpEvent(evt) {
var key = evt.keyCode != 0 ? evt.keyCode : evt.charCode;

switch (key) {
case 40:
downPress = false;
break;
case 38:
upPress = false;
break;
case 37:
leftPress = false;
break;
case 39:
rightPress = false;
break;
}
}

</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="200">
This game was written for HTML5 compatible browsers.
</canvas>
</body>
</html>

Creating an HTML 5 Game – Part 2–Moving Stuff Around

Additional resources