Html page contains the puzzle view of the image, the image size is fixed at 480x480.
There must be a selector which allows us to select a puzzle of 2x2, 3x3 or 4x4 (# of pieces), (corresponding to piece sizes 240x240, 160x160 or 120x120
The puzzle is displayed a whole (just the image) in the background and at the start pieces are positioned randomly. The positions MUST include locations outside of the image.
The result should look like the puzzle over here:
[url removed, login to view]
With the following differences
the pieces at the start should be random (shuffle button is not necessary, this can be automatic on coming to the page), and positions should include locations outside of the containing box.
Should detect when the puzzle is complete and a sound (mp3 file) should be played.
after 5 seconds (configurable in the code) a HINT must be shown in which a given piece NOT in position and the target location are highighted
Pieces must "Snap" into place, i.e. there must be some detection mechanism so that if the piece is close enough to the target location it snaps into position.
It is NOT necessary to rotate the pieces this is simpler and all we need... The pieces should always be correctly oriented so the user only has to drag and drop. the game is for young children so it should be as simple as possible.
You MUST provide a TEST website for this. Please do not bid on this project if you cannot post the result on a public test site. In order to simplify the testing, I will be using the public TEST site for validating the result before I try to install it locally.
Hello, please note that this project is urgent, I will favor bids which are less then 8 days. Please do not bid if you cannot deliver quickly (I am targetting October 25th for a working solution).