davidbau.com Tutorial: Cannon Game

Tutorial: Cannon Game

The canonical cannon game in 80 lines of javascript: cannon-game.html (view source). Move the mouse to aim, and click to fire the cannonball. If you hit the target, it gets moved and you can test your artillery skills again.

The code uses a bit of trigonometry to aim the cannon and a bit of physics to provide gravity. It introduces the idea of using timers for animation and hit-testing for collisions. The gameplay is governed by a three-state state machine with an explicit state variable.

I am still looking for more ideas. Let me know if you think of any good beginner-programmer exercises that might be able to distilled down to about 80 lines of HTML.

Posted by David at April 17, 2010 07:59 AM

The two problems I had the most fun coding around in middle school:

- a 2-d gravitational/orbit simulation with multiple fixed large masses. I wrote an xgrav style game in javascript years ago that came to only a few hundred lines, so I suspect you could do something pretty basic but complete in about 80.

- If a little bit of trig isn't out of reach for your target audience, rotating point clouds in 3-d is a lot of fun and I bet modern JS interpreters could actually handle pretty large clouds. Using real star coordinates of our stellar neighborhood is an interesting dataset to use if you wanted to confine it to smaller numbers of points.

Posted by: Matthew at April 17, 2010 12:29 PM

nice example. 11 years ago, and trig and math always makes me smile; especially when visually done.

Posted by: Andy Flagg at November 12, 2021 02:10 PM