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.
Layout for the color field is simply a large square table, where each
cell. In order to avoid any borders or gaps between squares, it is important to set
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
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.