本文介绍文件下载：智力拼图板文件下载 （浏览器需支持html5）
还记得小时候经常玩的这种智力拼图板么，通过各个小格子的移动拼成一幅完整的画面。这种拼图的规则大致是：
1. 如果是九宫格的玩法，在九宫格里面有八个小方块；
2. 在右上角（或者像图片里一样的在右下角）是最后一个小方块，当其他8个方块拼凑完成后，将第九块方块推回到九宫格中，凑成一幅完整的画面。
（不过我小时候的策略都是抠出来，然后暴力的完成，智商不够，暴力来凑）
代码剖析
以下是对一些关键代码的剖析，在游戏的开始，我们需要选择一张本地图片，然后游戏开始，会将选择的图片打乱到九宫格中，然后将右上角的图片移出，这样九宫格里就有空白位了：
1. 如何预览文件控件选择的图片？
最近的浏览器中，处于安全的原因，他们都将图片的本地地址隐藏起来，这样我们就不能使用图片控件来进行预览了，万幸的是他们同时还提供了FileReader对象，我们可以通过该对象进行图片的预览，当然我也可以通过该对象得到图片的信息，然后可以在Canvas中进行绘制；
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的倍数，这样我们就需要对图片进行裁剪，以得到最合适的尺寸；
1 var validWidth = img[0].width - img[0].width % xCount; 2 var validHeight = img[0].height - img[0].height % yCount;
现在我们需要计算每个方块里面应该绘制什么样的图片，所以需要计算在原图里面截取的坐标点和尺寸，以及映射到九宫格里面的位置；
1 for (var y = 0; y <p><span style="font-size:16px">现在开始把方块进行打乱，但是我们又需要右上角的方块是正确的一块，并且可以把它移出到九宫格外；</span></p><pre class="brush:php;toolbar:false;"> 1 //randon draw points
2 for (var i = 0; i <p><span style="font-size:16px">在检测方块是否可以移动，我们就判断在该方块的上下左右是否有空白位，有就可以移向空白位；</span></p><pre class="brush:html;toolbar:false;">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 };
是否拼凑完成的判断，我们就判断该图片应该在第几行，第几列，并且当前在第几行，第几列，如果所有的方块都在正确的位置，那就表示成功了。
1 var success = function () {
2 for (var i = 0; i <p class="cnblogs_code_toolbar"><span style="font-size:16px">以上就是HTML5版智力拼图的内容，更多相关内容请关注PHP中文网（www.php.cn）！</span></p><p><br></p><p><br></p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
