Design Spin
Javascript

Making Games With Javascript.

By Jason Foster - Monday 8th May 2017


Share:

Last year I released my first game into the iOS app store. It was pretty much a straight up clone of the very well known 80's arcade game, Missile Command. If you're interested to play the final product on your iPhone, then head on over to the app store.

Screen Shot of Ballistic Defence

I wanted to put my Javascript skills into play here, but I also knew the game was relatively simple. I did not want to reach out for one of the many Javascript game frameworks available such as Phaser, PixiJs  or cocos2d and decided to write the whole thing from scratch.

Initially I thought the whole idea of writing a game in Javascript without the framework was maybe a little optimistic, but when you break it down it's not as difficult as you might think. At least it's not so difficult for a game as simple as this.

So where do we start? I'll outline briefly a few things you may need to produce a game of your own here. If you're interested to take it further you can look at an incomplete version of the final games code here

An Asset Manager


Games generally have a lot of graphics and sound, so firstly you're probably going to want a means of managing them and identifying when they're loaded and ready to roll!

As this particular game did not require a huge amount of resources I elected to use a caching strategy, which just loaded all my files in advance of starting the game.

In Javascript you can create a new Image, provide a source path and determine when it is loaded fairly easily.

Let image = new Image();

image.addEventListener('load', () => {
 // Your image loaded successfully
}, false );

image.addEventListener('error', () => {
 // Uh oh there was a problem loading the image!
}, false );

image.src = 'PATH_TO_YOUR_IMAGE';

this.cache[PATH_TO_YOUR_IMAGE] = image; // Cache the image in an object or array for later

Using the above technique, I created an AssetManager class which had a means of getting to an image through a function which I called 'getAsset'. Pass it the path and it will return you the image from the cache. When creating an AssetManager you pass it a callback function, which you can use to alert you when all assets are loaded, you can keep track of when all your assets are loaded in the load listener.

A Game Loop


For any action style video game there is a need to continuously perform updates, render the game assets and some games have physics updates etc... 

In order to do all that stuff in a game you need to code a loop. You maybe thinking about a while loop, using setTimeout or even setInterval. Using a while loop is a particularly bad idea as it will render your browser unresponsive very quickly. Using setTimeout and setInterval could work, but in modern browsers there is a better method for calling repeating updates, requestAnimationFrame. This function allows you to perform an operation in sync with the browsers native refresh.

For this particular game I created a game engine class that handled more than just the loop itself, here is the gist of how requestAnimationFrame is called within that class.

//Start function from GameEngine Class
start()  {
   let gameLoop = () => {
       this.loop();
       requestAnimationFrame(gameLoop, this.ctx.canvas);
   };
   gameLoop();
}

// Loop method from GameEngine Class
loop()
   this.clockTick = this.timer.tick();
   this.update(); // Perform your logic, adding entities etc..
   this.draw(); // Draw the new output
}


Rendering The Game


To render my game into a browser I decided to use the HTML5 Canvas element, it's not the only way to render games but is probably the easiest! On looking around the internet I have seen other games using DOM or SVG DOM, but canvas appears to be the most common approach.

Setting up a canvas is simple enough, place the element in your HTML:

<canvas id="view" width="640" height="320"></canvas>

Then within your Javascript you can access the element and rendering context:

let canvas = document.getElementById('view');
let ctx = canvas.getContext('2d');
let game = new Game();
game.init(ctx);

There is a whole heap of stuff you can do with the canvas API, for which you may want to refer to some documentation. For this game I was using a lot of what the API had to offer for drawing lines, rectangles, filling and stroking etc... But I guess for a more common sprite based game, your goto function is going to be drawImage. Where I was drawing sprites, I was able to access them directly from the Asset Manager class I mentioned previously:

//In my sprite or entities constructor
this.sprite = this.game.ASSET_MANAGER.getAsset('images/City.png');

//In my sprite or entities draw call
ctx.drawImage(this.sprite, this.x, this.y);

What Else Do I Need?


With those things in place you could produce a very simple game, but take some time to look at the code example, there are a few more things going on:

The main game loop has a timer, you can use this to measure how far your game has progressed at each update and move your sprites or entities based on this or perform certain logic at certain times.

My game had various scenes, a title scene, a play scene, a high score entry scene etc... It's probable that upon starting any game you make you don't want it going straight into a playing state. So you'll need to have a method for changing the scenes based on some state. Within my Game Engine class I simply created a variable that held the current scene, which also had update and draw methods of it's own. Within my Game Engine, when calling update and draw methods  I would also call the functions on the current scene.

Your game will need state and the ability to move between states. I said at the start I wrote the entire game from scratch, well that was a bit of a lie thinking about it more. To handle state I actually used a very small well written state machine library, see how I used it in the code example or find out more about the excellent state machine library which has been updated a few times since I wrote this game.

Why Not Give It A Go?


I have not covered everything, but if you use Javascript why not give writing a game a go? I had many hours of fun doing this, and although the game is simple it has had a reasonable response in the app store. I did not go into the detail of how I got the game into the iOS app store, that is another post for another time perhaps? Reach out if you're interested in that.

Share:

© Copyright 2018 Design Spin

50 Havelock Rd, Norwich, NR2 3HG.
Tel: 01603 250693 Mob: 07823440895