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.
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-positionto place the desired top-left point of our clipping rectangle at the origin (note the negative numbers) and then used
heightto 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.