https://github.com/nico-src/jigsaw-js-puzzle-lib
A customizable JS Framework that generates a jigsaw puzzle out of an image.
https://github.com/nico-src/jigsaw-js-puzzle-lib
canvas javascript javascript-framework puzzle puzzle-game
Last synced: about 1 year ago
JSON representation
A customizable JS Framework that generates a jigsaw puzzle out of an image.
- Host: GitHub
- URL: https://github.com/nico-src/jigsaw-js-puzzle-lib
- Owner: Nico-Src
- Created: 2022-06-25T10:11:31.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-24T19:35:46.000Z (over 1 year ago)
- Last Synced: 2024-10-26T06:16:26.675Z (over 1 year ago)
- Topics: canvas, javascript, javascript-framework, puzzle, puzzle-game
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jigsaw JS Puzzle Library (WIP)
## Demo
[Demo](https://nico-src.github.io/portfolio/projects/jigsaw-puzzle/)
## Installation
Include the script in your file:
```html
```
## Usage
Create a Puzzle Instance:
```html
// defer to wait till everything else loaded
var c = document.getElementById('canvas');
var img = document.getElementById('image');
var puzzle = new Puzzle({
canvas: c,
rows: 15,
columns: 20,
image: img,
maxImageWidth: 60,
maxImageHeight: 75,
solveRandom: true,
hintsEnabled: false,
scaleMultiplier: 1,
});
puzzle.generatePieces();
puzzle.randomizePieces();
requestAnimationFrame(puzzle.draw.bind(puzzle));
```
### Options
| **Property-Name** | **Default** | **Description** | Required |
|-------------------|-------------|--------------------------------------------------------------------------------------------------------|----------|
| animationDuration | 250ms | How long the solve animation will take to finish. | |
| canvas | - | An HTMLCanvasElement to draw the puzzle to. | • |
| columns | 15 | How many columns the puzzle should have. | |
| hintsEnabled | true | If true the outline of the puzzle piece turns green when it is close enought to the correct position. | |
| image | - | The Image to generate the puzzle out of. | • |
| maxImageHeight | 75 | Determines the Maximum Height the image can take up. (In %) | |
| maxImageWidth | 50 | Determines the Maximum Width the image can take up. (In %) | |
| rows | 10 | How many rows the puzzle should have. | |
| scaleMultiplier | 1.0 | The Scale of the Canvas. (Higher Resolution = Worse Performance). **Keep at 1-2 for stable performance.** | |
| solveRandom | false | Boolean that tells if the solve animation duration for each piece should be randomised a little bit. | |