Sliding puzzles, also known as 8-puzzle or 15-puzzle are a game you might recognize from your childhood. This image might ring a bell.
This project began simply as an algorithm that can solve sliding puzzles, but what's a fancy algorithm without a user interface.
Launch the app here. The goal of the game is to move numbered tiles until the tiles are order. A tile can only be moved into the blank spot.
To move a tile into the blank position click on it with your cursor.
You can also use up, down, left, and right arrows to move the tiles. The blank moves in the direction of the arrow-direction. By clicking the up arrow, the tile above the blank will move down into the blank (the blank moves up).
Shuffle by clicking the on-screen shuffle button or by pressing spacebar on your keyboard.
Undo by clicking the on-screen undo button or by pressing backspace on your keyboard.
Click the change size button and select your prefered size.
The AI solve will learn how to solve the puzzle, then perform its solution. It can be called using the on-screen AI Solve button (in later versions the enter keypress). When the computer is solving all user interactions are disabled until the AI finished its solve (in later versions a stop button will be added). In the current version AI solve is limited to 3x3.
The frontend is built using standard HTML, CSS, and JavaScript.
The game is rendered using the JavaScript Canvas API. The Canvas API makes drawing graphics and animations simple.
The game logic, functionality, and algorithms are also written in JavaScipt to bring the canvas to life.
I used Python to prototype the algorithms to make development easier with libraries I'm more comfortable with. The programs are then translated to JS to allow the game to function.
Sliding Puzzle is not a finished project, and it's still being built. In the current sprint I am working on improving the solver to handle larger board sizes, refactoring the code to be more maintainable in the future, and making some frontend changes to make the experience more interesting.