Web Programming Step by Step
Homework Assignment 6: Fifteen Puzzle

This assignment is about JavaScript's Document Object Model (DOM) and event handling. You must match in appearance and behavior the following web page (between but not including the thick black lines):

expected output

Background Information:

The "Fifteen puzzle" (more generally called the Sliding Puzzle) is a simple classic game consisting of a 4x4 grid of numbered squares with one square missing. The object of the game is to arrange the tiles into numerical order by repeatedly sliding a square that neighbors the missing square into its empty space.

You will write the JavaScript code for a page fifteen.html that plays the Fifteen Puzzle. You will also submit a background image of your own choosing, displayed underneath the tiles of the board. Choose any image you like, so long as its tiles can be distinguished on the board. Turn in the following files:

You will not submit any .html or .css file, nor directly write any XHTML or CSS code in this assignment. Instead, we will provide you with the XHTML and CSS code to use, which should not be modified. (You should download these files to your machine while you're writing your JavaScript code, but your code should work with the provided files unmodified.) To modify the page's behavior and content, write JavaScript code that interacts with the page using the DOM. To modify its appearance, write appropriate DOM code to change styles of onscreen elements by setting classes, IDs, and/or style properties on them.

Appearance Details:

In the center of the page is a set of tiles representing the playable Fifteen Puzzle game. Each tile is 100x100 pixels in total size, including a 2px black border around all four of its sides. (This leaves 96x96 pixels visible area inside the tile.) Each tile displays a number from 1 to 15 in 32pt text using the default sans-serif font available on the system. When the page loads, initially the tiles are arranged in their correct order, top to bottom, left to right, with the missing square in the bottom-right. The tiles also display a chunk of the image background.jpg, assumed to be located in the same folder as your page. (A CSS class named puzzlepiece has been created for you that represents these styles, but nothing on the existing page uses this class. If you want any onscreen elements to use this class, you'll have to set it using DOM code.)

Your background image appears on the 15 puzzle pieces because it is set as the background-image of each puzzle piece. By adjusting the background-position on each div, you'll be able to show a different piece of the background on each of the 15 puzzle pieces. One confusing thing about the background-position property is that the x/y offsets shift the background behind an element, not the element itself; this means that the offsets are the negation of what you may expect. For example, if you wanted a 100x100px div to show the top-right corner of a 400x400px background image, you would set its background-position to -300px 0px.

Centered underneath the puzzle tiles is a Shuffle button that can be clicked to randomly rearrange the tiles of the puzzle. The last content on the page is a right-aligned paragraph containing two links to the W3C validators and JSLint. These are the same images and links as used in the previous assignments. The images should not have borders.

All other style elements on the page are subject to the preference of the web browser. The screenshots in this document were taken on Windows XP in Firefox 3, which may differ from your system.

Behavior Details:

When the mouse button is pressed on a puzzle square, if that square is next to the blank square, it is moved into the blank space. If the square does not neighbor the blank square, no action occurs. Similarly, if the mouse is pressed on the empty square or elsewhere on the page, no action occurs.

Whenever the mouse cursor hovers over a square that can be moved (one that neighbors the blank square), its appearance should change. Its border coler should change from black to red. Its text should become underlined and should become drawn in a green color of #006600. (A CSS class movablepiece exists that represents these styles.) Once the cursor is no longer hovering over the square, its appearance should revert to its original state. Hovering the mouse over a square that cannot be moved has no effect.

When the Shuffle button is clicked, the tiles of the puzzle are randomized. The tiles must be rearranged into a solvable state. Note that many states of the puzzle are not solvable; for example, it has been proven that the puzzle cannot be solved if you switch only its 14 and 15 tiles. We suggest that you generate a random solvable puzzle state by repeatedly choosing a random neighbor of the missing tile and sliding it onto the missing tile's space. A few hundred such random movements should produce a shuffled board. Your shuffle algorithm should be relatively efficient; if it takes more than a second to run or performs a large number of unnecessary tests and calls, you may lose points.

The game is not required to take any particular action when the puzzle has been won, that is, when the tiles have been rearranged into the correct order.

Extra Features:

In addition to the previous requirements, you must also complete at least one of the following additional features. If you want to complete more than one, that is fine, but only one is required.

Near the top of your JS file, put a comment saying which extra feature(s) you have completed. If you implement more than one, comment which one you want us to grade (the others will be ignored). Regardless of how many additions you implement, the main behavior and appearance should still work as specified. You may not modify the XHTML/CSS files; each feature must be done through JavaScript. If you have a different idea for an addition to the program, please ask us and we may approve it.

Development Strategy and Hints:

Past students claim that this program is hard! We suggest the following development strategy:

Here are some hints to help you solve particular aspects of the assignment:

Implementation and Grading:

Submit your assignment online from the turnin area of the course web site. For reference, our solution has roughly 125 lines of JavaScript including blank lines and comments.

You should make extra effort to minimize redundant code. If you are not cautious about avoiding redundant code, capturing common operations as functions, etc., it is easy for your code size and complexity to grow. You can reduce your code size by using the this keyword in your event handlers.

For full credit, your JavaScript code should pass the provided JSLint tool with no errors reported (when the Recommended options are checked). Follow reasonable stylistic guidelines similar to those from a CSE 14x programming assignment. For example, utilize parameters and return values properly, correctly use indentation and spacing, and place a comment header on top of the file, atop every function explaining that function's behavior, and on complex code sections.

Some global variables are allowed, but it is not appropriate to declare lots of them; values should be local as much as possible. If a particular value is used frequently throughout your code, declare it as a global "constant" variable named IN_UPPER_CASE and use the constant throughout your code. You should only use material discussed in the textbook or lectures unless given permission by the instructor.

You should separate content (XHTML), presentation (CSS), and behavior (JS). As much as possible, your JS code should use styles from the CSS rather than manually setting each style property in the JS.

Implement the behavior of each onscreen control using JavaScript event handlers defined in your script file. For full credit, you must write your code using unobtrusive JavaScript, so that no JavaScript code, onclick handlers, etc. are embedded into the XHTML code.

You may be able to find Fifteen Puzzle games written in JavaScript on the internet. Please do not look at any such games. Using or borrowing ideas from such code is a violation of our course academic integrity policy. We have done searches to find several such games and will include them in our similarity detection process.

Part of your grade will come from successfully uploading your files to the web. Please do not place a solution to this assignment online on a publicly accessible web site.