A responsive javascript jigsaw plugin utilizing HTML5 Drag and Drop API.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Javascript dependencies that need to be included:
<!-- Polyfill JS -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default"></script>
- Include the core plugin files on your page:
<!-- CSS -->
<link rel="stylesheet" href="../path/to/file/puzzle.css">
<!-- Javascript -->
<script src="../path/to/file/puzzle.js"></script>
- Create a variable and initialize the plugin.
var puzzle = new Puzzle({options});
| Property | Description | Default |
|---|---|---|
| el | Container element which will hold the puzzle. This option MUST be passed a valid HTML element | null |
| image | URL for the image to be used. Must be a valid src value for the <img> tag | :) |
| numcolumns | Number of columns in the puzzle grid | 3 |
| numrows | Number of rows in the puzzle grid | 3 |
| difficulty | Determines how much of the puzzle is shuffled. Values include "easy","normal","hard" and "expert" | "normal" |
| debug | Outputs useful information for drag/drop events. Must be set as a boolean value | false |
Usage:
init()
Initialize puzzle instance and attach to container element.
returns puzzle instance.
Usage:
setOpts( Object[ {options} ] )
Redeclare options on current puzzle.
returns puzzle instance.
Usage:
setDifficulty( String["easy" | "normal" | "hard" | "expert"] )
Set difficulty of a puzzle using one of the predefined options.
returns puzzle instance.
Usage:
setGridSize( Object[ { [numrows, numcolumns] } ])
Update the number of rows or columns for a puzzle.
returns puzzle instance.
Usage:
setImage( String[ image_url ] )
Update the puzzle image (Must be a valid src value for the <img> tag).
returns puzzle instance.
Usage:
isSorted()
Check to see if the puzzle is completed.
returns true or false.
Usage:
getTiles()
Grabs the current order of tiles in the puzzle.
returns multi-dimensional array of tiles, the first item is the original position of the tile and the second is the tile itself.
Usage:
correctTiles()
Counts the number of tiles in order and returns that number.
returns number value of correct tiles.
These events are exposed through the settings and accept callback functions:
- dragstart - Fires when a tile is first dragged.
- dragenter - Fires when a tile enters a dropzone.
- drag - Fires while a tile is currently being dragged.
- dragover - Fires while a tile is dragged over a dropzone.
- dragleave - Fires when a tile is exits a dropzone.
- dragend - Fires when a tile is no longer being dragged.
- drop - Fires when a tile is dropped.
- touchstart - Fires when a tile is touched.
- touchmove - Fires while a tile is dragged over the document.
- touchhover - Fires while a tile is dragged over a dropzone.
- touchend - Fires when a tile is no longer being dragged.
- correct - Fires when a tile is dropped into the correct slot.
- finished - Fires when the entire puzzle is completed.
To use callbacks pass a custom function to one of the above events in your initial settings.
Each callback is passed a custom object that includes a reference to the puzzle instance, the event and the event target.
You can include the debug option to output useful information to the console.
- Polyfill IO - Extends vanilla JS support in IE
- Eric Harris - Initial work - Eric-Jr
This project is licensed under the MIT License - see the LICENSE.md file for details