The 15 puzzle is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing. The goal of the puzzle is to place the tiles in order by making sliding moves that use the empty space.Note: not all shuffles are currently solvable.
supports different sized grids, merely by setting the gridSize variable
font-size is calculated and set in relative units (vmin), so it will scale as user resizes the viewport. Currently supports double digits numbers as a maximum. This could be easily adjusted but it would require a different font (or at least weight) and it would also make sense that the puzzle would be sized up to 100vmin.
tile color and areaKeys map (keeps track of valid tile moves for each position) are no longer hardcoded and get calculated
using grid-template-areas didn't seem to support using number for the areas, so I switched to using grid-area and using a row / column calculation
⚠️ performance wasn't a consideration, a quick win would be to minimize DOM insertion by just concatenating each to a string, and then inserting it at the end
⚠️ not addressed: isComplete check, making sure puzzle is solvable
gridSize
variablefont-size
is calculated and set in relative units (vmin
), so it will scale as user resizes the viewport. Currently supports double digits numbers as a maximum. This could be easily adjusted but it would require a different font (or at least weight) and it would also make sense that the puzzle would be sized up to100vmin
.areaKeys
map (keeps track of valid tile moves for each position) are no longer hardcoded and get calculatedgrid-template-areas
didn't seem to support using number for the areas, so I switched to usinggrid-area
and using a row / column calculation