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