1.?頁面布局

　　1.1 bg:?背景提示圖，使用半透明效果，移動圖片后顯示，層級最低，z-index:-1;

　　1.2?cvs:?當前畫布，層級默認0；

　　1.3?content:?覆蓋在畫布之上 ?z-index:1;

　　　　1.3.1?currentCheckpoint:?顯示當前關卡數與難度系數 ? z-index:2;

　　　　1.3.2?currentBox:?鼠標按下時顯示的盒子，模擬拖拽畫布效果(按下瞬間清除盒子內畫布，顯示背景提示圖) ? z-index:1;

　　　　1.3.3?willBox:?鼠標移動時顯示將要交換的盒子 ? z-index:0 ;

　　1.4?begin:?開始游戲層 ? z-index:2;

　　1.5?over:?完成關卡顯示層 ? z-index:3;

　　

2.?js實現

　　2.1?loadImg加載圖片資源

　　2.2?自定義封裝event事件

　　2.3?index.js設置初始化背景提示層，選擇難度，開始游戲，和每一關完成后的顯示

　　2.4?drawBg.js

　　　　2.4.1?大致思路:?

　　　　　　2.4.1.1?初始化兩個二維數組，oArr存放初始化的坐標，randomArr存放順序打亂后的坐標

　　　　　　2.4.1.2?把圖片按randomArr存儲，每次圖片交換之后，randomArr數組中的順序也交換

　　　　　　2.4.1.3?當最后兩個數組轉換的字符串完全相等時，闖關成功

　　　　2.4.2?模擬拖拽畫布效果思路:

　　　　　　2.4.2.1?開始時兩個小盒子隱藏，鼠標按下，獲取按下的所在位置，轉換成數組的index值，通過數組和index值找到currentBox顯示位置，同時記錄中心點坐標，清除當前區域畫布，顯示出背景提示圖;

　　　　　　2.4.2.2?鼠標移動，willBox盒子在距離currentBox中心點最近的區域顯示;

　　　　　　2.4.2.3?鼠標松開，重新繪制兩塊區域的畫布，然后隱藏兩個小盒子，交換數組randomArr的順序；

　　　　　　2.4.2.4?檢查是否完成闖關，若完成闖關則移除當前所有事件

3. 遇到的問題

　　3.1 手機端touch下滑，瀏覽器會往下拉，應使用preventDefault阻止瀏覽器默認行為

　　3.2 使用手機端時，畫布會被壓縮，畫布寬度設置為100%，this.cvs.width仍然為初始值800，不隨瀏覽器寬度改變，即使用this.cvs.offsetWidth獲取寬度

　　3.3 在清除畫布與重新繪制畫布時仍需使用this.cvs.width

?

?

鏈接地址( https://github.com/hsiangleev/game-puzzle?)

轉載于:https://www.cnblogs.com/hsianglee/p/7423697.html

總結

以上是生活随笔為你收集整理的画布实现拼图原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。