I raided the usual sources for my assets. I needed a unicorn, so I gave a horn to the Wikipedia running horse animated GIF (which itself is derived from Muybridge’s photos) and knocked out the background. It looked pretty good on a white background!
I then made some animating rainbow hearts, and I was ready.
After the initial stab at coding, unicorns would run back and forth, and rainbows appeared where the user clicked. If the unicorn was within the rainbow ring, I’d register the hit. I was well on my way.
Next, I added the score animations. I was impressed by how smoothly the animation all worked. On a reasonably recent machine, browsers keep up very nicely. Then I went and tested on iOS. Uh-oh. I’d not been very careful about browser size. I ended up recoding the CSS and dimension code to be more or less responsive. OK, seemed good. I added an explosion of hearts effect for when you hit the unicorn. Next, I found a nice source for sounds.
One of the problems I faced was that I was trying to develop the project while sitting on the sofa in the evenings. I’d come home from a long day of coding, and, well, start coding. But then Elizabeth would come home, and I’d have to keep switching windows to avoid creating suspicion. This is where the ability to disable the audio came in. Over the course of a week, I was able to polish it up enough for deployment. It’s far from perfect, but it was well received.
Play it yourself, or use the code to create your own game.
Some Lessons Learned:
- Players will resize the window in the middle of a game. The code should probably trap for that, and do the right thing.
- I expected players to launch a single rainbow at a time. In fact, there was a whole lot more clicking than that.
- It might be faster to write a game from scratch, but seriously, take the time to learn a framework and use it. With any luck, it will handle all those weird edge cases, and probably have better support for odd platforms.
- Responsive design is all good, but for a game, it might make sense to commit to a fixed size for playability.
- Under iOS, things don’t work quite as you’d expect. This game should have been optimized, and used something like the
touchAction style to improve playability. Better yet, I should have created a native version with PhoneGap.