Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS – step2: real jigsaw pieces
Talking about Jigsaw Game game, Game development, HTML5 and Javascript.
Do you like my tutorials?
Then consider supporting me on Ko-fi.
Yesterday I started playing with KineticJS and created the bare bones for a jigsaw puzzle prototype.
Today I added a few lines, creating a draggable shape of a jigsaw piece filled with the original image at lines 59-89 using Canvas drawing methods moveTo, lineTo, quadraticCurveTo:
And if you look at the working example, you will see a real jigsaw piece ready to be moved around.
Next step will be the transformation of the entire image into random jigsaw pieces, stay tuned!
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.