July 1GAM – Mine Runner

Another month, another game. This time it’s a Boulder Dash style game called Mine Runner.

I previously posted a prototype version of the game and attempted to find an artist to collaborate with (the prototype post). That was completely unsuccessful and I was forced to press on using free resources available on the net.

Before I dive into what I learned I feel like I should just cut to the chase. Here is the game.

Mine Runner is now playable on several other sites.
Mine Runner on New Grounds
Mine Runner on Kongregate
Mine Runner on Game Jolt


All programming, writing and anything not specifically mentioned below was done by me.

The dirt image is by Axolotl and is available from http://opengameart.org/content/dirt

The diamond image is by Sekulus and is available from http://opengameart.org/content/diamond-icon

The boulder and brick images are by thomaswp and is available from http://opengameart.org/content/2d-object-pack

The monster is by qubodup and is available from http://opengameart.org/content/16px-neon-minimal-mages-monsters-powers-and-dirt

The three characters are modified versions of characters by “/usr/share”. The originals are available from http://opengameart.org/content/16×16-8-bit-rpg-character-set

The death sound is http://soundbible.com/992-Right-Cross.html

The rock fall sound is http://soundbible.com/1120-Bounce.html

The music is from http://www.soundempire.com/

What did I learn?
In a Pygame platformer that I made previously I stored my map data as a small image file, a png specifically. Determining what is contained in each tile of the level is simply a matter of retrieving the pixel data from the image.

To get this to work in Javascript it appears to be necessary to draw the image to an off screen canvas. A slight annoyance. I spent a bunch of time convinced there must be a way to directly retrieve pixel data from the loaded image but apparently not.

I also ran into this curious message. “Unable to get image data from canvas because the canvas has been tainted by cross-origin data” This is because I was loading the web page from a local file path but the image was being loaded (apparently) via a web style URL. Simply switching from accessing the page via the local file system to accessing it via http://localhost/blah made the browser happy.

I’m quite happy with how it turned out. It’s not a long game. Hopefully it’s challenging. I tried to inject a little humour and to introduce a more relate-able story line. Have fun 🙂