博主一直心心念念想做一個小遊戲～ 前段時間終於做了一個小遊戲，直到現在才來總結，哈哈～ 以後要勤奮點更新部落格！
實現原理
1.如何切圖？
用之前的方法就是使用photoshop將圖片切成相應大小的圖片。這種做法不靈活，如果要更換圖片的話，就得重新去切圖，很麻煩。
現在是使用canvas，圖片是一整張jpg或者png，把圖片匯入到canvas畫布，然後再呼叫上下文context的getImageData方法，把圖片處理成小圖，這些小圖就作為拼圖的基本單位
|
1 2 3 4 5 6 7 8 9 10 11 |
renderImg: function (image) { var index = 0; for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { this.context.drawImage(image, 300 * j, 300 * i, 300, 600, 0, 0, 300, 300); this.imgArr[index].src = this.canvas.toDataURL('image/jpeg'); this.imgArr[index].id = index; index++; } } }, |
2.如何判斷遊戲是否結束?
在剛剛生成的小圖上面新增自定義屬性 ， 後期在小圖被移動後再一個個判斷，如果順序是對的，那麼這張大圖就拼接成功， 允許進入下一關；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
isSuccess: function () { var imgLikeArr = document.querySelectorAll('img'), imgArr = Array.prototype.slice.call(imgLikeArr), len = imgArr.length, i, flag = true, self = this; for (i = 0; i < len; i++) { if (imgArr[i].id != i) { flag = false; } } if (flag) { setTimeout(function () { self.showtip(); }, 200); } } |
3.如何實現小圖片隨機排列？
使用math.random
|
1 2 3 4 5 |
randomImg: function () { this.imgArr.sort(function () { return Math.random() - Math.random(); }); }, |
4.拖拽功能實現？
drag知識點補充站：
相容性：IE9+，主流瀏覽器，移動端所有型號暫不支援
一個完整的drag and drop流程通常包含以下幾個步驟:
- 設定可拖拽目標.設定屬性
draggable="true"實現元素的可拖拽. - 監聽
dragstart設定拖拽資料 - 設定允許的拖放效果,如
copy,move,link - 設定拖放目標,預設情況下瀏覽器阻止所有的拖放操作,所以需要監聽
dragenter或者dragover取消瀏覽器預設行為使元素可拖放. - 監聽
drop事件執行所需操作
拖拽事件週期中會初始化一個DataTransfer物件,用於儲存拖拽資料和互動資訊.以下是它的屬性和方法.
setData(format, data): 以鍵值對設定資料,format通常為資料格式,如text,text/htmlgetData(format): 獲取設定的對應格式資料,format與setData()中一致
例項程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
//監聽dragstart設定拖拽資料 on(contain, 'dragstart', function (e) { var target = getTarget(e); if (target.tagName.toLowerCase() == "img") { e.dataTransfer.setData('id', e.target.id); } }); on(contain, 'drop', function (ev) { var target = getTarget(ev); //交換圖片 if (target.tagName.toLowerCase() == "img") { var originObj = document.getElementById(ev.dataTransfer.getData('id')); var cache = { 'src': originObj.src, 'id': originObj.id }; var endObj = ev.target.querySelector('img') || ev.target; originObj.src = endObj.src; originObj.id = endObj.id; endObj.src = cache.src; endObj.id = cache.id; if (originObj.id != endObj.id) { self.changestep(); } self.isSuccess(); } }); //取消瀏覽器預設行為使元素可拖放. on(contain, 'dragover', function (ev) { ev.preventDefault(); }); |
核心程式碼和思路就是上面這些，其實整個流程走下來還是蠻簡單的
有興趣的可以上我的github ，歡迎fork～star～
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
