Mahjong Game – Adding Features
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 🙂
Using the keyboard arrow keys
Today’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. Continue reading
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?
- 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: Continue reading
jQuery custom events
Its been a while. I guess I still need to get used to publishing the posts and all… 🙂
Anyway, I wanted to publish a few more and then I realized that one subject keeps recurring in almost all of the upcoming posts: custom events. You can and should read all about events in jQuery at http://docs.jquery.com/Events/jQuery.Event.
Custom events go together with an event-driven programming style, a style whose benefits I’m sure are explained by many articles out there. What I want to focus on is the relation to web programing in jQuery or javascript in general. In every application I worked on there was a need to bind to certain events like onclick, onsubmit and onload (to name a few). I don’t think there is a modern application out there that doesn’t use at least one kind of event. Therefore I think it’s only natural that the application will define a few events of its own. Continue reading
Creating a tic-tac-toe game with jQuery – Part 1
As promised, our first tutorial will be for programming a very well-known game called tic-tac-toe. We will start our tutorials with a general design requirements section and since I’m pretty sure you all know this game it’s going to be a very short one for now.
So what do we need from our game? Continue reading