Home & blog  /  Scripts  /  view post  /

Sliding block puzzle game

Overview

This is a Javascript/jQuery-powered simulation of the sliding block puzzle game, where a picture is broken up into blocks, randomly positioned, which are then one-by-one slid around to recreate the picture. The script allows you to specify the pic URL and the number of blocks you want the picture to be split into. You can even let the user stipulate the URL to another picture to use.

Example

Drag the blocks into the correct order to make the picture:

Here's the code behind this eaxmple:

1$(function() {

2     new Puzzle('#puzzle_holder', '../imgs/scriptDemos/slideyPuzzle/puzzle.jpg', 3, 3, 'tl', true);

3});

^^ top of page

Usage & params

Load a puzzle into your page by calling new Puzzle(container, picURL, rows, columns, corner, allowURLSpecify);:

container (str, node reference) - a string (to feed to a jQuery selector) or node reference to the container on your page that you want the puzzle to be loaded into

picURL (str) - the URL of the picture to be used for the puzzle

rows (int) - the number of rows of blocks

cols (int) - the number of cols of blocks

corner (str) - a string stipulating which corner should be empty - either 'tl', 'tr', 'bl' or 'br'

allowURLSpecify (bool) - if true, a form field and button are appended underneath the puzzle container allowing the user to specify the URL of another image to reload the puzzle with

^^ top of page

Notes

Dependencies (nearly none)

The only dependency the script has is that a container element is ready on your page (a string or reference pointing to this container is passed as the first argument in the function call - see usage and params, above). Apart from that, there are no CSS or HTML dependencies - the script does everything.

Difficulty

Obviously, the more rows and columns of blocks you have, the harder the puzzle will be. Bear in mind that, due to the randomness of the block positions and depending on the number of blocks, some puzzles will be impossible to solve.

Multiple puzzles

Since the script is object-oriented (i.e. instantiated with the new keyword), you can as many different puzzles as you like on one page.

^^ top of page
post new comment

Comments (6)

Kyle Simpson, at 5/10/'10 14:50, said: 
I spend 5 minutes solving it and all I got was this lousy Placebo picture. Seriously, where's my dancing unicorns or something???!!!

:)
Mitya, at 5/10/'10 15:42, said: 
lol yes, fair point, there should be something that happens when you complete it. I'll give it some thought. Dancing unicorns might be a tad beyond my Flash capabilities... :)
Vj, at 16/10/'10 06:05, said: 
It would be nice to allow somemore simpler functions :)

Like a simple pan function, for e.g. if I had a large image or a map, that I want to slice up and show pieces at a time, then it would be useful to me.
Mitya, at 18/10/'10 10:19, said: 
Yes but it was set up to be a slidey puzzle game, nothing else. You can tweak the code if you need it to behave differently.
Phil , at 24/10/'10 20:09, said: 
Thanks, fun!
martinnitsim, at 27/07/'12 04:08, said: 
hello again  trevor if your still knoking around this  is the  web address  
filling address , they have a deal on at the mo ,say martin told you to ring
post new comment