We all had played image puzzle at some point in our life. The game in which we have to arrange various shuffled pieces of a picture in an order. The inspiration to build this game using jQuery, came into my mind when I was surfing the jQuery UI examples. In those examples there was a example of jQuery UI sortable() function, which can sort li elements in a grid. The same functionality is needed for the game, where user can sort it using drag and drop in order to arrange the pieces. And here is the result:
For building this game I used jQuery, ui.core.js, ui.sortable.js files. When user clicks on the <ul> (the container which have image as background), the <ul> is >filled with 9 <li> elements with 100px height & width. Each <li> have same background image as of <ul>, but with different background-positions. Also the moves and time counter are incremented accordingly. After each drag and drop the order of <li> is checked. If order matches, then success message is displayed. The main functionality used here is the jQuery UI sortable() function.
You can try out the puzzle in new window. Things are not hard as they look. We can create amazing things using already built functions/plugins/code of jQuery. Please share if you have developed something interesting or have some great ideas. Solve the puzzle in your free time… Have fun!!!
nice tutorial.
thank you
nice plugin
Came to this site by Google looking for answers on putting maps on my page and just wanted to say thank you for your help!
Awsome
I appreciate, result in I discovered just what I used to be taking a look for. You have ended my 4 day lengthy hunt! God Bless you man. Have a nice day. Bye
Hi,
Nice concept…Can we shuffle images once we complete the game…as everytime images are coming on same place…!!