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.
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).
<!-- 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.