A JS sliding puzzle, leaning on Vue and its (awesome) built-in <transition-group> to handle the tile sliding animation, with CSS grid for the layout.

The puzzle uses Vue data and reactivity to highlight squares that are in the correct location, and it counts the total with a progress bar at the top. The puzzle is always solvable, since the board starts solved then generates random legal moves to shuffle the board. No two games are the same (except by extreme coincidence)!

It's possible to change the board size by altering the ratio near the top of the JS, but it's still a little buggy at some sizes and takes a while to generate at larger values. Plus, it becomes illegible at a certain point.

Playable with mouse clicks, keyboard arrow keys, touch, or swipe (thanks to Hammer.js)

Probably not very accessible at all because I wasn't really sure how to handle a number grid in that regard (and the autofocus is probably very bad), but tried to make it as semantic as possible at least.