A while ago I made a javascript-based color memory game. I used plain markup, css and javascript for this and I used the Prototype JavaScript Framework instead of jQuery. You can discuss the pros and cons between Prototype and jQuery for hours (if you want to) but this is not something I’ll cover in this post, instead I’ll go through the core functions of the game.
First off, take a look at the demo here. In writing moment the fastest known player was done in less than 25 secs!
This is how I’ve set up the files for the game:
I’ll actually not write any code in this post, I’ll just simply go through each function in the javascript (that is the core of the game) and talk about what each function does. I’ve compressed the files of the game so if you want, you can download them and take a look at the code in your editor when you continue your reading below.
The .html-file is quite straightforward. It has a container-div where the javascript put the actual gameboard, it initiates the javascript and some other stuff. I don’t think there’s any need to go into this file in detail so I’ll just leave it there. The CSS is, as always, just used for the presentation. The image is used for the backside-cover of the cards. The javascript file named memory.js is the interesting part. So let’s take a look at this file and go through each function step by step.
initialize()
The initialize function has a few default options that can be dynamically changed from wherever you initiate an object of this class. This approach by using the Object.extend-functionality on the default-options is, in my opinion, very powerful since it adds a lot of flexibility to your code.
I said I wouldn’t post any code in this post but there might be a point to show how you can change these default options. You do that where you create an object of the memory class (in this case in index.html) and this example below shows how you could change the rows and cols without altering the javascript-file itself:
var m = new Memory({
rows: 3,
cols: 4
});
So, let’s get back to the initialize function, as you can see, we first set the options for this class. As you see above, the code is dynamic so you can change how many rows and cols you want on your gameboard. Please note that there’s no functionality that checks whether the total amount of cards is an even number or not so if you change these params, please have in mind that the cols multiplied by the rows should sum up to an even number.
After that we initiate some of the other default properties of this class and then we call the initCards-function.
initCards()
In the initCards-function we create the cards for the gameboard. We use some loops to make this happen and we check if a color already has been used. It also shuffles the array that is containing the cards. When this function has done what it’s supposed to the code then goes on to the createBoard-function.
createBoard()
Here, the actual gameboard is created and as it creates each card it also adds an onclick eventlistener to each card. When a card is clicked the flipCard-function is triggered.
flipCard()
When the player clicks on a card, this function starts to run and it starts the timer (if it hasn’t already been started) and then it flips the card you clicked and check whether the player has found a pair or not. This is done with the help of the function named getCardNumberFromId().
We’ll that’s it, I’ll not go into more details so if you have any questions or feedback, please post a comment! I’d really like some feedback on the code and if you guys would have done anything differently.
/Simon
