Time for yet another one of my canvas example posts, this time I thought I would make a canvas example that is a clone of the classic video game called kaboom that was ported to systems like the Atari 2600. This is a game that involves a character at the top of the screen called the mad bomber that moves back and forth across the the screen dropping bombs. The object of the game then is to catch these bombs rather than avoid them with a player controlled bucket that moves from one side to another. If one of the bombs is missed then all the bombs on the screen blow up, and you loose a bucket. You keep playing until you loose all you buckets and like many of these classic games the object is all about just getting a hight score and that is about it.
So it can be fun, and interesting to clone a game like this, and play around with all the little details.
I often start off many of my canvas example posts with a custom utility module that is used for this canvas example alone. Some times I might have reusable methods that are for this project alone as it grows, but often it is just a collection of usual suspects.
When it comes to this kaboom clone I know that I am going to want bounding box collision detection, the distance formula, and my usual method that helps me get a canvas relative pointer position. So the module is just composed of those methods for now.
Any kind of method that I might use across two or more modules should be parked here.
Now that I have the utils module that I want it is time to get into the kaboom module. This module will be used to store the state of all kinds of values that have to do with the game logic. It is packed with all kinds of private helper methods and objects, but only provides a few public methods and properties that are used by additional modules outside of it when it comes to my draw module, and the main.js file that I will be getting to later in this post.
I start out the module with the start of an IIFE that will then be closed at the bottom of the module. If you are not familiar with this kind of module pattern yet now might be the time to look into it deeper.
At the very top I have some Objects that I am using for certain fixed properties for the bomber and player objects as well as some button objects.
This is a little helper method that I have made that helps to clamp and object such as the bomber object to the limits of the range of movement. In this kind of game the bomber object and the player object are fixed to a single axis so i only need to clamp them to that axis.
When it comes to display objects or sprites if you prefer for kaboom there us the bomber, the player, and then the bombs. Each of these display objects have there own movement helpers because of the differences in how they move, and how they are controlled.
When it comes to my move player helper method I worked out an AI control feature. The AI is a very crude yet effective way of going about simulating machine assisted input for this game, and for the nature of the game doing so is not so hard to work out.
There will be a need for some methods that are used to spawn bomb objects, as well as find out if a bomb has hot the player or reached the other side of the canvas matrix.
Some methods for checking if the level is over, and if the player has lost.
Here I have the methods that are used to create a new state object, as well as set the state object to a given level.
The Public API is just an Object literal that will be used to return a collection of methods and references to certain other things of interest in this module that I think should be public.
There is of course the create state method that I will wan to make public so that I can create a state of the kaboom module from a main.js file. That state object can then be passed to other public methods that act on such a state object. Mainly the pointer start method, and the update method.
I have a utils.js, kaboom.js, and draw.js file out of the way so now it is time to pull all this together with a main.js file and some html. In this main.js file I will be creating and injecting the canvas element into the html pages that I will be using. Here in the main.js file I will also be attaching event handlers for the game that will be used to control the player buckets.
So this canvas example was a lot of fun to work on, and so far I have to say that this canvas example might be one of the best candidates so far when it comes to working on it more to turn it into something that might be considered and actual project of some kind. There are of course many other such canvas examples that are also competing for my attention so this one might still end up being left stuck where it is.