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
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. Continue reading
Mahjong Game – The Layout
In 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. Continue reading
Mahjong Game – The Graphics
The next game we’re going to build is a Mahjong solitaire game. Mahjong is a tile matching game which I feel is a natural step forward from the Memory game we created in the previous post, so if you haven’t read that post yet, you might want to give it a look.
Since this is a more complicated game, I decided it would be best to tackle it in several posts instead of just one. In this first post we’ll create the graphics needed for the game. Let’s start by considering what this game needs to include. If you search the web for even a few minutes you will find that there are several versions of this game, each with its own set of rules. To make things easier, our own basic version of the game will use simplified versions of some rules, and ignore others (like score) entirely.
So what does that leave us with? Continue reading
A Basic Memory Game with jQuery and PHP
So, I got up this morning to find that my 3.5 year old daughter is busy playing on my laptop. She decided she wants to play so she found the CD for her game, opened the DVD drive and loaded her game. She was very busy playing when I got up, and needless to say I was quite surprised. I figured it was time to create some new games for her, so I thought I’d start with a basic Memory game (some may know it as Concentration). You know, the one with lots of face down cards where you need to find pairs of matching cards. 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
Welcome to Webdev Playground
First, let me start by explaining the purpose of this blog. I usually think that the best time to explain why something is starting is at the beginning… so here goes.
There are a lot of sites, blogs, and portals around that teach and explain how to do this or that in web development, so you may be asking, why do we need another one? Simple – We can never have enough. No, really. I started learning web development about 10 years ago, and ever since then I find myself constantly in search of more sites, and many of the sites I’ve found have managed to teach me something new, so I really do think we can’t have enough, especially this day and age.
There’s another reason for my starting this blog. As I mentioned, quite a large chunk of the things I know, I’ve learned from other people’s blogs and sites, so I think it’s about time I started giving back to the community.
Having said that, you are now probably wondering what is going to make this particular site so special, so let’s answer that next. In this site I’m going to focus less on web design (much less actually), and more on the logic of web development. The main focus is going to be building browser based games, built with JavaScript, (x)HTML & CSS (once in a while a bit of server-side scripting will be involved).
I plan to update about once a week with new projects/parts. This week we will start with a simple game of tic-tac-toe. You probably know this one and it will be easy and fun to write, so stay tuned.
Until next time,
Adi Gabai