HTML and CSS Reference
Demo Time: Hungry Fridge
Hungry Fridge is an HTML5 game that was created especially for this chapter to show the capabilities of the Gamepad
API in action. It was also submitted to the GitHub Game Off II competition. (It's always better to merge few tasks into
one if it's possible.) The full source code for Hungry Fridge is open sourced and available on GitHub. The game was
created under the brand of Enclave Games. It was coded by Andrzej Mazur, and Ewa Mazur did the graphic design.
The code for the game was created using Phaser game framework, which is also free and open source.
The game is very simple: you're a refrigerator, and you have to eat food to survive. It gets trickier when you consider
two different approaches to the game controls, depending on whether you're playing on a mobile device or a desktop.
The Hungry Fridge start screen is shown in Figure 10-4 .
Figure 10-4. The Hungry Fridge start screen
Mobile vs. Desktop
On a mobile device, you just have to tap the food to get as many points as possible. The only difficulty comes when
there are two different types of food from which you can choose only one at a time. The type of food you have to tap
is changes dynamically, so you have to think and act quickly. The good food (cabbage, carrot, and apple) is marked
with a green overlay, and the bad food (pizza, beer, and hamburger) is marked with a red overlay. When the background
glows green, you have to tap only on the good food; when it glows red, you have to tap only on the bad food
(see Figure 10-5 ).