https://number-slider.algogames.dev
Flying as a kid, I remember getting these free square puzzles with a 4x4 grid of numbers on them. Each number was housed in a square. That last piece was missing, so you could slide the squares could slide around.
The objective of the game was to have someone scramble the board for you then solve it so that the numbers appeared sequentially, with the empty piece on the lower right side.
Making this game presents a number of neat challenges. The key algorithm to making this work is, given a matrix of numbers with size N*M, and empty piece, E; move each piece from a select piece P0 toward E.
Suppose we number each piece adjacent to P0 in an increasing fashion, ie P1, P2, ...Pn until we reach the empty square E. After the move, Pn will occupy the position of E, and each piece before it will move likewise until P0 is in the position of P1.
Finally, after P0 moves, the piece E is placed in its prior position.
This game can be thought of as breaking down following the MVC structure. The main algorithms can be thought of as the Model, and the code manipulates the DOM as the Controller. Finally, the html page and the styles involved can be considered the View.
I use these names loosely, the essential idea is to break up our code into just enough abstractions to organize our code; but not so many as to create confusion.
Have fun!
https://number-slider.algogames.dev
Follow me on Twitter at Babakness.