Logo

Breakout! in HTML5 Canvas

Building a basic Breakout clone with JavaScript and HTML5 Canvas, a fun project to practice coding and create a classic game.

Rob Helmer

Rob Helmer

3/19/2008 · 1 min read

Tags: games open web mozilla


Screen cap of pure JS breakout game

I was working through some Pygame tutorials last week and thought it’d be fun to see if Canvas/JS was fast enough in Fx3 to do some simple games.

So, I spent a couple evenings last weekend and made a really dumb Sprite class, and stole some reasonable “breakout physics” from this tutorial to make this Breakout clone in JS.

The collision detection for the bricks is a little sloppy (there’s a little damage on bricks from time to time) and I haven’t done any perf work yet, but it seems to work ok in Fx3 nightlies on my MBP. Safari works ok too, just not quite as fast.

Any activity in other tabs seems to have a huge impact on performance, there’s probably a better way to do the sprite maneuvers etc. but I only had a few hours to spend on this so far. Pointers welcome :)