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 – step 1

Before we start, let me tell you I hate jigsaw games on the web, but I have a little daughter who loves them and I wanted to try KineticJS, an HTML5 Canvas JavaScript framework which claims to enable high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

So I messed a bit with the engine, until I got:

* A full screen canvas element (which KineticJS calls Stage)
* An external image loaded (featuring Princess Merida)
* Such image being splitted into rectangular pieces (currently I am working on “real jigsaw” shapes)
* Every piece ca be dragged and dropped around the canvas
* Picked up pieces are in front of the rest of the puzzle

This is the code, still unexplained as I am still experimenting with it

And you can see the result at this page.

The result is interesting in my opinion, at least with only a few lines of code, but I found it a bit laggy on mobile devices.

Anyway, stay tuned for a real jigsaw puzzle.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4.50 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 5 comments

  1. guest

    on January 3, 2013 at 7:05 pm

    Quite interesting. On my iPad works very fast. Here is my educational game written in jQuery+HTML on Android: https://www.dropbox.com/s/ydiirxg9e8mjmf6/20120824_212648.mp4 , sample code: https://www.dropbox.com/s/nva4mknky5vgrx5/level2.rtf and application: https://www.dropbox.com/s/qq2h4em1187mopm/KoloroweSlowka.apk (works good/tested on Galaxy S II, SIII and Note)

  2. Saru

    on January 3, 2013 at 7:41 pm

    You could add something to make it look nicer:

    var startPosX = (window.innerWidth – imageWidth)/2;
    var startPosY = (window.innerHeight – imageHeight)/2;

    and then add these to the tile positioning,

    x: i*pieceWidth+i+startPosX,
    y: j*pieceHeight+j+startPosY,

    :D

  3. Ern

    on March 5, 2013 at 11:16 am

    Very nice!
    Two things to make it even nicer:
    1. let the script rattle the pieces
    2. make the pieces stick when they are at the right place

  4. Creation of a jigsaw puzzle game – Flash AS3 version - Emanuele Feronato

    on July 15, 2013 at 10:32 am

    […] month I published a 4 steps tutorial about the creation of a jigsaw puzzle using HTML5 Canvas and KineticJS (also see step 2, 3 and 4), and now I am going to show you Ami Hanya‘s AS3 version of the […]

  5. Arindam Mojumder

    on October 29, 2013 at 11:39 am

    Please check this link also.

    http://scripto-mania.blogspot.in/2013/10/canvas-jigsaw-puzzle-kineticjs-and.html

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

×