Flood Puzzle Game

 

The source code for this sample can be found here: https://github.com/gomobile/sample-flood-puzzle or download the Intel® XDK to check out all the HTML5 Samples.

Flood is a simple puzzle game implemented as a Single Page App written using HTML/CSS/JS. The object of the game is to flood the entire field with any one color. The flood starts with the top left corner and any adjacent squares that are the same color. When another color is touched (or clicked) the top left flood changes to the new color, and any adjacent squares become part of the flood. The number at the bottom of the screen shows the number of steps so far. Flood was written to demonstrate several programming techniques and language features.

Language features:

While the app is written as an HTML file, the bulk of the work is in Javascript and CSS3. All of the logic of the game is in Javascript, responding to user interactions, coloring the field, tracking the number of moves, while the look and feel is governed primarily by the CSS3 style, including the size and layout of the colored squares, the counter and the reset button. Most of the CSS code concerns the layout, but it is also used to control the transition, so that color changes fade into each other rather than abruptly change from one to another.

Layout

Layout for the color field is simply a large square table, where each td element is a colored square. The actual color of each square is determined by a random choice in Javascript during initialization or reset. Each square is associated with class cell. In order to avoid any borders or gaps between squares, it is important to set border-spacing: 0.

Default borders
Default borders

 0px;
With border-spacing: 0px;

Logic

While this game is often implemented with separate buttons, this version uses each cell as a color button. When a cell is pressed (anything that triggers the onclick event) the color of the flood is changed to that color and adjacent squares are absorbed via the doColor and addNeighbors functions, which create a worklist of flooded cells and flood adjacent connected neighbors.

Testing, Limitations and Solutions:

The app was tested on a number of devices and platforms, including desktop browsers Firefox and Chrome and various Android and IOS devices, including phones and tablets.

Since it's not using any exotic features of HTML5 or CSS3, it generally works in some sense on all the platforms tested, but the size of the squares or of the entire grid is problematic on smaller devices. On smaller devices, if the app is scaled down for the smaller screen, the squares are too small to use as touch points accurately, making game play difficult. If the app is made larger so that the buttons are squares and big enough to touch, then only a small part of the grid is visible, and scrolling is required, also detracting from game play. A better solution would probably be to use separate buttons to pick colors, as is done in other versions of this app, but that is only necessary on phones.

Another interesting difference showed up in testing. When run in a phone browser, then the app automatically scaled down to the size of the screen. Apparently there is some facility for remapping the pixels on a phone such that a typical desktop width works on a phone without zooming. However, when run as an app built with PhoneGap, then this automatic zooming did not happen, so the squares were big but the entire field was not visible without scrolling.

An improvement to the app would be to take into account the size of the screen as well as the number of pixels for the width of the screen, and adapt appropriately.

 
For more complete information about compiler optimizations, see our Optimization Notice.