Note: while Puzzle.js puzzles store their state locally (via localStorage), that behavior is inhibited on this page to make it easiest to see exactly what markup produces exactly what result.
Note: 3D support is in beta at this point, and the support for it is in two files that are auxiliary to puzzle.js. To use it, add puzzle-box.js
and puzzle-box.css
to your HTML. 3D support will likely move directly into puzzle.js and puzzle.css once it leaves beta.
3D support is built atop the Subgrids feature.
To mark a puzzle for 3D, add a puzzle-box
class on your puzzle-entry
, and add six subgrids. Mark each subgrid with one of the following: side-front
, side-back
, side-left
, side-right
, side-up
, and side-down
. The subgrids can be provided in any order. Note that this example is leveraging the subgrid feature of applying any option defined on the parent (in this case data-text
) to all subgrids. Subgrids can also override where desired.
3D puzzles are currently limited to boxes, but they need not be cubes.
The subgrid faces of a box support all the behavior and styling that a 2D puzzle-entry
supports. Any functionality that links cells (like edges, paths, and spokes) will work between faces, such as this train-track example.