Play a sliding puzzle game with real image which get's mixed up on a n*n matrix. Try to solve the puzzle as fast as possible.
- create Piece class
- each piece has: position, targetPosition, image (as a background), isEmpty piece flag
- create Puzzle container
- randomize pieces by moving the empty piece randomly
- keep the aspect ration of the image in the canvas
- allow user to move the empty piece
- add start & end game scenarios
- add a timer
- animate the pieces with physics
You can see the version live on Codepen.
- Built with p5js