lizfischer / sliding-puzzle

🔷 Sliding puzzle (9-puzzle) implementation in vanilla JS and CSS.

sliding-puzzle

Sliding puzzle (9-puzzle) implementation in vanilla JS and CSS.

Live Demo

A live demo for the app can be found here: A Sliding Puzzle

Features

• Shuffle function that performs 20 valid random moves.
• Solve function that (naively) solves the puzzle. To be improved!
• Mobile-friendly
  • CSS translateXY() animations for mobile performance
  • Optimized for both smaller and larger screen sizes
• Pure vanilla Javascript. No external libraries used.

Tile Behavior

Correct State

When a tile is in the correct position, it glows blue.

Incorrect State

When a tile is not in its correct final position, it glows red.

In order to win the game, the user must first shuffle the tiles and then get them back into the original order, with the bottom right tile slot unoccupied and all tiles glowing blue.