Simple Games with HTML5 Canvas
by Ben Centra
You can find my complete notes from camp here: http://bencentra.com/computercamp/
Collect the Square
Our first canvas exercise evolved into a small game. First we drew a square. Then we moved the square with the keyboard. Next we added another square to collect. Finally we added a score counter and a timer. And viola, their first canvas game!
This game served as an intro to many topics:
* Functions for code reuse
* Control flow with
* Event listening and handling
* The drawing API for shapes and text
* The canvas coordinate system
* Canvas animation with
* Basic collision detection with walls and objects
Another game was needed to reinforce the concepts from Collect the Square. Sticking to squares for all shapes - it’s easy to calculate and visualize their coordinates - we fashioned a arcade-style shooter. You move one square up and down with the keyboard, firing bullets at enemies that come in from the side of the screen. Really you fire bullet at enemy - in the version we made together, there’s only one of each at a time!
Though very similar to the first game, the shooter has more actors to position, animate, and collide at a time. My demo below takes it a step further, using loops to deal with potentially more than one enemy at a time.
Next Steps - Phaser
After several days working with the Canvas directly, we closed out the week by looking at Phaser for creating more advanced games. Their tutorial goes through the basics of drawing sprites, handling user input, and implementing physics. If I had a second week at camp, we could’ve tried making a “real” game. Maybe next summer!
BONUS - Pong
We didn’t have time to make this together but I was ready with a third example game - Pong! I implemented a quick two-player version of the game, which you can play below:
Subscribe via RSS