Eat Ups

Overview

In this game, the player is in control of the avatar and their goal is do as many chin-ups as they can so they can fulfill their New Year’s resolution of getting fitter.

My contributions include the ideation and programming. I programmed the energy bar, user interface, game states, and all images except the food. I also made the HTML5 responsive so it could be played on any device.

Challenge

A problem that I faced was with the programming of the animations. Eric and Peter had created a short animation of a chicken leg swinging for the background of the main menu, which only consisted of a few images. My initial implementation was placing one image element that periodically switched the source with JavaScript like I had done similarly for other games with animations. I experimented with a few solutions I found online to do this, but ended up with this stuttering animation.

After working on other tasks for a bit, I revisited the problem and tried to improve it with other JavaScript solutions. Fortunately, I failed and I thought of using a GIF to show the animation instead. The animation consisted of only a few frames and the game was in HTML5, so a GIF seemed appropriate. The GIF was much more smoother and should display more consistently on multiple devices, than using JavaScript.

Reflection

In the end, Eat Ups was successful in that the game was complete enough for players to play through it repeatedly. I was able to learn more JavaScript too. To improve Eat Ups, I would want to make it look better on a desktop device, add a bit more complexity, and balance it.