Published on 2020-04-30
In 2013 Mozilla released Firefox OS[1], an operating system for mobile phones that was based on their rendering engine Gecko. The premise for this new OS was that all apps would be written using open web technologies, basically HTML5 and JavaScript.
Around a year later I bought one of the phones that came already with Firefox OS installed, and I decided that I would write a game for it. I'm not much of a game developer, but the "everything is a webapp" feature did make the endeavor easier to approach than writing a game for, say, Android. Plus you have the novelty of a whole new ecosystem with new users coming in and fewer, way fewer applications in its app store.
I didn't want to write a huge game that I would never finish. Rather, I wanted to take a really simple concept and write a complete game around it, with instructions, a logo, and translations; and have it published in Firefox OS's Marketplace. It would not require "levels" of any sort and instead it would use a Tetris-like style of gameplay in which you keep playing until you lose. And the fewer controls it needed, the better, with just one single control being ideal.
Then I remembered the classic "Snake" game from the old Nokia phones. It occurred to me that if the snake would rotate instead of advance, the game would require just a single control to change its direction. That change also seemed good enough to give the game a new original style.
Okay, it's a snake game. According to Wikipedia, "there are over 300 Snake-like games for iOS alone"[2], so this game probably won't revolutionize the industry; but I didn't want to give it too much thought and I started coding.
The "Alcatel One Touch Fire C" running Lona
I had never written a game in JavaScript. I did know about canvas, but I didn't know about requestAnimationFrame[3], which was mozRequestAnimationFrame back in those days. Still, I disregarded canvas and figured that moving some divs around would be enough. It didn't take long to realize that was a mistake.
[3] requestAnimationFrame's documentation
It doesn't look that bad in my quad-core laptop now in 2020, but believe me this wasn't a pretty sight back when I was writing the game, specially when running it on the phone. Still, this approach was good enough for figuring out the actual logic. What structure should I use for the snake? Is it an array of small body parts or one single body? How do the body parts move? How does the single body twist? I gave the divs a couple more tries but it was starting to look like I needed the "single body that twists", and I wasn't going to be able to do that with HTML elements and CSS. It was time to move this to the canvas.
For the next version I decided that I would write the snake as an array of "centers", where each center would draw a section of a circle with a thick border. That border is the body of the snake, and the join between two borders from different circles is the "twist" of the body. The user would need only tap on the screen and a new center would be added to the array, meaning that the snake was performing yet another twist.
I remember having a hard time figuring out where exactly to position each new center on every twist. Then, another hard time figuring out the collisions with the edge of the screen. Finally, one last hard time figuring out the collisions with each other. But after a bunch of hard times I had my game logic complete. One final tweak to make use of requestAnimationFrame (instead of sleeping a fixed amount of time with setTimeout) and the result ran pretty smoothly.
Sadly, I don't have the full history of the canvas version in the git repo. The supposedly first commit[4] of the git repo points to a version that more or less looks like the current one. I guess I didn't use git until I was fairly advanced with the game. The older versions based on divs were backed up in a different folder, outside the repo.
[4] The very first commit in Lona's git repository
It was time to make it look nice and give it a name.
Ugh, the fun part was over and the game was complete, did I really need to do this? Well, yes, I had promised myself that the game would be simple only to have time to do this other part. So I gave it a name right away, "Lona", only because I wanted a short, feminine name that wasn't a real personal name.
Next was the styling. I went for a simple 3-color pallette of brown, yellow and green. I got a cool looking font (thanks Ruji![5]) for the text, added instructions, scores, and translated everything to Spanish and English.
Before publishing it anywhere I would need a logo. I don't draw. *At all*. But what could I do? I couldn't just take a stock image from the web like I did with the font. The logo had to be more personal. I though about asking someone else to draw it for me, but that would take more time and by then I really wanted to be done with it. So I fired up GIMP and came up with what, to this day, has to be the finest piece of art that has come out of these hands. I mean, look at it, it's drawn in perspective and it has shadow. Shadow!
I was done. I don't remember the process of publishing to the Firefox OS Marketplace but that means it must've been pretty easy, otherwise I would remember it. I released the source code as well under the GPL. After some time I had some positive reviews from users (now forever lost, as I have been able to found archives[6] of the Marketplace but not with the reviews included) and issues in Github. Some close friends were playing it and really liked it. Even I enjoyed playing the game myself. At this point I considered the game finished and decided that I would not add more features to it.
[6] Archive of FirefoxOS's marketplace from 2018
Some funny notes from the time I was writing it
Lona has seen a good share of activity after I released it. People report bugs and send pull requests. Someone translated it to Italian[7].
[7] A pull request to translate Lona to Italian
In 2016 I integrated Lona with Telegram's Gaming Platform[8], which allows you to play Lona within Telegram and submit your highscore to a scoreboard that is automatically sent to the chat. I didn't keep that up for long though.
[8] Telegram's Gaming Platform
Also around that time, Mozilla announced that Firefox OS had reached its end. The Marketplace was also to be shutdown. Someone asked me on Github to port it to Android using Cordova and (after 6 months) I did[9]. This process I do remember, and I have to admit that using Cordova was a pleasure. Following the two simple steps from the tutorial was enough to get a working APK. I published it to F-Droid and now Lona had a new house.
During these years I also have been made aware that there are actual copies of Lona hosted on shady game sites. They change its name, the color palette, add some (not so bad, I admit) music, and hide the game behind a wall of ads. Also, they take my name (and Ruji's credits) off the "about" page. It's surprising enough that people play this game, but to go to the lengths of taking the code, modifying it, and publishing it on Kongregate? That's crazy. Check some of them out on:
A simple search for "Lona snake game" will yield many more results.www.kongregate.com
So this was it, the story of my little game Lona. A simple snake game, but it was original and people played it. For a game developer, sometimes that all you need to consider it a success. If now you feel like playing it, do it here[10].
