Canvas Game examples
1 - Canvas games basics
Making a game can be very simple, depending of course on the nature of the game. Just about any canvas game is going to have at least some kind of state, a way to update that state by way of an update loop, and user input, and of course one or more methods that show the current state of things on the canvas. I will try to keep may of these examples as simple as possible, but game development can get very involved, even with things you would think world be stupid simple oddly enough.
2 - Canvas Game One - Simple moving box example
In this example I have worked out just a simple moving box example. Many Games might start out with this kind of structure that just involves moving a box around a screen. So it would be a good idea to start of with something just very simple like this if you are new to canvas game development. We all need to start somewhere when it comes to this sort of thing, so lets get this one out of the way.
2.1 - The html for the Canvas Game
2.2 - The game1.js file for the Canvas Game
2.2.1 - Get a reference to the canvas and 2d context
So at the very top of the file I just grab a reference to the canvas element. Once that is done I can use the getContext method of the canvas element to get a reference to the 2d drawing context. I will not be covering every little detail about the 2d drawing context here, but there will be an example of using it later on in this section when it comes to making a draw method.
Here I also set the native size of the canvas as well via the width and height properties of the canvas element. I will also be attaching an event handler to the canvas as well for accepting user input that will be used to move the canvas as well later on in the file.
2.2.2 - The state object
So any canvas game will involve some kind of state. In a very simple project like this one the state can just be a single object with just a few properties that represent the position, speed, and direction of the box along with maybe a few more necessary properties as well. In more complex projects there will be a need to save, and load a fairly more complex state object like this, but one needs to learn how to walk before they can run.
Along with the current x and y position of the box, I will also store the current angle to which the box will be moving. In addition I will also be storing a pixels per second value that will be the number of pixels that the box will move per second. There will be more on this and the lastTick date object when I get to the update loop of this canvas game example.
2.2.3 - The update loop, and Mathematical Modulo
In the update method of this example I am using the lastTick property of the state object to find out how much time as passed sense the last frame tick. This value will be used in the expressions that will set the delta values of the x and y properties of the box, resulting in its movement for each frame tick. The deltas can be thought of as the amount that something changes from one point in time to another.
In the expressions that change the values of x, and y I am using the Math.cos, and Math.sin methods of the Math object. If you are not familiar with these methods that will it would be a good idea to make a few projects in which you are playing around with them a little, as they are often used a lot in these kinds of projects.
2.2.4 - The draw method
Now it is time to create a draw methods that will be used to draw each frame of the canvas game. In complex games I might get into layering and other advanced topics, but for this example there is no need to get that involved. Here I am just using the fillRect 2d context method to paint the whole of the canvas black, and then use it once more to draw the box at its current position.
2.2.5 - The single event handler
So for this example I will add a single event handler to the canvas that will be used to change the course of the box when the user clicks the canvas. I use the getBoundingClientRect method of the target element which in this case is the canvas element to get canavs element relative x and y values as to where the canvas was clicked.
In more complex projects the main app loop might turn into some kind of state machine, a topic I might get into with additional examples. Other projects might take a more event driven approach rather than updating things constantly on a frame by frame basis.
2.3 - Conclusion with Canvas Game One