Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS – step3: jigsaw generation

Here we go with the thir part of the jigsaw puzzle generator made with KineticJS. In the first step we splitted an image into pieces, in the second step we created a jigsaw piece shape, and now it’s time to cut an image into randomly generated pieces.

The code is still uncommented but the concept is:

* Any piece has four sides
* Each side can have a “hill” or a “hole”, with the exception of sides on puzzle borders which are straight
* Starting from the upper left piece, we randomly decide if left and bottom sides will be “hill” or “hole”
* Accordingly, leftmost and upper pieces (if any) will have “hole” to host “hill” or “hill” to host “hole”

This is the code:

And you can see the final result here.

Pick and drag pieces around

Is there something more you would like to see about this topic? Maybe how to rotate and join pieces?

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)
Loading...Loading...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 9 comments

  1. Harack

    on January 9, 2013 at 3:32 am

    Seems to lag a bit more than it should when dragging pieces.

  2. Vitor

    on January 9, 2013 at 6:41 pm

    Hi! How many marriage purposes do you receive each week, Emanuele? This is one! :D

  3. shark255

    on January 14, 2013 at 9:18 pm

    maybe offtop: do you know any solutions how to use kineticjs with box2d library togeter?

  4. ami

    on February 6, 2013 at 12:22 am

    hi,
    nice, very nice, but if I try to unvisible the stroke, I show a small gaps between the piece, how can I fix it?

  5. angelo

    on April 13, 2013 at 1:31 pm

    your example doesn’t show nothing except a skeleton jigsaw board without pictures and also the lesson/post n.4 it doesn’t scroll at all. I loaded your page on firefox 20.0 and chrome latest version with same result. I suggest to have a look.
    Thanks a lot

  6. angelo

    on April 13, 2013 at 1:32 pm

    Sorry on firefox this example is shown but not in chrome while n.4 doesn’t scroll at all in both browsers.

  7. Santhosh

    on August 27, 2013 at 2:29 pm

    For those who see only black pattern instead of the images within the pieces change the shapes fill property
    from this
    /////
    fill:{
    image:imageObj;
    }

    to this
    ///
    fillPatternImage:imageObj;

  8. Santhosh

    on August 27, 2013 at 2:31 pm

    Thanks for such a great tutorial :) It would be so nice if you can show us how we can shuffle, join and validate the pieces.

  9. Sha

    on October 11, 2013 at 2:34 am

    I got this error when i run this code, can you please let me know the reason?Uncaught TypeError: Object # has no method ‘getContext’

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×