本文介紹文件下載：智力拼圖板文件下載 （瀏覽器需支持HTML5）
（圖片摘自網(wǎng)絡(luò)，本人木有版權(quán)。。。如要追究，本人馬上換圖）
還記得小時(shí)候經(jīng)常玩的這種智力拼圖板么，通過各個(gè)小格子的移動(dòng)拼成一幅完整的畫面。這種拼圖的規(guī)則大致是：
1. 如果是九宮格的玩法，在九宮格里面有八個(gè)小方塊；
2. 在右上角（或者像圖片里一樣的在右下角）是最后一個(gè)小方塊，當(dāng)其他8個(gè)方塊拼湊完成后，將第九塊方塊推回到九宮格中，湊成一幅完整的畫面。
（不過我小時(shí)候的策略都是摳出來，然后暴力的完成，智商不夠，暴力來湊）
代碼剖析
以下是對(duì)一些關(guān)鍵代碼的剖析，在游戲的開始，我們需要選擇一張本地圖片，然后游戲開始，會(huì)將選擇的圖片打亂到九宮格中，然后將右上角的圖片移出，這樣九宮格里就有空白位了：
1. 如何預(yù)覽文件控件選擇的圖片？
在最近的瀏覽器中，處于安全的原因，他們都將圖片的本地地址隱藏起來，這樣我們就不能使用圖片控件來進(jìn)行預(yù)覽了，萬幸的是他們同時(shí)還提供了FileReader對(duì)象，我們可以通過該對(duì)象進(jìn)行圖片的預(yù)覽，當(dāng)然我也可以通過該對(duì)象得到圖片的信息，然后可以在Canvas中進(jìn)行繪制；
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. 如何對(duì)圖片進(jìn)行裁剪分塊？
因?yàn)槲覀兯x擇的圖片可能并不能完整的被分割成需要的塊數(shù)，比如我們?cè)O(shè)置橫向?yàn)?格，但是圖片的寬度并不是3的倍數(shù)，這樣我們就需要對(duì)圖片進(jìn)行裁剪，以得到最合適的尺寸；
1 var validWidth = img[0].width - img[0].width % xCount; 2 var validHeight = img[0].height - img[0].height % yCount;
現(xiàn)在我們需要計(jì)算每個(gè)方塊里面應(yīng)該繪制什么樣的圖片，所以需要計(jì)算在原圖里面截取的坐標(biāo)點(diǎn)和尺寸，以及映射到九宮格里面的位置；
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 }
現(xiàn)在開始把方塊進(jìn)行打亂，但是我們又需要右上角的方塊是正確的一塊，并且可以把它移出到九宮格外；
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 }
在檢測(cè)方塊是否可以移動(dòng)，我們就判斷在該方塊的上下左右是否有空白位，有就可以移向空白位；
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 };是否拼湊完成的判斷，我們就判斷該圖片應(yīng)該在第幾行，第幾列，并且當(dāng)前在第幾行，第幾列，如果所有的方塊都在正確的位置，那就表示成功了。
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 }