Mahjong Game – The Board

In the previous posts we created most of the graphics needed for the mahjong game, and built the layout files that we will use. Now it’s time to put those layout files to some use.

The Layout Class

Our first step now will be to create a Layout class that will read our layout files. Let’s say we have a mahjong directory in which we’ve created a layout directory, which in turn contains our layout files.
The constructor for our Layout class can look something like this:

Every time the class is loaded, it will go and fetch a layout file, which can then be processed like so:

Since our layer file already contains the variables ($layout, $rows, $cols), the process of loading and processing takes little time. By including the file we gain access to those variables, and can save them in our class. The layout variable should always be an array, since the layout itself is basically an array of positions.

At this point we can read the layout file and store it in our class, but we still need to build a game board out of it. To do that, we’re going to need two more classes: one to handle the board and one to handle a block on the board (AKA tile). But before we rush off to build these classes, let’s take another look at our layout file, because there’s quite a bit more information we can get out of it.

Another responsibility of the Layout class is processing the location of each block in each layer of the layout, and providing relevant information about it, such as its position or whether or not it is covered by a higher layer.
Here’s some code to clarify things:
Numbers of layers in the layout:

The position of a block:

In the above method you can see that we’re placing the blocks according to their index in the array, but since our array has in fact double the actual number of columns and rows, we need to halve the result in order to get the right position. The end result of this method is the left and top positions of the block’s html element.

In addition to providing the positions of the separate blocks, the Layout class also needs to know how to provide the coordinates of the entire layer. We can do this by adding the following loop:

What we did here was take the array holding the current layer, filter out the indexes which don’t contain blocks, so that we’re left only with cells that actually represent blocks. For each one of these cells, we checked the position value for the block, and used that to see if it is covered by a block in a higher layer. If you’re wondering how we can filter the active cells, it can be done like this:

First we filter the array to get just the cells whose value is higher than zero, and then we request the keys of those cells.

Now our Layout class can really supply us with what we need in order to build the board, but as you can see it doesn’t build anything; it just returns an array of coordinates, which will be used to actually build the board (like in the Memory game). The one that will actually build the board will be the Board class, which will use the Block and Layout classes to generate that bodacious board-building code. And since we’ve already completed our Layout class, let’s get started on the Block class.

The Block Class

The Block class is pretty simple. Upon its creation it will get its index in the graphic map file we created earlier (i.e., which block it represents), and will then position the background image in the map file. It will do this by checking which row and column it’s located in; combined with the (already known) block dimensions, this provides the needed information. The block’s index in the graphics file will also tell the Block class if it’s a normal numbered block, or a group of special blocks that can exist only once and match each other.

After setting all of these values, the block knows how to generate its css and html markup:

As you can see in the above html method, the block will get its layout information as a parameter just to enable it to generate the markup; as an entity it only knows its type and which graphic to display.

Finally, the Board Class

As we’ve said before, the one that will bring all of the above together and use it all to create the actual board will be the Board class.
When the board is initialized it will gather all the required details:

After the Board class is initialized, we can easily get the html markup and the needed css:

Thats about it. A simple file with a call to the following code can get us a nice looking mahjong game board. But we are still only halfway there: we still need to add the game logic, and we will do just that in our next post.

Until then, have fun!

Adi Gabai