Sunday, December 30, 2012
HTML5 Jigsaw puzzle
Below is the example to use HTML5 and jQuery to create a Jigsaw puzzle.
First we call jQuery library
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
Then we create canvas in html5
<canvas id="gamer" width="800" height="600"></canvas>
We call jQuery
<script type="text/javascript">
$().ready(function () {
$("#gamer").Jigsaw("http://swf.site40.net/AlbertEinstein.JPG" );
});
<script>
to call function Jigsaw when the web page is loaded.
The detail of Jigsaw function is below:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HTML5 Jigsaw</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<h1 style="color:red;text-align:center">HTML5 Jigsaw puzzle, Jiansen Lu </h1>
<hr />
<canvas id="gamer" width="800" height="600"></canvas>
<script type="text/javascript">
$().ready(function () {
$("#gamer").Jigsaw("http://swf.site40.net/AlbertEinstein.JPG" );
});
$.fn.Jigsaw = function (imagePath) {
var gamer = this;
var context = $(this)[0].getContext("2d");
var pieces = [];
var drawPoints = [];
var xCount = 3;
var yCount = 3;
var pieceWidth = parseInt(gamer.width() / (xCount + 1));
var pieceHeight = parseInt(gamer.height() / yCount);
var whitePiece = {};
var startGame = function () {
var validWidth = img[0].width - img[0].width % xCount;
var validHeight = img[0].height - img[0].height % yCount;
for (var y = 0; y < yCount; y++) {
for (var x = 0; x < xCount; x++) {
pieces.push({ index: x + y, point: { x: x * validWidth / xCount, y: y * validHeight / yCount, width: validWidth / xCount, height: validHeight / yCount } });
drawPoints.push({ x: x * pieceWidth, y: y * pieceHeight });
}
}
//randon draw points
for (var i = 0; i < pieces.length; i++) {
var index = parseInt(Math.random() * drawPoints.length);
var drawPoint = drawPoints[index];
drawPoints.splice(index, 1);
pieces[i].DrawPoint = drawPoint;
}
//swap the top right
for (var i = 0; i < pieces.length; i++) {
if (pieces[i].DrawPoint.x == (xCount - 1) * pieceWidth && pieces[i].DrawPoint.y == 0 && i != (xCount - 1)) {
var oldDP = pieces[xCount - 1].DrawPoint;
pieces[xCount - 1].DrawPoint = pieces[i].DrawPoint;
whitePiece = { x: pieces[xCount - 1].DrawPoint.x, y: pieces[xCount - 1].DrawPoint.y};
pieces[xCount - 1].DrawPoint.x += pieceWidth;
pieces[i].DrawPoint = oldDP;
break;
}
}
draw();
}
var draw = function () {
context.clearRect(0, 0, gamer.width(), gamer.height());
for (var i = 0; i < pieces.length; i++) {
drawPiece(pieces[i]);
}
};
var drawPiece = function (piece) {
var x = piece.point.x;
var y = piece.point.y;
var width = piece.point.width;
var height = piece.point.height;
var drawX = piece.DrawPoint.x;
var drawY = piece.DrawPoint.y;
context.drawImage(img[0], x, y, width, height, drawX, drawY, pieceWidth, pieceHeight);
}
var move = function (x, y) {
var clickPiece = null;
for (var i = 0; i < pieces.length; i++) {
var p = pieces[i].DrawPoint;
if (p.x < x && p.x + pieceWidth > x
&& p.y < y && p.y + pieceHeight > y) {
clickPiece = pieces[i];
break;
}
}
if (clickPiece != null && canMove(clickPiece)) {
swap(clickPiece);
draw();
}
if (success()) {
alert('bingo!');
}
}
var canMove = function (p) {
return (Math.abs(p.DrawPoint.x - whitePiece.x) == pieceWidth && p.DrawPoint.y == whitePiece.y)
|| (Math.abs(p.DrawPoint.y - whitePiece.y) == pieceHeight && p.DrawPoint.x == whitePiece.x);
};
var swap = function (p) {
var oldDP = {x: p.DrawPoint.x, y: p.DrawPoint.y};
p.DrawPoint.x = whitePiece.x;
p.DrawPoint.y = whitePiece.y;
whitePiece = oldDP;
}
var success = function () {
for (var i = 0; i < pieces.length; i++) {
var x = i % 3;
var y = parseInt(i / 3);
if (pieces[i].DrawPoint.x != x * pieceWidth || pieces[i].DrawPoint.y != y * pieceWidth) {
return false;
}
}
return true;
}
var img = $(new Image());
img.load(function (e) {
startGame();
});
img.attr("src", imagePath);
gamer.click(function (e) {
var offsetX = e.pageX - $(this).offset().left;
var offsetY = e.pageY - $(this).offset().top;
move(offsetX, offsetY);
});
};
</script>
</body>
</html>
Demo: to restore Albert Einstein picture by sliding each pieces.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment