Mini-Lab: User Defined Functions


Introduction

The goal of today's mini-lab is to create a puzzle game. In this game a player will attempt to unscramble a tiled image with one missing tile. Every time an image is clicked, that image will swap places with the missing tile. You will be provided with a static HTML page, and it will be your job to add the required JavaScript.


Exercises:

  1. Getting a Copy of the Page:

    First, download the file puzzle.zip to your laptop or M:\ drive. This is a zip file that contains the starting puzzle page, along with all of the required image files. You can extract the contents of this file on the Lab machines by right clicking it and selecting "7-Zip" -> "Extract Here".

    If you are using Aptana you will need to import these files into your Aptana project (don't forget to switch into your workspace). Create a new folder named "puzzle" by Right-clicking on your project and select "New"->"Folder". Now, right click on your newly created folder and select "Import..." -> "General" -> "File System", then click "Next >". Click the "Browse..." button and select the "puzzle" directory that was created by unzipping puzzle.zip. Click the checkbox next to the "puzzle" directory and then click "Finish". Your Aptana project should now contain all of the files necessary to complete this mini-lab.

    Open puzzle.html, and take a few minutes to look over the HTML. Notice that the image file names look like "01.jpg" or "32.jpg". Those names correspond to the correct locations of those images in the completed puzzle: "01.jpg" belongs in row 0 and column 1. The image "blank.jpg" is an all-white rectangle that will represent the missing tile.

  2. Practicing with "this":

    In this exercise you will add code that will allow any image to be resized by clicking on it. This will not be a feature of the finished game; it just gives us a chance to practice working with parameterized functions and the "this" keyword.

  3. Blanking Images:

    In this exercise, we will add code to allow us to "blank out" any image by clicking on it. This will not be a feature of the finished game, but it provides a convenient starting point.

  4. Swapping with the Blank Element:

    In the final version of this game, clicking on a picture should cause two things to happen:

    1. The image that was clicked should be replaced with the blank image.
    2. The location that was previously blank should be replaced with the image that was clicked.

    Notice that we've already finished step one. We're halfway there! The tricky part of accomplishing step two is keeping track of the image element that is currently blank: it will change throughout the course of the game. We'll use a variable to keep track of it.