Tile Slider is out!
Here’s a Wikipedia description of the sliding block/tile puzzle:
A sliding puzzle… is a combination puzzle that challenges a player to slide … pieces along certain routes … to establish a certain end-configuration.
Data Structure
The solution would always be generated first:
// 2x2 solution
[1, 2, 3, null];
Then it would be shuffled to create the puzzle:
// 2x2 puzzle
[
[2, 3],
[1, null],
];
This is similar to the approach I used in generating a Sudoku puzzle (minus the complex algorithm).
UI
Like Tile Matcher, a lot of elements were borrowed and reused in the initial fiddle.
Preact was once again chosen to render elements like table and button.
<!-- 2x2 puzzle -->
<table>
<tbody>
<tr>
<td><button>2</button></td>
<td><button>3</button></td>
</tr>
<tr>
<td><button>1</button></td>
<td><button></button></td>
</tr>
</tbody>
</table>
The logic for sliding the puzzle pieces around is pretty straightforward. When a tile button is clicked, it checks the left, right, top, or bottom button for an empty value. (This is also why every puzzle/solution has a single null value.) If an empty value is found, then the values are swapped. The puzzle is considered solved when it matches the solution array.
Game
You can play the game and/or check out the source code. I’d love to hear your feedback and ideas.