Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS – step 4: rotating the pieces

Emanuele Feronato Game design, HTML5, Javascript

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?

Want to learn more? Learn by example!

Get the full commented source code of an actual commercial cross platform HTML5 game!!

Comments 5

  1. Riccardo

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

  2. Nilesh

    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

    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

    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.

  5. pragnesh

    i have copied your code and try to run page
    i got “Uncaught TypeError: undefined is not a function ” error at var context = canvas.getContext(); line
    please help me

Leave a Reply

Your email address will not be published. Required fields are marked *