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 4: rotating the pieces

Time to add some new features to our jigsaw puzzle engine made with KineticJS, today we’ll see how to rotate pieces.

First, some considerations about game design. I played a lot of online jigsaw games and i did not like any of them which allow you to rotate the pieces by pressing some keys. HTML5 games are meant to be played on any device, so why forcing the player to use a keyboard? I also did not like the games with icons or on-screen buttons to rotate the pieces. I don’t want the player to move outside a piece to rotate it.

So I come with this solution: to rotate a piece, simply click on it. To move it around, drag it. I has to make some basic changes to the old script before adding this new feature, I’ll explain everything once the game engine will be completed, meanwhile you may want to have a recap of this series:

In step 1 I showed you how to split an image into draggable squared shapes.

In step 2 I showed you how to create real looking jigsaw pieces

In step 3 I showed you how to randomly generate a jigsaw puzzle with realistic pieces from an image

As said, this time I am showing you how to rotate the pieces, look at the final example at this page, drag piaces to move them around and click on them to rotate.

Everything is really easy with KineticJS, here is the script:

Next time, the hardest thing: scatter pieces around the table and allow player to put them together to solve the jigsaw puzzle. Any clue?

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3.67 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 4 comments

  1. Riccardo

    on February 5, 2013 at 3:32 pm

    salve,
    davvero interessantissimo questo blog e questo articolo in particolare, potrei farLe una proposta in privato? attendo suo contatto, grazie

  2. Nilesh

    on March 6, 2013 at 11:54 am

    Nice Post
    Recently came across your blog. Waiting for next part (part 5) of Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS
    Cheers

  3. Ting

    on March 6, 2013 at 8:25 pm

    This is an excellent tutorial. Tried this on kinetic-v4.3.3, turns out it has a bug that sends the onclick event even when it is dragged. when i switched back to v4.2 everything is fine. Thanks again for the great tutorial.

  4. Joe Flowers

    on January 29, 2014 at 2:06 am

    FYI the actual demo doesn’t appear to work anymore. In Chrome I get this error:

    Uncaught TypeError: Failed to execute ‘fill’ on ‘CanvasRenderingContext2D’: parameter 1 (‘[object CanvasRenderingContext2D]‘) is not a valid enum value.

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

×