This year I decided to enter the JS1k competition for the first time.

The idea behind JS1k is to produce a cool JavaScript application in under 1k (1024bytes) of code. I had not done any JavaScript golfing before, so I thought it would be a nice little challenge for myself. I didn’t realise at the time quite how addictive or time-consuming JavaScript golfing was going to be!

My Entry

My entry in to the competition is a jetpack style game. As the theme of this years js1k competition was ‘love’, the game is called “Cupid’s Heart Collection” and revolves around the user playing as Cupid who has to fly through his love cavern collecting hearts and avoiding spikes. As you venture further in to the cave, things speed up. Your final score is based on Distance * Number of Hearts collected.

You can play it here!

I had originally intended to create a Canabalt style game for my entry. For completely illogical reasons I started with the parallax background - two arrays containing random numbers to determine the height of the blocks before I eventually joined them together to save space.

By the time I had created the parallax background I found myself with under half my space left, so my entry became a jet pack game. I wanted to make sure there was more than just avoidables, and hearts seemed like a perfect fit based on the competitions theme. I used character for both the heart and spike.

I also wanted my character to be more than a square - Cupid seemed to fit perfectly for the theme, and using the letters C, U, P, I, D actually gave me the basis for a character design. C for the head, U for the body, P and I for the legs and D for the wings.

Once I had finished, I found myself at around 1800 bytes. I managed to reduce the amount to around 1400 bytes before I introduced gradients. Gradients in canvas take up a lot of bytes thanks to names like ‘createLinearGradient’ and ‘addColorStop’. But I was determined to make them fit. I was also determined I wasn’t going to cut anything. Some of the techniques used are listed below.

And so began a process of working hard to reduce the number of bytes to 1,024. It was addictive, too addictive. I found myself writing code until the early hours of the morning on several occasions. And every time I figured out a way of reducing the bytes to slightly below 1,024, I decided to add a new feature. Which meant further reduction. Simple things like giving a final score, turning Cupid red and even restarting the game without a page refresh were added very late in the process.

1k doesn’t look like much code, but it certainly took a long time to create. Every time a byte was saved it became more difficult to remove another. Golfing continued right up until submission with the 20 character limit on submission names meaning I had to use the heart symbol for the title.

Techniques I Used

There are so many useful resources available for JavaScript golfing now. It’s just a case of figuring out when to apply them. I learnt so much doing this exercise, most of it couldn’t be used in production code - but I feel closer to JavaScript than I ever have before.

Resources:

• 140 bytes Byte Saving Techniques
• Stack Exchange Tips for Golfing
• Ben Alman’s blog
• Marijn Haverbeke’s blog

Techniques:

• Renaming methods within the canvas context to 2 letters. I played around with a few different letter combos, but the best was using the first and sixth letter (which Marijn had also found) - I had to take a hit on .rotate because of this, but other options yielded worse results. I didn’t worry about the 7th letter being undefined as I didn’t need any of those methods.
• Reducing the number of times I called function - I originally had around 6 functions, but most of these became 1 loop in the end. Using variables meant I could call pieces of code within the loop at different times.
• Declaring variables by including them in the function arguments - this helped me a lot
• Changing values to the same as other variables to reduce declaration size.

If I had more bytes..

I really wanted to include a particle engine in the game, where the hearts would explode on collection and lava would jump out of the floor - but I just didn’t have enough space. In reality, the game sometimes feels like it jerks a bit at the higher speeds so the biggest consideration with more bytes would have to be performance; and adding a pause so the game doesn’t instantly restart if the player holds down a key for too long.

Play “Cupid’s Heart Collection” here!