Have fun and help me to get to 1,000,000 downloads!

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?

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 5

  1. Riccardo

    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

  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 *