Puzzle.js: A customizable interactive solver for hunt-style puzzles

Puzzle.js can embed interactive puzzle solvers into existing HTML pages! The master repository is located at https://github.com/tabascq/PuzzleJS.

It is constructed with the following goals in mind:

Easy to embed a puzzle in an existing HTML page
Zero JS or CSS knowledge required
Visually pleasing default output
Easy customization via CSS, if desired
Undo/redo and saved state
Fully-accessible interactive solving controls
Integration with “Copy to Clipboard” functionality used in online puzzle hunts
Easy integration into cooperative solving experiences

The interactive solver does not provide any insights for solving a puzzle, and does not even know the answer to the puzzle (at least for now).

Quickstart

Simply make sure the files in this repository are available to your web page, then add this to your page:

<script type="text/javascript" src="puzzle.js"></script>
<link rel="stylesheet" href="puzzle.css">

and optionally:

<link rel="stylesheet" href="puzzle-basic-colors.css">

IMPORTANT NOTE: In order to see paths and edges properly on your local development machine, you need to view your pages via a local webserver. In Visual Studio Code, I am using the “Live Server” extension with great results.

From there it's as easy as this!

Fill in the blanks and drag Boggle-style paths from letter to letter using each cell exactly once. Can you find BINARY, BRAILLE, and MORSE?

Demos

All demos are provided with the consent of their authors.

Several more mini demos like the ones above
Apples to Apples by Dana Y.
Dreidel by Lexi A.
Earth by Jeff L.
Pictionary by Dana Y.
Snakes and Ladders by Dana Y.
Twister by Kenny Y.

Documentation

Feedback

This is a work in progress! Please feel free to create issues and/or pull requests at https://github.com/tabascq/PuzzleJS.

If you have any questions, I can be reached with the handle “tabascq” on Discord/Gmail/Hotmail.