CSCE 590: Problem Set 3

Due: Monday, 31 March 2008 @2:30pm

Puzzle Me!

For this problem set you will implement an AJAX application. You will be implementing a head-to-head jigsaw puzzle game. The basic use case goes as follows:

A user shows up to your website and enters a nickname for himself (no need to verify email address). He then waits until another user shows up to the website and they are automatically paired. The game starts for both of them. Both of them are shown the pieces of a jigsaw puzzle which they must solve by drag-and-dropping them into place. They are also shown a list of other photos (10 or so) as well as depiction of the state of the opponent's current board. At any time the user can click on one of the other photos and his opponent's picture will immediatedly switch to the picture he clicked on. Note that the opponent's pieces will not move and that the correct pieces will remain correct, only the picture shown in the pieces changes.
The winner of the game is the first one to finish the puzzle (or, maybe, finish x puzzles in a row?) and a player's time is increased by some fixed amount (not sure what number makes sense here) every time he changes the opponent's picture.

You can use javascript libraries, such as scriptaculous and prototype, to help you implement the drag-and-drop and the XHR communications. The whole game should run without any new page loads, that is, only XHR requests are allowed during the game. You can grab images (all you really need are the URLs) from any website, I recommend flickr's intersting pictures, but notice that all your pictures need to have the same aspect ratio.

The puzzle pieces will be rectangles and the puzzle itself consists of dividing the picture into a grid of rectangles. You can choose whatever specific size you think works best. One important tip is that you do not need to cut the pictures into pieces. Instead, use the old div with background image trick. For example, the following bit:

<div style="background-image:url(;
background-repeat: no-repeat;
background-position:-150px -20px;
results in a closeup of our Dean:
If you take a look at the original image you will note that it is larger than this and that we have cropped it. We used background-position to place the desired top-left point of our clipping rectangle at the origin (note the negative numbers) and then used width and height to determine the size of the rectangle. This trick is used to generate CSS image sprites but you will also find it perfectly suited for generating your puzzle pieces.

Submission Instructions

There will be demos in class on March 31 and you will submit all your code to me via email just before class. As always, you can work in pairs if you want.

José M. Vidal
Last modified: Sun Mar 30 14:17:57 EDT 2008