After my last post on creating a setup for modern JS development, I thought I’d see how that setup fared. So I set out to build a small canvas experiment on it, and it’s been fun.

What is it? Well hopefully you can see it below, it’s a tiny thing that builds mostly random levels for a hypothetical platform game:

Refreshing the page will result in totally different layout, give it a try!

How it works

The core idea is to use a fixed set of possible blocks, and Markov chains to decide what block type comes after the current one. Once we have a list of block types, we can map those to actual sprites and render through a canvas element.

I could have stopped there but I tried to go one step further, and have some form of “section detection”, so that I could use different sprites for the left and right edges of a platform.

The code sits on my GitHub.

Conclusion

I’m pretty happy with the setup for development. Working on a brand new code base with decent tools makes it super easy to do TDD.

My workflow has been the following:

• start running tests in the background through npm run tests
• start writing new specs for objects I’ve decided I need. Those will start failing immediately.
• write the implementation. Hack until tests go green.

This worked so well that I didn’t notice until late that I never set up a command to continuously build my main bundle. Easily solved by replacing browserify with watchify in my npm config.