Puzzle Game - JQUERY

Category: jQuery Realized: December 2011

The aim of this puzzle game, made of 50 pieces, is to reorder the pieces and obtain the original picture. The characteristics that makes this puzzle game hard, is that when a piece is moved to a new position, all the pieces before or after the placement position will be shifted, in order to create the necessary space for the piece to be placed. Therefore, clusters of pieces already placed in the right position on multiple rows could break.

Try this demo: click and drag the pieces to reconstruct the original image.

The best approach to solve the puzzle is starting from the top left corner and place one-by-one the pieces in the right order, descending one row at the time until the bottom right corner. Alternatively, a good strategy is to cluster pieces that will end close to each other. This strategy will reduce the number of choices, between pieces that will be placed above these clusters. It will be then easier to find the right pieces that need to be placed into the rows on the top.

You'll experience a new way of solving puzzles, definitely more challenging and hopefully funnier.

Difficulty

The difficulty of this puzzle is halfway between the traditional puzzles and the sliding puzzles. The traditional puzzles are easier, since the player can divide the pieces in clusters solve each cluster separately and then join them together. The sliding puzzles are extremely difficult because the player is not allowed to move the pieces directly to the right position. Unlike other puzzles, a sliding block puzzle prohibits lifting any piece off the board. Therefore the player has to find a way to move all the pieces through paths opened up by each move.

This puzzle game, instead, find a good mix between the two alternatives. It gives the freedom to freely move the pieces within the board. At the same time, moving a piece will transform the position of other pieces. When the user moves one piece from a position to another, he automatically moves also all the pieces between the starting position and the ending position. As we can see in the following image, in step 1 we can observe how the player moves a piece (circled in red) to the above row, in the correct place. This leads, in the step 2, to move all the following pieces (highlighted with the red rectangle) of one position to the right. In the step 3 the player move the final piece (circled in red) to the right position, in the row below. Consequently all the other pieces shift of one position to the left, step 4, and the original image is revealed.