Learning 02: Elements and layout

Perlenspiel games run in a web page on a browser. Any browser that adheres to the HTML5 standard will probably work, even those found on mobile devices.

Beads and the grid

A Perlenspiel web page is simple. It is divided into three areas.

[Grid]

The center of the page displays the grid, a rectangular matrix of cells.

Each cell in the grid is called a bead. You can change the color, transparency, scale and shape of each bead individually.

The number of rows and columns in the grid is not fixed. You can specify any horizontal or vertical dimensions from a minimum of 1x1 (a single mighty bead) to a maximum of 32x32.

You can resize the grid anytime, even in the middle of a game. You can also change its background color, and display a colored shadow around its perimeter.

Referencing beads

The columns and rows on the grid are numbered from zero, starting at the top left corner. Beads are referenced by their column/row position in the grid. So the bead in the top left corner is always bead (0,0), the third bead in the second row is bead (2,1), etc.

This numbering convention is used for all bead-related commands. Get used to it.

Bead borders

[Border] By default, each bead on the grid is enclosed in a border. You can individually control the width, color and transparency of the border on each bead. If a bead is square, you can also make each side of the border a different width. Or you can hide the border entirely if you don't want one.

Glyphs

[Glyph] Each bead can optionally contain a single text character or glyph. The character text, size, color and transparency of each bead's glyph can be individually specified.

Status and message lines

A Perlenspiel page also contains two single-line text boxes, one above and one below the grid.

The text box above the grid is the status line. You can use the status line to communicate very short messages to your players, such as high scores, time limits or simple instructions.

The status line can also be configured to accept a single line of text input.

The text box below the grid is the message line. This is used by the Perlenspiel engine to display internal status and error messages. You can't control the text that appears in the message line.

 

Terms to know

Next: How the engine works