Last month I was as a Tech Focus counselor at the Camp Fitch YMCA summer camp. For one week I worked closely with two kids who wanted to learn JavaScript. Hoping to have them take home something more exciting than just a website, I focused on teaching the language basics through the HTML5 Canvas API. Together we ended up making two simple games - a “collect the square” game and an arcade shooter - covering topics such as functions, control flow, and event handling along the way.

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 if statements
  • Event listening and handling
  • The drawing API for shapes and text
  • The canvas coordinate system
  • Canvas animation with requestAnimationFrame()
  • Basic collision detection with walls and objects

Arcade shooter

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: