Off The Lines — A JS13K Game

Introduction

This was my first ever entry for JS13K Games ( https://js13kgames.com ). JS13K is an annual competition where you have a month to create a game. The catch is the overall game size must be no larger than 13KB, no external libraries/code/assets allowed (except for the WebXR section, or if you include it within your 13KB bundle). The good news is the size limit is once everything is minified and zipped — this makes a huge difference! The theme this year was “Offline”.

The game can be played here: https://js13kgames.com/entries/off-the-lines

Inspiration

I was playing trains with my children while thinking about a game idea for this year. The trains are battery-powered (each with varying battery-ages creating large differences in speed between each train). It was quite a challenge preventing them from crashing into each other, the only options being to make a train wait at a station or switching it to a different track. I thought this would make a good game so I came up with a more abstract version of this: Balls going round lines at different speeds, if they crash into each other they fall “Off The Lines”.

Limitations

In order to work around the file-size-limit I decided from the start that I would not use any images or external libraries. As a result I never reached this limit. The final bundle is just over 10KB. I used Gulp to minify and zip everything.

My biggest limitation was actually time. A month sounds a long time, but commitments get in the way and I had a week in the middle where nothing was worked on, picking it back up again for the final week. I didn’t help the situation by deciding to create a second game! I really wanted to create a game for the WebXR category too, so I had to split my time accordingly.

Demo

My first step was to create a demo. Getting objects to move along a path was a new challenge to me. I thought about doing this using a HTML5 Canvas, but in the end opted for SVG paths. I was already familiar with SVGs to a certain extent, and after discovering the path.getPointAtLength() method this made it easy to work out where each ball should be at any point in time. The bonus was being familiar with Inkscape, which I used for creating/editing levels.

I used miniMusic for the audio ( https://xem.github.io/miniMusic/ ). The output was super-condensed, but I decided to refactor the code so that I understood it and could add more audio as I went along.

Lessons Learned

My first real mistake was to create the balls as Divs (with a border radius and background gradient) and the controllers as Button elements. While this worked, mapping SVG positions to the HTML element positions proved increasingly difficult and involved scaling in the game loop. The obvious solution was to create everything as SVG elements and, once re-written, this made things much simpler.

I also had to re-write the collision detection code. The issue being sometimes a collision was fired more than once (e.g. when scoring points) so I had to do checks that new collisions hadn’t just occured. This didn’t prove to be overly complex in the end, but it took me a while to discover the best way of doing this.

If I had more time

I would have loved to have created some more levels. My initial plan was to have 13 levels, and file-size wouldn’t have been an issue in the end. I feel that 9 levels was a reasonable attempt considering the time I had available and I can always add further levels at a later date. I also considered creating a level editor, but I would have definitely run out of time and space for this.

A note on levels: I have allowed people to select any level they like within the levels page. So you can play through each level at a time (and only move on once you’ve scored enough points) if that’s how you like to play, but if you are short of time, or get stuck on one particular level, you still can get to any other level.

It would also have been good to have created some background music. I feel the sound-effects work, but background music would have been nice for this game. I would have put in a menu option to turn this off just in case it got annoying!

My original plan was to do more with the switches, to make it easier to work out which line was being switched to. I didn’t come up with a good solution in the end, but hopefully this doesn’t detract from the game-play.

Conclusion

Overall I am pleased with what I have created in the time I had available. I learned a lot in the process and my children have enjoyed testing / playing the game which is a huge bonus! It is a great experience to be part of a competition like JS13K, and it’s really interesting to see what others have come up with.