Build Status Code Climate Test Coverage
Jigsaw Puzzles Framework for JavaScript
headbreaker - a spanish pun for rompecabezas - is a JavaScript framework for building all kind of jigsaw puzzles.
- 100% pure JavaScript
- Headless support domain-model
- Highly tested
- Customizable data-model
- Zero-dependencies - although Konva.js is used a a rendering backed, it is an optional dependency which can be replaced with custom code
npm install --save headbreaker # optional: manually add konva to your project if you want to use # it as rendering backend npm install --save konva
<!-- just add a div with an id... --> <div id="my-canvas"> </div> <script> // ...and a script with the following code: let dali = new Image(); dali.src = 'static/dali.jpg'; dali.onload = () => { const canvas = new headbreaker.Canvas('my-canvas', { width: 800, height: 800, image: dali }); canvas.autogenerate(); canvas.shuffle(0.7); canvas.draw(); } </script>
// headbreaker can also be loaded on the server, which allows to // fully manipulate its model const headbreaker = require('headbreaker'); // Create a puzzle const puzzle = new headbreaker.Puzzle(); puzzle .newPiece({right: Tab}) .locateAt(0, 0); puzzle .newPiece({left: Slot, right: Tab}) .locateAt(3, 0); puzzle .newPiece({left: Slot, right: Tab, down: Slot}) .locateAt(6, 0); puzzle .newPiece({up: Tab}) .locateAt(6, 3); // Connect puzzle's near pieces puzzle.autoconnect(); // Translate puzzle puzzle.translate(10, 10); // Shuffle pieces puzzle.shuffle(100, 100); // Directly manipulate pieces const [a, b, c, d] = puzzle.pieces; // Drag a piece 10 steps right and 5 steps down a.drag(10, 5); // Connect two pieces (if possible) a.tryConnectWith(b); // Export and import puzzle const dump = puzzle.export(); const otherPuzzle = headbreaker.Puzzle.import(dump);