catbug in the see through zone
Catbug: In the See-Through Zone is a simple arcade-style game originally written in C as a Christmas gift to my partner, and then later ported to Javascript as a learning exercise and to share the game with more people. The premise is simple: catch the food objects as they fly by, and collect points. Miss too many food items and it's Game Over. At 10, 20, 40, 80, etc. points, your health points recover and their maximum increases by one. The higher your score, the faster the food items tend to move.
The C version of the game shares a lot of low-level code with the HyperKaos engine -- both being written using the SDL 1.2 library. The Javascript version of the game is written completely from scratch using the HTML5 canvas feature. Most of the code is, once you normalize for the idiomatics between C and Javascript, very similar, except one part. The main loop part of the game code differs greatly between the versions.
In C, it's easy for the main loop to be just that -- a loop, and for any special conditions based on the game state to be handled inside the sub-functions of the loop. In Javascript, because of the way that renders are pushed to the browser, we have to do something a bit different. The loop() function is not really a loop, and instead requests that the browser call itself (loop()) again when it's time to refresh the screen. The weird part is, if control flow is held by another function when that time comes, behavior is unpredictable. This means we must make sure that all functions have finished executing before the request to run loop() again can be made. So instead of a simple loop with a chain of sub-functions, each taking care of its own logic, we have an if-else ladder or switch-case state-machine that handles the game logic, and most functions that would be loops in the C version have to be made into singleton classes that keep track of their states between 'loop' executions.
So in addition to those logistical changes, the other change to the Javascript version of Catbug: In the See Through Zone is touch-controls -- the whole point was to make it as accessible as possible, and that means mobile support. So the game checks your user-agent string on initialization and if it thinks you're on a mobile browser, it will throw the touch controls on screen. The controls aren't perfect, but they're good enough according to the Law of Diminishing Returns. You have to lift your finger off of one directional button before pressing the next, as I couldn't exactly figure out how to get the buttons to transition properly and to inhibit scrolling if you dragged a finger across the directional pad. The consensus from the Facebook release party was that the controls worked pretty well, though. :)
There is a manifest.json file in place so that you can add the game to the home screen on your phone, but I haven't implemented caching service-workers yet for completely offline use on mobile.