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

Cool!!!! :)

Very good!

Thanks a Lot!

2008-07-01
Aang

gr8 dude! keep it up

2008-08-08
uakhan

I think it’s easy to solve the “unsolvable”. To avoid unsolvable configurations the shuffle of pices must be done in a natural way, the same we could do in a real game, that is, by slidding a random piece toward the empty space (randomly) instad of skypping themselves. I don’t know if it’s possible to perform with mootools, in fact I’m a nerd. please notice me in case you can solve that issue, thanks.

2008-08-19
Mario

Muy bueno! gracias lo usaremos seguramente!

2008-10-23
Desarrollo de sitios web

Is this puzzle always solvable? I am trying it ith a 16 piece puzzle. Can’t seems to solve it.

2009-11-29
wayne


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 | twitter

recently :::

diversions :::

45+ Amazing Insect Shots in Photography
Insects are one of the most fascinating creatures on earth. There are more than 800, 000 species of insects in the world.
Grayscale color | Stroep Blog
This is how I create a grayscale color in actionscript 3.
Google Flash API
This is great ... google has made this easy ... stay tuned to see what i am working on ...
25 Free Mac Apps That Will Boost Your Productivity
There are many applications that can help you work faster and efficiently. Though, not many applications come cheap.
you still want more »