jQuery - UI (Jigsaw)
One of the funnest things I have done with jQuery is a Jigsaw game. It shows off jQuery UI with the drag and drop functionality. The jigsaw pieces themselves are draggable and it snaps to an id or class which is setup as being inner. Meaning the jigsaw board is setup as a flexbox element in a square and the pieces snap inside the board to the corresponding piece. There is a lot of functionality available for the pieces in the form of an animation from sliding in to exploding. There are many different animations that can be used. My jigsaw uses exploding. It is possible again to add audio to this as well as different rules.
Sadly I had issues doing this within WordPress itself. I had a confliction issue with jQuery UI. I have left it working within WordPress as the draggable function works but the drop does not work properly and there is a sizing issue within my board element. It works as intended locally.
This is the HTML for the Jigsaw, The overlay is the same image with a black 70% overlay which is the board so you can see what is meant to drop where. The .pieceBoard is the draggable pieces.
The function is the same and is repeated 9 times. There is a few easier ways of doing this but time wasn’t on my side so I chose the fastest way possible which was to get 1 piece working and duplicate it for the rest. The first part of the function is the #pieces1 is draggable and drops into #puzzle1 (So Piece > Puzzle board). Its kinda like a game of pairs with a jigsaw board.
The second part of the function is the droppable. This is triggered when the #pieces1 drops into #puzzle1, it should accept it, it should fit and highlight that its in. I have an event triggering on the drop which adds the class pieceDropped to #puzzle1. This triggers a face and the piece explodes whilst doing so. I have CSS on the board which has the original image as a background-image, meaning when the piece explodes it then becomes transparent but the background image kicks in to show that piece has been dropped successfully.
Below is an image of the explosion. The image sizes are not exact so the image does look a bit off. This could be fixed with better sizes used but the main point of this is to show the different functionality that jQuery provides rather than a perfect working jigsaw puzzle.
