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

 

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
Daniel Bulli2

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
Daniel Bulli2

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
Daniel Bulli2

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

Thanks a lot!!! Brilliant script!!! You Rock!!! :)

Cheers m8!

2009-11-22
Cheers m8! an open directory of Bars & Pubs worldwide

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

2009-11-29
wayne

Is there any way of auto initializing the puzzle at all? So that you don’t need to press make.

2010-03-25
Simon

Nesecito ayuda con el puzle :S como hacer para canbiar la imagen por otra ya la cambie pero ala hora de hacer el puzzle lo hace en blanco

2010-04-18
Gabriel

Site has been moved

nuff-respec.com is no longer being updated. Please head over to dbulli.com for new content