In this blog post we will discuss the basic structure of any game. Any game can be broken down into six simple steps: image loading, rendering, setting event listeners, setting timing intervals, resizing the canvas, and loading the audio files.
Here are some simple rules you can follow to structure your game:
- Load Images: You should have URLs (or Data URLs) with which to load your images. Each image should be given two properties: an src ("source") which is the URL to load it from, and an onload which is the name of the function that should be called once the image is done loading. Each image's onload property should call the loader function of the next image in the sequence, and only when all images are done loading should any rendering take place. This is to prevent errors caused by using drawImage with an image that doesn't yet exist.
- Render Images: Create a function that renders everything you want to display on the Canvas. Generally, this function will have no inputs and no return type.
- Set Event Listeners: Any events that are controlled by the user should be declared in this function. For those if you who are not familiar with event listeners, they are extremely useful when developing games. An event listener calls a function whenever some event occurs - e.g. when the user clicks the mouse or presses a key.
- Set Timing Intervals: Any dynamic event that is not controlled by the user needs to be called by setInterval. It executes a function at specified time intervals (in milliseconds). Make sure you set all the timing intervals for the game before you proceed any further.
- Rescale and Center Canvas: See our previous post for more detail regarding this topic.
- Audio: It's best to load your audio at the start of the game unless the user is on an iOS device. For iOS devices, please see our previous post for more details. In all cases, you should keep track of global variables which tell whether or not your audio is loaded, in order to avoid playing audio that does not yet exist.