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.
Could use cleanup, but the visual part works. Couldn't get grid-template-areas to work with numbers (was using letters before). I think it might be unsupported. So I switched to laying out with grid-areas and providing a row / column instead, which was successful.
Need to still work on the interaction, which requires areaKeys to be generated. It's currently hardcoded to suite a 4 by 4 grid.
[x] generates grid based upon just setting a single variable: gridWidth
[x] generates the DOM elements
[x] appends emptyTile
[x] assigns color for each tile
[x] use JS for better font-sizing relative to container element
[x] UI control for setting grid size
[x] dynamically generate the areaKeys map.
[x] might not bother: DOM insertion happens for each element which is inefficient, look for @TODO in script
JanDW
commented
4 years ago
Started in https://github.com/JanDW/slide-number-puzzle/tree/numeric-grid-areas.
July 15
https://github.com/JanDW/slide-number-puzzle/commit/1716e23d085eb793ce7ed58f97c604fa257c1a30
Could use cleanup, but the visual part works. Couldn't get
grid-template-areasto work with numbers (was using letters before). I think it might be unsupported. So I switched to laying out withgrid-areasand providing arow / columninstead, which was successful.Need to still work on the interaction, which requires
areaKeysto be generated. It's currently hardcoded to suite a 4 by 4 grid.gridWidthemptyTileareaKeysmap.