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(http://www.engr.sc.edu/images/news/ecels_6feb08/depaul_amiridis.jpg); background-repeat: no-repeat; background-position:-150px -20px; width:100px; height:120px"></div>results in a closeup of our Dean:
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.
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.