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?

  • Riccardo

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

  • 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

  • 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.

  • 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.

  • 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

  • HI All,

    Just in case others decide to do this, I spent quite a bit of time trying to repair the demo. All I managed to get working is a black screen with white dashes. Steps I took:

    – drawFunc passes in canvas, but if you use the latest kinetic library this is now a different object. You have to get the context like: context = canvas.getCanvas().getContext() instead of just canvas.getContext()
    – drawFunc tries to call .fillStroke on the canvas object. This doesn’t exist on any object I could find, but I did try .fillShape and .fillStrokeShape on the context, both of which did not work but caused a black screen.

    Also if you are going to share code please don’t make it so awkward to copy it. The copy function simply copies the URL of the site, and copying via web tools means I have to de-escape some characters. Maybe reference a github gist next time so I could share my changes?