The game Stick Portal

I want to share more of the ideas I've been exploring. First, let me start with this, an early version of a game I'm calling Stick Portal. Click on the image to play:

It's entirely written in Coffescript using HTML5 canvas. Just need a browser to play, works pretty well on mobile devices (add it to your home screen and it'll even go full screen and behave like a free app).

The idea is to create a simplified puzzle game with a level editor where kids could share levels they created. The current version has ten levels that are the tutorials to teach players how to play the game. I've just started on the level editor that will, eventually, allow people to create their own levels easily and share them with others.

The motivation for this came from seeing what Valve did with Portal 2. Portal 2 had a level editor called Hammer that was amazing but incredibly hard to use. Kids were using Hammer to create puzzles for each other that they could play in Portal 2 -- which is great exposure to CAD-like modeling tools and a nice spatial reasoning workout -- but it was really painful. Valve just launched a much easier-to-use editor for Portal 2 that is truly fantastic, highly recommend it.

Stick Portal is free to play, open source (MIT license), and the code is available on GitHub. The source might be useful to people working on similar games as it contains examples of ways to use the Box2Djs physics engine, handling touch and multi-touch (and accelerometer) on mobile devices, how to make your web page look like an app, plenty of examples of working with HTML5 Canvas, crazy things like a way to automatically resize the canvas when the browser window changes or a device rotates, and a lot of other goodies. Won't claim it's the most beautiful code ever, but it is well commented and was fun to write. I hope it is useful.

I plan to keep working on this and extend it to include an editor, but I've been sitting on this long enough so, in the spirit of launch early and often, I'm putting it out now. Please let me know what you think in the comments, and I'd love it if you'd drop me a note if your kids like the game or if the examples in the source turn out to be useful to you.

Update: A couple people have told me they have gotten stuck not being able to guess the controls in the tutorial. It's AWSD or arrow keys for movement and mouse button and mouse movement for the portal gun. On mobile, it's hold down your finger to run toward your finger and hold down above you to jump, tap to aim and fire the portal gun, and second finger (multi-touch) to move the portal gun without firing (like to maneuver a held box).

I also should have said more explicitly that one very cool thing is that the game doesn't use Flash, it's just HTML5. So, it works on all modern browsers without a plug-in, which is neat-o. Also interesting is that it is a fairly complicated HTML5 game running smoothly in the browser on PCs and mobile, almost looking like a native app, but not a native app.

Finally, let me add that I did this game mostly to learn about making games fun. That's a surprisingly hard thing to do. If you're interested in that topic too, nothing like trying to do it yourself, but I'd also recommend the books "A Theory of Fun Game Design" and "The Art of Game Design: A Book of Lenses". And, if you find Stick Portal fun or don't find it fun, please let me know!