This is a video-game implementation of the 15-puzzle, 8-puzzle, or more generally, any n² − 1 puzzle, a sliding-block puzzle featuring an n×n grid of squares, where all but one square has a unique block. The goal is to put the squares in increasing "reading" order: 1 in the top-left, 2 to the right of that, and so on.

Half of the possible starting positions are solvable, and half are not. There's a button to generate either type of starting position, depending on what you'd like to illustrate.

You can tell whether a puzzle is solvable in linear time. But finding the shortest solution (fewest moves) is NP-hard.

This implementation is written in the Civet programming language using the Solid web framework, Vite bundler, and Vitest testing framework.

Most notably, it uses CSS transitions to achieve smooth animations of piece slides.

$ pnpm install # or npm install or yarn install

Then you can use the following scripts:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.

Builds the app for production to the dist folder.
Bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Runs some built-in tests in Vitest.