Talking about Jigsaw Game game, Game development, HTML5 and Javascript.
Before we start, let me tell you I hate jigsaw games on the web, but I have a little daughter who loves them and I wanted to try KineticJS, an HTML5 Canvas JavaScript framework which claims to enable high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
So I messed a bit with the engine, until I got:
* A full screen canvas element (which KineticJS calls Stage)
* An external image loaded (featuring Princess Merida)
* Such image being splitted into rectangular pieces (currently I am working on “real jigsaw” shapes)
* Every piece ca be dragged and dropped around the canvas
* Picked up pieces are in front of the rest of the puzzle
This is the code, still unexplained as I am still experimenting with it
And you can see the result at this page.
The result is interesting in my opinion, at least with only a few lines of code, but I found it a bit laggy on mobile devices.
Anyway, stay tuned for a real jigsaw puzzle.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.