本文介绍文件下载：智力拼图板文件下载 （浏览器需支持HTML5）

智力拼图板是什么？

 

（图片摘自网络，本人木有版权。。。如要追究，本人马上换图） 

还记得小时候经常玩的这种智力拼图板么，通过各个小格子的移动拼成一幅完整的画面。这种拼图的规则大致是：

1. 如果是九宫格的玩法，在九宫格里面有八个小方块；

2. 在右上角（或者像图片里一样的在右下角）是最后一个小方块，当其他8个方块拼凑完成后，将第九块方块推回到九宫格中，凑成一幅完整的画面。

（不过我小时候的策略都是抠出来，然后暴力的完成，智商不够，暴力来凑）

代码剖析

以下是对一些关键代码的剖析，在游戏的开始，我们需要选择一张本地图片，然后游戏开始，会将选择的图片打乱到九宫格中，然后将右上角的图片移出，这样九宫格里就有空白位了：

1. 如何预览文件控件选择的图片？

在最近的浏览器中，处于安全的原因，他们都将图片的本地地址隐藏起来，这样我们就不能使用图片控件来进行预览了，万幸的是他们同时还提供了FileReader对象，我们可以通过该对象进行图片的预览，当然我也可以通过该对象得到图片的信息，然后可以在Canvas中进行绘制；

View Code 
 1             $("#pic").change(function () {
 2                 if (this.files.length > 0) {
 3                     if (this.files[0].type == "image/jpeg" || this.files[0].type == "image/png") {
 4                         reader.readAsDataURL(this.files[0]);
 5                     }
 6                     else {
 7                         $(this).val("");
 8                     }
 9                 }
10                 else {
11                     $(this).val("");
12                 }
13             });

 

2. 如何对图片进行裁剪分块？

因为我们所选择的图片可能并不能完整的被分割成需要的块数，比如我们设置横向为3格，但是图片的宽度并不是3的倍数，这样我们就需要对图片进行裁剪，以得到最合适的尺寸；

View Code 
1                 var validWidth = img[0].width - img[0].width % xCount;
2                 var validHeight = img[0].height - img[0].height % yCount;

现在我们需要计算每个方块里面应该绘制什么样的图片，所以需要计算在原图里面截取的坐标点和尺寸，以及映射到九宫格里面的位置；

View Code 
1                 for (var y = 0; y < yCount; y++) {
2                     for (var x = 0; x < xCount; x++) {
3                         pieces.push({ index: x + y, point: { x: x * validWidth / xCount, y: y * validHeight / yCount, width: validWidth / xCount, height: validHeight / yCount } });
4                         drawPoints.push({ x: x * pieceWidth, y: y * pieceHeight });
5                     }
6                 }

现在开始把方块进行打乱，但是我们又需要右上角的方块是正确的一块，并且可以把它移出到九宫格外；

View Code 
 1                 //randon draw points
 2                 for (var i = 0; i < pieces.length; i++) {
 3                     var index = parseInt(Math.random() * drawPoints.length);
 4                     var drawPoint = drawPoints[index];
 5                     drawPoints.splice(index, 1);
 6                     pieces[i].DrawPoint = drawPoint;
 7                 }
 8                 //swap the top right
 9                 for (var i = 0; i < pieces.length; i++) {
10                     if (pieces[i].DrawPoint.x == (xCount - 1) * pieceWidth && pieces[i].DrawPoint.y == 0 && i != (xCount - 1)) {
11                         var oldDP = pieces[xCount - 1].DrawPoint;
12                         pieces[xCount - 1].DrawPoint = pieces[i].DrawPoint;
13                         whitePiece = { x: pieces[xCount - 1].DrawPoint.x, y: pieces[xCount - 1].DrawPoint.y};
14                         pieces[xCount - 1].DrawPoint.x += pieceWidth;
15                         pieces[i].DrawPoint = oldDP;
16                         break;
17                     }
18                 }

在检测方块是否可以移动，我们就判断在该方块的上下左右是否有空白位，有就可以移向空白位；

View Code 
1             var canMove = function (p) {
2                 return (Math.abs(p.DrawPoint.x - whitePiece.x) == pieceWidth && p.DrawPoint.y == whitePiece.y)
3                         || (Math.abs(p.DrawPoint.y - whitePiece.y) == pieceHeight && p.DrawPoint.x == whitePiece.x);
4             };

是否拼凑完成的判断，我们就判断该图片应该在第几行，第几列，并且当前在第几行，第几列，如果所有的方块都在正确的位置，那就表示成功了。

View Code 
 1             var success = function () {
 2                 for (var i = 0; i < pieces.length; i++) {
 3                     var x = i % 3;
 4                     var y = parseInt(i / 3);
 5                     if (pieces[i].DrawPoint.x != x * pieceWidth || pieces[i].DrawPoint.y != y * pieceWidth) {
 6                         return false;
 7                     }
 8                 }
 9 
10                 return true;
11             }

注

1. 自从上次文章被博客园的编辑们认为是广告贴后，深受打击而不再更新博客，当然本文也只是号外，是看见今天的首页有一个拼图的游戏，正好我前俩天写了这个游戏来，所以就发来了；

2. 代码可批判的地方很多，大概是1个多小时完成的，没有进行很好的规划，想到哪些写到哪，欢迎大家扔砖；

3. 马上2012就要过去了，玛雅人，说好的末日呢？ 既然末日不靠谱，还是2013靠谱，希望大家能在2013年里竹子开花节节高，提前祝一声新年快乐！