Though it’s been a while, I think the time has come to revisit one of my previous tutorials: the Mahjong game. For those of you that haven’t read it, the Mahjong tutorial went throughthe stages of creating a very basic Mahjong game: the graphics, the layouts, the boards and all the rest. Since I published this series of tutorials, I’ve been asked about various of features such as hint and shuffle, and have decided that it’s about time for me to add them… so here goes 
Mahjong Game – Adding Features
May 20th, 2010
Using the keyboard arrow keys
December 5th, 2009Today’s post is a rather short and simple one. In most client-based games today, you can move using your keyboard. Browser-based games, however, are usually controlled using the mouse. But though using the arrow or WASD keys to interact with web pages is not too common, it can still be quite useful.
In a web page, any key you press triggers an event, so using the keyboard to control a browser-based game is as simple as listening for and catching these events. Listening for keyboard events is fairly easy if you’re using JavaScript, and with jQuery it’s even easier. Before we get properly started, I’d like to introduce a very simple and useful jQuery plugin called HotKeys, which can help you attach to events in a simple manner. You can find it here, and binding with it is a simple matter of:
$(document).bind('keydown', 'Ctrl+c', fn);
Sometimes, however, you want to do things yourself and not use a plugin. Read the rest of this entry »
Mahjong Game – The End
November 15th, 2009Over 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?
- The blocks are arranged in layers, and there can be multiple layers on a given board
- In each turn, the player must select two free, matching blocks to remove them from the board
- The game is won when there are no more blocks on the board
- 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: Read the rest of this entry »
Mahjong Game – The Board
November 6th, 2009In 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. Read the rest of this entry »
Mahjong Game – The Layout
October 9th, 2009In the previous post we created most of the graphics needed for the mahjong game. Now, it is time to create the board itself.
Since we are dealing with a lot of elements here (at least 144 objects for the tiles alone), it is better to build the layout on the server side. To do this, we will use PHP. We already know some of the code since we used it in the Memory game but we have a lot of new additions here.
- We know we only have one graphic file
- The board does not have a quadrangular (square-like) shape.
- The board is made up of several layers
Before we start, remember: today we’re only going to create the logic for the creation of the game board; we’re not going to touch the gameplay logic just yet. Let’s start by creating a layout file. Read the rest of this entry »