Mahjong Game – The End

Over the course of the previous posts, we’ve built and set up the entire infrastructure for our mahjong game. All that is left now is to create the actual game logic. Let’s start by going over the required functionality. What do we have in this game?

1. The blocks are arranged in layers, and there can be multiple layers on a given board
2. In each turn, the player must select two free, matching blocks to remove them from the board
3. The game is won when there are no more blocks on the board
4. The game is lost if there are still blocks on the board, but no moves are available to the player

In the previous post, we created a script tag for each block on the board, to help us to transfer the block metadata to the game client. In order to be able to read this metadata, we are going to use one of my favorite jquery plugins: metadata. The metadata plugin can read data about each element from attributes or script tags—in our case we used script tags—so using this method to fetch data is as simple as adding the following line somewhere at the start of the script:

Selecting Blocks

As stated above, each turn consists of the player selecting two blocks; if the blocks match each other and are not blocked by other blocks, they are removed from the board. Blocks are considered free if they can be moved either left or right without disturbing another block (i.e., there is no block immediately to their left or right, and there is no block above them). Let’s take a look at how we can check whether a block is free:

Whew, that was a bit long. But at least it wasn’t complicated: What we did here was check whether the block has already been marked as free (since once a block is marked as free, it can’t ever be blocked again). If it’s not already marked as free, we then determine whether there are blocks to the left and right of the block. If there aren’t, we check the layer above the block, to see whether it’s covered by a block from that layer.
Now, let’s see what happens when the user selects a block. To do that, we will use the toggleBlock function:

The toggleBlock function is basically our “onClick”-type function: it will be called every time a block is clicked and select or unselect the block, assuming it’s not blocked by another. As can be expected, it uses the freeToMove function we just defined to determine this. In addition, if two free blocks are selected, the toggleBlock function will check for a match, and raise the appropriate event. This event will in turn call a function that will handle the blocks’ removal from the board, and check for a win/lose condition.

Removing Blocks

Removing blocks from the board and checking if the player won is fairly simple:

One thing worth take a closer look at is the setTimeout function right in the middle: in my experience, when you start operations that can take a while it’s best to isolate them and separate them from our current call, which requires a more immediate response. You can see that within setTimeout’s scope we’re only triggering a custom event. We’re merely leaving a hook for future features – specifically, showing how many free blocks remain. This event can take a while to run, since it needs to scan the board for free elements (something that will take some time on IE), so putting these events in a different, unrelated scope can prevent our game from looking unresponsive. Please note that if the event was to trigger something which had to end before we could continue, we would have had to find a different method.

Now that we can handle two matching blocks, we also need to handle cases where the blocks do not match. This can be done using a simple function like this:

Someone Won?

Up until now we’ve been happily toggling blocks and removing matched pairs, but what do we do if someone won? We’ve seen that our foundMatchingBlocks function checks whether there are no more blocks left (our winning condition) and triggers the proper event, but what happens then? And also, what if there are no more moves?

Above are two really simple functions that simply handle the display of winning and losing. But… wait a minute… when and how do we check for the losing condition (no matching blocks left)? Well… remember the setTimeout-triggered event we talked about? Every time we remove blocks from the board we also trigger the changed_num_blocks event, which fires the following function:

The updateFreeBlocks function checks how many matching pairs are left on the board. If there are no matching pairs left, updateFreeBlocks will trigger the game over event; otherwise, it will just update the display with the new number of remaining matches. Because we already know how to tell whether a block is free, checking if we have any matches left is pretty simple. We can do it by mapping the free blocks, and counting for possible pairs, like so:

That’s Not All

Some more code is required to get the finishing touches done on the game, but I do believe we’ve got the core of the game covered. As always, you can find the rest of the javascript in the game demo itself:

Zip file for this tutorial

Demo for this tutorial

So until next time, have fun!

Adi Gabai