這篇文章將為大家詳細(xì)講解有關(guān)HTML5版智力拼圖的實(shí)現(xiàn)方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比靈川網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式靈川網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋靈川地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

還記得小時(shí)候經(jīng)常玩的這種智力拼圖板么，通過(guò)各個(gè)小格子的移動(dòng)拼成一幅完整的畫(huà)面。這種拼圖的規(guī)則大致是：

1. 如果是九宮格的玩法，在九宮格里面有八個(gè)小方塊；

2. 在右上角（或者像圖片里一樣的在右下角）是最后一個(gè)小方塊，當(dāng)其他8個(gè)方塊拼湊完成后，將第九塊方塊推回到九宮格中，湊成一幅完整的畫(huà)面。

（不過(guò)我小時(shí)候的策略都是摳出來(lái)，然后暴力的完成，智商不夠，暴力來(lái)湊）

代碼剖析

      以下是對(duì)一些關(guān)鍵代碼的剖析，在游戲的開(kāi)始，我們需要選擇一張本地圖片，然后游戲開(kāi)始，會(huì)將選擇的圖片打亂到九宮格中，然后將右上角的圖片移出，這樣九宮格里就有空白位了：

1. 如何預(yù)覽文件控件選擇的圖片？

       最近的瀏覽器中，處于安全的原因，他們都將圖片的本地地址隱藏起來(lái)，這樣我們就不能使用圖片控件來(lái)進(jìn)行預(yù)覽了，萬(wàn)幸的是他們同時(shí)還提供了FileReader對(duì)象，我們可以通過(guò)該對(duì)象進(jìn)行圖片的預(yù)覽，當(dāng)然我也可以通過(guò)該對(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)在開(kāi)始把方塊進(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       }

關(guān)于“HTML5版智力拼圖的實(shí)現(xiàn)方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站名稱：HTML5版智力拼圖的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.rwnh.cn/article8/psdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、云服務(wù)器、網(wǎng)站制作、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)