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?