The puzzlejs from officialanoti

puzzlejs's Introduction

#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.