(Updated: 2005/10/12)

A Simple Puzzle

Created by: Jun Wang

Revised by: Leah Findlater, Holger Hoos

Comments to: Holger Hoos



Have you ever played a computer game? You can create one yourself with the support of a simple programming language, such as Javascript. This lab will guide you through the process of building a simple puzzle game that is a variant of the traditional slide puzzle. After doing this lab, you will have a better idea of how to divide a big problem into smaller pieces and how to make a solid plan to conquer each piece.

Before the Lab

Read through the lab ahead of time. You will be using the image files you saved at the end of the Ultimate Paint lab to create your puzzle.

During the Lab

Part I: Set-up the Development Environment

1. Before you begin:

2. Collect the necessary files and install them into your directory:

3. Play with it:

  1. Open 'puzzle.html' using Firefox or Internet Explorer.
  2. Click the "Confirm" button, then click the "New Game" button, then the "Confirm" again. (You will learn the meaning of the parameters in those two boxes later.)
  3. Now you should see a picture of a boat. If for some reason your picture is not complete, you can refresh the current page and click "Confirm" again.
  4. If you click the "New Game" button, nothing actually happens. This is what you will be fixing up in this lab.

Part II: Game Initialization

1. Open 'puzzle.html' for editing (use your favourite editor - Notepad, Wordpad, TextEditor, etc.).

2. Try to understand the code: Read through the code and see how much you can understand. At this point, you should have learnt some basic Javascript for creating a web page that can interact with users.

When you read the code, pay special attention to the global variables declared at the beginning of the script, and note their names and types. As well, pay attention to the names of each function and read their descriptions. The comments included in the code, along with the names of variables and functions, will give you a rough idea of what each means or how they work. There are two incomplete functions: startGame and selectFigure.

Keep the following points in mind:

3. Modify the startGame function: (If you cannot find it, trying doing a "search" in your text editor.) The startGame reorganises the original picture to create a new puzzle to solve, and initialises some global variables that will be used by other functions. Read through the function description and try to understand what each of the variables are for.

The text "IMPLEMENT THIS" tells you where you need to add code. To do the following steps, you must use some of the other functions in the script.

4. Check out the result! Save your changes and redo Step 3 of Part I. When you click on "New Game", the picture should now get messed up. If your picture still looks normal, don't worry because it is probably just a small error in your code. Go back and check the code you added, making sure all of the details are correct (check that the capitalization of variable names is consistent, that the lines end in ";", etc). If you have not succeeded after trying this step several times, ask your TA for help.

Part III: Game Logic

The game isn't done yet. Now you'll add some code so that you can manually swap two pieces in the picture by clicking one piece, then clicking on a second piece to swap the two.

1. Modify the 'selectFigure' function: In the text editor, find the function selectFigure. Again, "IMPLEMENT THIS" tells you what you need to implement. This code relies more on global variables than the code in Part II, so make sure you've read the description for each of the variables at the very beginning of the script. You will need to do the following:

Part IV: Customise It!

To make the game more interesting, you can try using a different picture.

1. Use the picture you created in the Ultimate Paint lab:

2. Use any picture (not required for the lab): You can use any picture for this game. Simply open it in Ultimate Paint or a similar program, and follow these steps:


Show the working puzzle game to your TA, with both the boats and your own picture. As well, show the TA the code you've changed to get the game to work. Put a link from your home page to your puzzle game, and change the permissions on your puzzle game files so that they are visible on the web. (Check the HTML lab if you don't remember how to do this.)

Grading scheme for this lab: