03

Game of Fifteen

Classic 15 puzzle with modern neomorphic design, a dark mode, and multiple interaction methods that resemble the physical puzzle.

My role

Design and development

Stack

JavaScriptHTMLScss
Game of Fifteen project screenshot

Why I built it

This is a portfolio project that I built to showcase my JavaScript skills. For an added challenge, I decided to use the trending neomorphic style that creates a resemblance to the physical puzzle but maintains a modern look and feel.

Stack choice

I chose vanilla JavaScript for this project in order to consolidate my knowledge of its core concepts. Scss was used to make the styles more manageable across the project, including its dark and light modes.

Game of Fifteen project screenshot
Game of Fifteen project screenshot
Game of Fifteen project screenshot

Challenges

One of the hidden challenges of this project was supporting the “tactile” feel in the different ways in which users move the tiles. By testing it on real users, I noticed that some tried to drag the tiles with their mouse; others tried to swipe them on a touch screen, yet others just clicked on them. I made sure that the game supported all of those interactions and worked with a keyboard for accessibility.

Lessons learned

In addition to cementing my knowledge of JavaScript, this project challenged my design skills and allowed me to implement complex visual elements with the help of Scss.