A simple game where the player is given a set shuffled pieces of a photo and a blank template to drag and drop the puzzle pieces onto. The player wins when all pieces are placed on their respective correct slot.
When starting the project, i made a quick mockup of the web app in order to have an basic design to start from and eventually extend. The application would be developed in the following steps:
- Writing the basic structure of the application through HTML
- Styling the static structure trough CSS
- Writing the code for the dynamic functionality e.g. puzzle pieces and internal game logic
A navigation bar would help with keeping the difficulty selector, the time as well as other future functionality (e.g. scoreboard or load images). For implementing the rack with starting puzzle pieces, i assumed a container full of smaller squared placeholders in which each contains a puzzle piece. The template was also implemented in similar way, with placeholders in which the player can drop pieces onto.
Some steps that could be taken to make the application better
- An actual difficulty, currently only "easy" is working now
- Better responsive design and mobile compatibility
- A scoreboard based on time and difficulty