27 April 2007

Slide Puzzle in JavaScript (mootools)

So I finally decided to try out one of these JavaScript libraries … and what better way than to create a Slide puzzle. I chose mootools because of there modular download … it’s pretty slick. My goal was to make it simple for users:

- include the source file
– add one DIV with IMG
– no need to slice up image

enjoy …

Enough talk … show me an example … it’s the first time I have used a library … so any helpful comments are appreciated.

update code (08/22/08) …

There was an error one of the safety checks i make … should be “||” and not “&&” .. duh !!

demo…

make 3x3 | make 4x4 | shuffle | fix | ricks cafe | red stripe
Red Stripe Image

usage…


//ADD SCRIPT TAGS
<script src="j/mootools.v1.00.js" type="text/javascript">
</script>
<script src="j/puzzle.js" type="text/javascript">
</script>	
//ADD DIV ID PUZZLE WITH IMG
<div id="puzzle">
<img src="abc.jpg" alt="" width="5" height="5" />
</div>
//CALL FUNCTIONS functions
//makes 3x3
Puzzle.make(3);
//shuffles puzzle
Puzzle.shuffle();
//fixes puzzle
Puzzle.fix() ;
//switch image
Puzzle.switch_image('xyz.jpg')

da source…

Here is the source files with the original UNCOMPRESSED JavaScript: puzzle.zip

 

comment

what they saidwho said it

Extremely cool – and even more addictive.

Submitted into queue @ tweako.com

2007-04-27
Mike

Thanks mike … was a great learning lesson … also thanks for submitting…

2007-04-27
DannyB

great!! really cool!
i tried in my website!
now i try to make some implementations but i can’t yet!let’s work!
thanks Danny

2007-08-22
Berto

Glad to help out Berto … and great example …
Berto puzzle

2007-08-22
DannyB

The puzzle is really cool, but unfortunately it creates unsolvable puzzles as well as solvable ones…

Any plans to fix that? Would be too cool :-)

2007-08-27
Fabian

Hmm… not sure there is such as thing as an unsolvable puzzle. Is there?

2007-08-27
DannyB

Unfortunately half of the starting positions for the n-puzzle are impossible to resolve.
en.wikipedia.org/wiki/Fifteen_puzzle

2008-01-03
Matt

Really handome job…………..I will use it……………..Thank you

2008-03-05
Shahidul Haque


note: you can only submit after you hit preview


nuff-respec is a weblog written by daniel bulli a senior web programmer in boston, ma.
more >

contact | resume | profile

recently :::

diversions :::

Collaborative data entry with Flex and BlazeDS
This is some cool stuff ... just opening browser side by side or get a friend ... Also check the yahoo map version.
Fisheye Component v0.3 (Flex)
Nice gallery, with source code provided. I think I should start looking into Flex a little more.
LOUIS VUITTON - Countless Journeys, Countless Emotions
A slick well done Fash campaign from Louis Vuitton.
MCBD
The HTML page it lives on is horrible, but the flash and he perception of depth is pretty neat.
you still want more »