(Updated: 2005/10/12)
A Simple Puzzle
Created by: Jun Wang
Revised by: Leah Findlater, Holger Hoos
Comments to: Holger Hoos
Contents
Objectives
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:
- Create a new folder called Puzzle in your home directory (Z: drive).
- Double-click on this folder to open it.
2. Collect the necessary files and install them into your directory:
3. Play with it:
- Open 'puzzle.html' using Firefox or Internet Explorer.
- 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.)
- 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.
- 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:
- Comments are the text after "//" to the end of a line, or between "/*" and "*/".
- You are not expected to understand all the details of the implementation of each function listed in 'puzzle.html'. Remember, the point is to understand what they mean, how to use them, and where to use them.
- If you are lost, ask your TA for help.
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.
- Inside the for loop, find and store the index of two random image pieces. Indices for the image pieces range from 0 to (totalPieces - 1).
- Also, swap the two random pieces you found.
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:
- Handle the case where the user has selected only one piece so far: You can do this by updating the 'firstPiece' variable.
- Save your changes and redo Step 4 of Part II. Can you play the game now and swap the pieces to rebuild the original picture? Note: Due to the processing speed of the web browser on your machine, you probably do not want to click too fast.
- Handle the case where the user has selected a pair of pieces to swap: The two pieces the user has selected should be swapped.
You also need to check if a solution has been reached at this point by using the 'resultFound' function. If a solution has been found, let the user know by executing the two statements provided. If the user has not found the solution yet, then nothing needs to be done.
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:
- In the last step of the Ultimate Paint lab, you divided the picture you created into 8 smaller pieces, named filename0.jpg to filename7.jpg. Copy these eight files into your Puzzle folder. (If you didn't complete this part of the last lab, ask your TA for a new set of files).
- Go back to 'puzzle.html' in your web browser and type the filename part of the files you just copied into the "File Name" text box (i.e., if your files are tree0.gif, etc., then just type in "tree"). The individual pieces of your picture are numbered from 0, starting in the top-left corner of the picture. In the last lab you cut the picture into 2 rows, with 4 pieces in each row. You need to tell the program how many pieces are in each row, so in the "Columns" text box, type 4,4. Click on "Confirm" and you should be able to play a game with the picture you created! (You may need to refresh and click "Confirm" twice.)
- Note: If your image does not line up in an exact rectangle (i.e., if it looks like some rows are wider than others by a few pixels), that's ok.
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:
- Cut your picture into several rows. These rows do not have to be the same height. Try to be careful, because otherwise the resulting picture will either have gaps or overlaps.
- For each row, cut your picture into several columns. Again, these columns do not have to be the same width. Different rows can have different numbers of columns.
- As you are doing this, save each piece as filename0.jpg, filename1.jpg, and so on, starting with the top-left corner. For example, say you cut your picture into two rows, the first row into 3 columns, and the second row into 4 columns. Then the pieces for the first row will have the numbers 0, 1, and 2 attached to the filenames, and the pieces for the second row will have the numbers 3, 4, 5 and 6 attached to the filename.
- Follow Step 1 of Part IV and the picture should show up as a puzzle.
Deliverables
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:
- 2 marks for completing game initialization code correctly
- 5 marks for completing game logic code correctly
- 2 marks for customizing the game by loading your image from the Ultimate Paint lab
- 1 mark for making your game visible from your web page