canvas drag 實現拖拽拼圖小游戲

博主一直心心念念想做一個小游戲～  前端時間終於做了一個小游戲，直到現在才來總結，哈哈～ 以后要勤奮點更新博客！

 

實現原理

1.如何切圖？

用之前的方法就是使用photoshop將圖片切成相應大小的圖片。這種做法不靈活，如果要更換圖片的話，就得重新去切圖，很麻煩。

現在是使用canvas，圖片是一整張jpg或者png，把圖片導入到canvas畫布，然后再調用上下文context的getImageData方法，把圖片處理成小圖，這些小圖就作為拼圖的基本單位

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.如何判斷游戲是否結束?

在剛剛生成的小圖上面添加自定義屬性 ， 后期在小圖被移動后再一個個判斷，如果順序是對的，那么這張大圖就拼接成功， 允許進入下一關；

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

randomImg: function () {
            this.imgArr.sort(function () {
                return Math.random() - Math.random();
            });
        },

 

4.拖拽功能實現？

drag知識點補充站：

兼容性：IE9+，主流瀏覽器，移動端所有型號暫不支持

一個完整的drag and drop流程通常包含以下幾個步驟:

1. 設置可拖拽目標.設置屬性draggable="true"實現元素的可拖拽. 
2. 監聽dragstart設置拖拽數據
3. 設置允許的拖放效果,如copy,move,link
4. 設置拖放目標,默認情況下瀏覽器阻止所有的拖放操作,所以需要監聽dragenter或者dragover取消瀏覽器默認行為使元素可拖放.
5. 監聽drop事件執行所需操作

拖拽事件周期中會初始化一個DataTransfer對象,用於保存拖拽數據和交互信息.以下是它的屬性和方法.

• setData(format, data): 以鍵值對設置數據,format通常為數據格式,如text,text/html
• getData(format): 獲取設置的對應格式數據,format與setData()中一致

 

實例代碼：

 //監聽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～