This tool dynamically switches and renders two board sizes for the slide puzzle: an 8-puzzle on a 3x3 grid (default) and a 15-puzzle on a 4x4 grid.

Internally, the state is managed as a one-dimensional array rather than a two-dimensional array; for example, the 3x3 uses integers 0 to 8, with 0 representing the empty cell.

Each tile is positioned using the CSS Grid layout, rendering its exact location by reverse-calculating the row and column coordinates from its index.

For tile movement, the system dynamically calculates an array of adjacent indices (up, down, left, right) from the current empty cell's index.

When a user clicks or taps a tile, the swap is executed and the screen redraws via React state update only if that tile's index is in the adjacent array.

Strict boundary checks physically prevent diagonal moves or moving tiles that are far away.

Manual operation in play mode is strictly limited to clicks or taps; keyboard controls or swipe drag-and-drop are not supported. Each tile move increments the move counter, and clearing is determined when the current array perfectly matches the target state (ordered from 1, ending with the empty cell 0), accompanied by a visual effect.

The shuffle function executes a continuous series of valid sliding moves backward from the completed state, rather than just randomizing the array, which ensures the parity condition (solvability) is maintained.

Specifically, it prevents useless back-and-forth moves, applying 40 moves for the 3x3 size and 20 moves for the 4x4 size at 30-millisecond intervals.

Note that this shuffle move count does not represent the minimum necessary moves to solve the resulting board.

The Custom Problem mode lets you swap tiles by tapping two in sequence or overwrite a cell using the palette; duplicate values automatically swap.

Text import splits input by spaces, commas, or semicolons, capped at 1,000 UTF-16 code units. It validates that tokens are strictly unsigned decimal integers containing exactly 9 or 16 numbers where every value from 0 to 8 or 15 appears exactly once, including 0.

Any input with invalid tokens, missing values, or duplicates is rejected with an error and will not be applied to the board. Starting the solver with "Start Solver with This Problem" applies the validated configuration and directly begins the A* search and solution playback in one action.

A real-time parity check mathematically determines if the configuration set in edit mode can reach the target state (is solvable).

This is based on the "Inversion Count" of the one-dimensional array, which is the sum of numbers smaller than the current tile located to its right, explicitly excluding the empty cell "0".

For the odd-sized 3x3, it is solvable if this inversion count (excluding 0) is even. For the even-sized 4x4, it evaluates the row of the empty cell from the bottom, and it is solvable only if the sum of the inversion count (excluding 0) and the empty cell row position is odd.

Impossible states, like merely swapping 14 and 15, immediately show a warning. Keep in mind that mathematical parity solvability is separate from actually finding a solution within the search limits described below.

The automatic solver uses the A* algorithm with the Manhattan distance heuristic (the sum of the absolute row and column differences between each tile and its target position), prioritizing nodes that minimize moves and distance.

It runs synchronously on the main thread after a 100ms delay, during which board interactions are disabled. Separately, actions like resetting, resizing, or navigating away invalidate any pending search.

It uses strict limits of 30,000 loops for 3x3 and 12,000 loops for 4x4, counting loops instead of unique nodes. Exceeding these limits aborts the search without an unconditional guarantee of a shortest path.

If paused, moving tiles manually discards the previous solution path. Playback runs at 400ms intervals. Starting from the edit screen applies the board and launches the solver directly.

You can apply a custom background image to the puzzle tiles. When you select a file, the browser's FileReader API loads it as a Base64-encoded Data URI string, applied via the CSS background-image property.

Instead of physical cropping, it uses a background-size percentage (e.g., 300% for 3x3) and shifts the background-position dynamically to match each tile's correct index.

This tool does not permanently save play history or loaded image data to localStorage. Reloading the page or closing the browser discards the image and resets the board to its default state.