BRIEF
The idea of the web-app is a sliding puzzle game. A square picture is cut into 9 equally orthogonal pieces. These pieces are randomised, and the user is asked to put them in the right place, by sliding each piece in order to create the original picture.
Technically, we set the picture's pieces as background. The last square will always be blank. The user is able to slide a piece only if the blank square is next to it. The original positioning of the pieces that creates the original image is set up in the css file.
Multiple users can interact with the server simultaneously. When a user solves the puzzle, they cn press the 'Check Solution' and if they are correct their time is compared with the ten quickest solutions so far. The ten users with the best times are presented.
CODING
I used modules mostly in the back end server and an ajax module for the front end. I also used functional programming and rewrote the code multiple times in order to make it more clear and reduce the clutter. Main.js includes good examples of functional programming as well as arrow functions.
I also use asynchronous programming through promises.
In the front end I use event tracking for element clicks and the loading of the page.
In the beginning I was only using html elements for the solution of the puzzle, but then I decided to base the game mostly on array manipulation and perform a visible changes afterwards.
UX & UI
Puzzle game is a very simple and fun game that can be played from a very young age. Multiple players can play at the same time, competing to be the fastest.
When the user opens the game initially, the original image is shown. Then the users can enter their name and click on 'New Game' to shuffle the puzzle and start playing. When they think they are done they can press 'Check Solution' to check if the image is correct. The user can also change the image by selecting another one.
On the top of the page is the headline, on the middle is the puzzle and on the right there are the top solutions. And at the bottom the images to select.
The game is easily played on the mobile as well. I also have modal information boxes that pop up and help the user.
The web app conforms with accessibility standards WCAG 2.1 AA and has passed the tests from axe - Web Accessibility Testing.
