Learning To Fly

I'll start off with the basics: getting a player sprite on screen and moving it around with the keyboard. To do this I will use an HTML file with a canvas element as the screen and then a handful of JavaScript to set up and control everything. The player sprite will be an HTML image element that can then be copied to the canvas to display it, and user control will be taken care of by listening to keyboard events. There will be a timer to synchronise things and run the main game loop.

You can get the source code by looking at this tag in the git repository on BitBucket. If you clone the repo then you can just double click on the index.html file to play it in your browser. You can also follow this link (or click on the gif above) to run things directly in your browser without having to download anything first.

Let's talk through the code now. First, the HTML:

Pretty basic.

1. On line 3 it loads the JavaScript code
2. On line 6 a canvas element is created with the ID 'mainCanvas' (so that we can find it from the JavaScript later) and there's a small bit of CSS styling to give it a border
3. Finally, once everything has has completed loading, line 5 makes a call to the JavaScript function init()

The interesting stuff is in the JavaScript:

Since this is all new I'll go through the whole thing, but in future I'll only go through the significant changes. The code itself has two sections: setup and main loop.

Setup

At line 4 I create an HTML image for the player sprite. The image data is loaded from a string as a Base64 encoded image. In the future I'll create a resource manager to load images directly from PNG files but, for now, this method is much simpler to use. The init() function (remember: this gets called from the HTML) first finds the canvas element, then gets the context so that we can draw to it and finally it sets the canvas size to 640 pixels by 640 pixels. Next, on line 28, I create a gradient fill - I will use this to set a nice background for our playfield. Finally I set up some event listeners for keys on lines 33 and 34, and then start a timer to call the main loop at 30fps.

The key event listeners take care of knowing which keys are currently pressed. I create an object, called keys, and the listeners write to this by setting the key code of the keys to true as they are pressed, and to false when they are released. I am basically treating the object as a map (or a dictionary, or a key/value pair store - use whatever terminology you prefer) with the key code as a "key" and the state as the "value". This means that I can easily check if a key is pressed by looking at the keys object.

Main Loop

In the main loop I do two things: move the player and render the screen. Movement is done by checking for keys being held down using the keys array I mentioned above. Underneath that is the rendering code. This is also pretty basic: first clear the canvas by filling it completely with the gradient I set up earlier, then copy the player sprite image on top.

Wrapping Up

So there we go.. a simple, but fully working, first step: create a canvas, load a player sprite and move that sprite around the canvas using the arrow keys. You can clone the repo and run this yourself, or head straight on over to the online version here.

A lot of the code here isn't optimal right now and that's perfectly OK. I'm following a fairly agile approach here where I will write a "minimal viable solution" first, and then improve things over time as they need it. Some of the code in this step will get completely replaced later on, so there's no point in polishing it now. This sort of approach doesn't mean that you should write lazy, bad or poorly designed code, just that you shouldn't spend time over-engineering things in the beginning - keep your code modular and add functionality later if and when it's needed.

What's Next?

Next time I'll add bullets to the mix, and I'll wrap both bullets and players up into Object classes so that they'll be easier to manage. In the meantime, please leave me some feedback in the comments, or tell me what else you'd like to see added to the game next.