sHpere, my entry into the js13kgames competition


The competition is a month-long competition to make a javascript/canvas game in under 13k.  It runs from August 13 2012 to Sept 13 2012.  I jumped in around September 5th with a few days left in the competition to see what I could come up with.  The competition seemed pretty laid back and I wanted to also use this time as a short vacation from development on my html5 game using impactjs, Drugbound.

sHpere googles much better than sphere
sHpere, hosted on

I didn’t really flex my game design muscles too much on this one, but I intended this to be more of an exercise in math for me.  I wanted to see if I could still remember a lot of the 3d coordinate systems and transforms between those systems using matrix math that I learned back when I did physics in college. Turns out if you don’t do matrix coordinate transformations in over a decade you get somewhat rusty.

The two largest sources of issues/bugs for me were:

  • the axes for the cartesian system I learned in college isn’t the same as the one I’ve been using to draw stuff on the screen for the past year. z is -y, x is z, and y is x.  Talk about headache.
  • trying to improve the performance on mobile browsers without having really ever worried about it before on other games.

The biggest performance boosters in mobile browsers were to use requestAnimationFrame() instead of setInterval(), draw to an offscreen backbuffer canvas before flipping/drawing to the visible canvas, and to manually cut down on the number of background stars and sphere vertexes to lessen the number of canvas draw calls (those things are expensive I hear).

You can play the game by clicking the image above.

js13kGames competition

github unminified source (caution: bad variable names, magic numbers, and poor comments)

I welcome any feedback below or follow me on twitter @mrlasertron!