#Puzzle Js Library
This is a simple javascript library which can generate a puzzle of x rows and y columns of a given image. The image is divided in a number (x * y) of slots, all of the same size.
##License
This software is distributed under the MIT License, read more at https://opensource.org/licenses/MIT
##Requirements
This library is written in vanilla javascript, so you don't need any js framework
##Getting Started
Include the library
<script src="path/to/library/puzzle.js" /></script>
Then in the document
<img id="myImage" src="/path/to/my/image.jpg" />
<div id="here"></div>
<script>
var p = new pz.Puzzle('myImage', { render_to: 'here', rows: 3, cols: 2 });
</script>
##Usage
var p = new Puzzle(img_id, options);
Options
- hide_original: whether or not to hide the original image. Default false.
- render_to: id of the element in which the canvas should be rendered. If not provided is appended to the body. Default null.
- rows: number of puzzle rows. Default 5.
- cols: number of puzzle cols. Default 5.
- margin: number of px of margin between the canvas border and the puzzle. Default 100.
- snap_offset: number of px of the snap functionality. Default 50.
- snap_color: hex code of the color of the border when the snap is active. Default '#00ff00'.
- grid_color: hex code of the color of the puzzle grid. Default '#0000ff'.
- slot_color: hex code of the color of the slot border. Default '#666'.
- puzzle_completed_text: text to show when the puzzle is completed after a shuffle, use '%TIME' as a placeholder for the elapsed time. Default 'puzzle completed in %TIME s!'
- move_after_shuffle: whether or not allow slot dragging only after a shuffle. Default true.
Methods
(void) shuffle()
Shuffles the puzzle slots and activates the timer and "check if completed" feature.