Face Paint Peggy

At VIA Studio we challenged ourselves to create a mobile game with Javascript. After a few iterations, I took over as lead developer on the project and using HTML 5 Canvas and Javascript created Face Paint Peggy. The goal of the game is to catch the correct color drops to progress through the different levels of coloring Peggy’s face. The artwork was done by the amazing artist Patrick Sheehan.

The game works by by having an array containing the drops which include the drop color, position, and direction. There is also an array containing the player position. From this information the game loop draws the drops and every frame will add to the positions, that way they move down the page. The same concept works for the player as well. To move the player, there is an invisible DIV withe the tongue dimensions that is draggable. Since this invisible DIV matches the tongue, the player is able to move the tongue. There is a Javascript to Java bridge on the Android version that allows the game to change the status bar color to match the color of drop the player is collection.

To read more on the development of Face Paint Peggy, I’ve written an article over at VIA Studio that covers it more in depth.