Ducks: Make a javascript game in just 30 minutes with the HTML5 canvas

Photo by Charu Chaturvedi on Unsplash

Games: Evolving and Interactive Images

Most games are quite unique compared to other types of visual software. Images, and videos made by software are never changed after they are created. Whatever visual or auditory representation exists in say a video, will exist every time it is watched. Games, on the other hand, always display different behavior that is dependent on whatever interaction the a player has with a game. Instead of representing graphics in very stable, reusable formats, like .png or .mp4 , games draw graphics onto designated screen objects, like a canvas, very frequently. This frequency is also called the frames per second or frame rate. The goal of making any game at a high level is to create an internal state of elements and objects that the player can see and control.

Events are Objects

In Javascript, events are objects that are emitted and then caught by a listener. Almost any action performed on a browser window can generate an event. Each listener only listens for specific types of events, such as a click, or pushing a key on the key board down. This game will be based off using the arrow keys to move our duck around, thus we are most interested in key up and key down events.

window.addEventListener("keydown", controller.keyListener);
window.addEventListener("keyup", controller.keyListener);

Duck: The Game Element

The game implemented here allows moving a duck around a body of water. We can now check and read the input of a player using the arrows keys, but need to apply that input to the duck. The question is, how does a duck get drawn on the canvas ? In theory, it could be done through vector graphic commands, such as a path, arc, or series of lines. But that isn’t efficient for games. The internal objects of a game must be drawn at a very constant frequency, executing a bunch of stroke and fill commands on a canvas has a performance cost and limits the customization that can be achieved for characters. The best way to accomplish this for a 2D, top down game like this are sprites.

Putting it Altogether

Up to this point, we have went over the concept of events, their listeners, sprites, game objects, and drawing. The last, and final step, is to tie these elements together into a single graphic function that is called at certain frequency to readily paint the canvas. To do that, the overall state of our game, all of the objects, need to be sequestered into one single map, of the object name to the object body. Even though this particular game only has one object, it’s a good idea to understand code that can be used for more complex games with multiple objects.

  • Add some sort of object the duck should collect, and a points tracker.

Programmer, Artist, Published Author. I’m an engineer on a mission to write the fastest software in the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store