A library to create a puzzle from a given image
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6b65c13 Jan 23, 2018
Failed to load latest commit information.
img first commit Oct 14, 2015
js options and state as constructors Oct 14, 2015
.gitignore first commit Oct 14, 2015
README.md fixed readme Jan 22, 2018
index.html stuff Jan 22, 2018


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.


This software is distributed under the MIT License, read more at https://opensource.org/licenses/MIT


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>
    var p = new pz.Puzzle('myImage', { render_to: 'here', rows: 3, cols: 2 });


var p = new Puzzle(img_id, 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.


(void) shuffle()

Shuffles the puzzle slots and activates the timer and "check if completed" feature.