DEV Community

loading...
Cover image for The Fifteen Puzzle Game built with vanilla JavaScript

The Fifteen Puzzle Game built with vanilla JavaScript

Gabriel Manussakis
Designer since 2010, developer since 2013. I mix design and code to build relevant projects.
・1 min read

This is the first game I developed for the web environment, my main goal was to build it with only HTML, CSS and vanilla JavaScript, without any kind of framework or library. Following the MVC pattern helped me to keep things organized.

With this project I learned a lot of multidimensional array and get the knowledge to do my second project as a puzzle: Angular Minesweeper.

The object of the fifteen puzzle is to place the tiles in order by making sliding moves that use the empty space whith as fewer moves as possible.

Play the game

You can see the code on Github:

GitHub logo Manussakis / fifteen-puzzle-game

The classic Fifteen Puzzle Game made with Vanilla JavaScript.

Fifteen Puzzle Game

Fifteen Puzzle Game

Rearrange the pieces in order with as fewer moves as possible.

Instructions:

  1. Type how many moves you want the board to be shuffled with (any value between 1 and 80).
  2. Click shuffle button and see the pieces shuffling.
  3. Try to rearrange the board with the same (or even fewer) number of moves that it was shuffled by clicking the pieces that has space to move. The pieces should be in ascending order from left to right, up to down.

Build

Run npm run webpack to build the project. The build artifacts will be stored in the dist/ directory.

Learn more about the Fifteen Puzzle on Wikipedia

Play the game




Discussion (0)

Forem Open with the Forem app