A simple HTML5 puzzle
- Download the puzzle.html page to your desktop and open it in your browser with JavaScript enabled.
- Use the mouse to drag a puzzle piece to a new location; the piece that was at the new location swaps with the first piece.
- When all of the pieces are arranged correctly, a message appears at the bottom of the puzzle.
- The number of puzzle pieces can be changed by changing the PIECES constant in puzzle.html.
- The completion message can be changed by changing the MESSAGE array in puzzle.html. The array can have from one to three phrases corresponding to the lines of the message.
- The puzzle image can be changed by changing the IMAGE constant in puzzle.html. Replace the base64 code by the code for another image.
- Linux: $ cat StandardModel.jpg | base64 -w 0
- There are free pages online to convert files to base64
- The moving_puzzle.html page assembles the puzzle automatically. Start by clicking the mouse.