Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS – step 1

January 3, 2013 • Game design, Html, Javascript by Emanuele Feronato • 3 Comments

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

<!DOCTYPE html>
<html>

<head>
	<style type="text/css">
		body{
			margin:0px;
			overflow:hidden;
		}
		#container{
			background-color: #888888;		
		}
	</style>
	<script type="text/javascript" src="kinetic.js"></script>  
	<script type="text/javascript">
	function drawImage(imageObj) {
		var piecesArray=new Array();
		var horizontalPieces = 4;
		var verticalPieces = 3;
		var imageWidth = imageObj.width;
		var imageHeight = imageObj.height;
		var pieceWidth = Math.round(imageWidth/horizontalPieces);
		var pieceHeight = Math.round(imageHeight/verticalPieces);
		var stage = new Kinetic.Stage({
			container: "container",
			width: window.innerWidth,
			height: window.innerHeight
		});
		var layer = new Kinetic.Layer();
          for(i=0;i<horizontalPieces;i++){
          	for(j=0;j<verticalPieces;j++){
          		var n = j+i*verticalPieces;
		        	piecesArray[n] = new Kinetic.Image({
		          	image: imageObj,
		          	crop:{
						x: i*pieceWidth, 
						y: j*pieceHeight,
						width: pieceWidth,
						height: pieceHeight
					},
					x: i*pieceWidth+i,
		          	y: j*pieceHeight+j,
		          	width: pieceWidth,
		          	height: pieceHeight,
		          	draggable: true
				});
				piecesArray[n].on("mouseover", function(){
		          	document.body.style.cursor = "pointer";
				});
		        	piecesArray[n].on("mouseout", function(){
		          	document.body.style.cursor = "default";
		        	}); 
				piecesArray[n].on("dragstart", function(){
        				this.moveToTop();
      			});              
			   	layer.add(piecesArray[n]);
			}
     	}
		stage.add(layer);
	}
	function jigsaw(){
		var imageObj = new Image();
		imageObj.src = "brave.jpg";
     	imageObj.onload = function(){
			drawImage(this);
     	}
     }
	</script>
</head>

<body onload="jigsaw()">
	<div id="container"></div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

body{

margin:0px;

overflow:hidden;

}

#container{

background-color: #888888;

}

</style>

function drawImage(imageObj) {

var piecesArray=new Array();

var horizontalPieces = 4;

var verticalPieces = 3;

var imageWidth = imageObj.width;

var imageHeight = imageObj.height;

var pieceWidth = Math.round(imageWidth/horizontalPieces);

var pieceHeight = Math.round(imageHeight/verticalPieces);

var stage = new Kinetic.Stage({

container: "container",

width: window.innerWidth,

height: window.innerHeight

});

var layer = new Kinetic.Layer();

for(i=0;i<horizontalPieces;i++){

for(j=0;j<verticalPieces;j++){

var n = j+i*verticalPieces;

piecesArray[n] = new Kinetic.Image({

image: imageObj,

crop:{

x: i*pieceWidth,

y: j*pieceHeight,

width: pieceWidth,

height: pieceHeight

x: i*pieceWidth+i,

y: j*pieceHeight+j,

width: pieceWidth,

height: pieceHeight,

draggable: true

});

piecesArray[n].on("mouseover", function(){

document.body.style.cursor = "pointer";

});

piecesArray[n].on("mouseout", function(){

document.body.style.cursor = "default";

});

piecesArray[n].on("dragstart", function(){

this.moveToTop();

});

layer.add(piecesArray[n]);

}

stage.add(layer);

}

function jigsaw(){

var imageObj = new Image();

imageObj.src = "brave.jpg";

imageObj.onload = function(){

drawImage(this);

}

</script>

</head>

</body>

</html>

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.

Rate this post: 1 Star

(7 votes, average: 4.86 out of 5)

Loading ...

Template monster proudly presents HTML Templates in order to meet its customers\' demands.
These HTML Templates can be easily edited with any HTML editor including the simplest one - Notepad.
They include .html files which makes them available for HTML editing.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 3 comments

guest

on January 3, 2013 at 7:05 pm

Quite interesting. On my iPad works very fast. Here is my educational game written in jQuery+HTML on Android: https://www.dropbox.com/s/ydiirxg9e8mjmf6/20120824_212648.mp4 , sample code: https://www.dropbox.com/s/nva4mknky5vgrx5/level2.rtf and application: https://www.dropbox.com/s/qq2h4em1187mopm/KoloroweSlowka.apk (works good/tested on Galaxy S II, SIII and Note)
Saru

on January 3, 2013 at 7:41 pm

You could add something to make it look nicer:

var startPosX = (window.innerWidth – imageWidth)/2;
var startPosY = (window.innerHeight – imageHeight)/2;

and then add these to the tile positioning,

x: i*pieceWidth+i+startPosX,
y: j*pieceHeight+j+startPosY,

:D
Ern

on March 5, 2013 at 11:16 am

Very nice!
Two things to make it even nicer:
1. let the script rattle the pieces
2. make the pieces stick when they are at the right place

Emanuele Feronato

italian geek and PROgrammer

Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS – step 1

This post has 3 comments

guest

Saru

Ern