figure 1: buttons for combination game

Building Combination

If we have the numbers one through zero, that means that the player has to go through ten pages if they know the combination. If they don’t know, then there would be nine incorrect choices for the first page, eight for the second, seven for the third, and so on. This means that there would be a total of 55 pages needed for the game. While this is a huge number of pages, it is achievable. This can be cut down quite a bit, however.

If we wanted to take the extreme approach, we could get the page count down to 11 by simply having a single error page. While this approach doesn’t hurt, and saves a lot of work on the error pages, it also has a huge problem. The information bar at the bottom of the screen will tell you the name of the page that you are going to. If all the numbers except for one leads to “error.html” then most players will simply go to the correct link. To avoid that, you must disguise the link. I am going to do that two ways. First, for each number I am going to have 2 pages. This means that I will now have 20 pages, but that is still a lot less work than 55 pages.

This only partially solves the problem. While the link information no longer will obviously give away the solution, if the correct pages are all labelled one way and the incorrect pages are labelled another, players will quickly figure out what is going on and will again be able to easily solve the game. This problem can easily be solved by means of a random number generator that can randomly pick a number between 1 and 2. A dime works great! Half the pages will be labelled p#a.htm and the other half will be labelled p#b.htm The error page gets the opposite letter.

Now we need to determine the proper order of the buttons. A random number generator is needed for this task as well, but it needs to be able to only pick each number once. Again, no special coding needed to accomplish this task (though certainly if you wanted to write a quick program to do this you could), all that is needed is 10 playing cards (ace through ten) and a bit of shuffling. Now the design of the game is ready, we can start coding.

The button images are simple images. Twenty images will be needed. Ten to represent un-clicked buttons, and ten to represent clicked buttons. If you wanted to be really lazy, you could do away with the image requirements and have the buttons represented using a table and text. Still, all that is really needed is two template images (as shown in figure 1 above) and overlayed the numbers over the template image saving each of the overlayed versions as a separate file.

Next, we need a page to use as a template for the layout of all the pages. This also would happen to be the first page. If you have a html editor such as DreamWeaver, then the page can be quickly made by creating a 3x4 table and filling the table with the images, then assigning links to the images to the appropriate pages. If you don’t have a html editing program, you can use a text editor to manually create the html file (while the originally planned article would have done this and explained line by line what the html did, that is beyond the scope of this article). With the template page completed, it is only a very simple task to create another 9 versions of this page, simply changing the next link in the sequence and the correct picture to the clicked version. On the final page, all ten images would be the correct version, with an additional congratulations message on the page.

The error page simply consists of the image for the wrong number followed by the message that the player has chosen the wrong button and a link to the first page. I have named the first page start.

This is probably such an easy game to create, that no sample is needed, but out of the sake of completeness, here is a link to a zip file that contains all the html and image files for the game.