使用javascript中canvas實現拼圖小遊戲

本篇文章給大家帶來的內容是關於使用javascript中canvas實現拼圖小遊戲 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

如果您想要綜合使用javascript中canvas、原生拖拽、本機存放區等多種技術完成一個有趣的項目，那麼這篇文章將非常適合您

1 簡介和源碼

該項目中的拼圖小遊戲使用javascript原創，相比於網站上類似的功能，它使用到的技術點更先進豐富，功能更強大，還包含程式開發中更多先進的思想理念，從該項目中您將能學到：

• FileReader、Image對象的配合canvas對圖片進行壓縮，切割的技巧。

• 學習小遊戲開發中最常用的碰撞檢測、狀態監控、重新整理保持狀態的處理方法。

• 深入瞭解拖拽交換元素的細節，學習到動態元素繫結事件、回呼函數的處理方式。

項目源碼-github

下面是遊戲介面的樣本圖：

2 實現思路

根據遊戲介面圖我們可以將完成這麼一個小遊戲分為以下幾步來實現：

• 1.拖拽圖片到指定地區，使用FileReader對象讀取到圖片的base64內容，然後添加到Image對象中

• 2.當Image對象載入完成後，使用canvas對圖片進行等比縮放，然後取到縮圖的base64內容，添加到另外一個縮圖Image對象中，並將該縮圖base64的內容儲存到本機存放區（localStorage）中

• 3.當縮圖Image對象載入完成後，再次使用canvas對縮圖進行切割，該遊戲中將縮圖切割成3*4一共12等份，使用本機存放區儲存每份切割縮圖base64內容，將縮圖順序打亂，使用img標籤顯示在web頁面上

• 4.當縮圖切片都添加到web介面上以後，為每一份縮圖切片添加註冊拖拽事件，使得縮圖切片可以相互交換，在這個過程當中，添加對縮圖切片順序狀態的監控，一旦完成拼圖，就直接展示完整的縮圖，完成遊戲

從以上對小遊戲製作過程的分析來看，第4步是程式功能實現的重點和痛點，在以上的每個步驟中都有很多小細節需要注意和探討，下面我就詳細分析一下每個步驟的實現細節，說的不好的地方，歡迎大家留言指正。

3 開發細節詳解

3.1 圖片內容讀取和載入

在遊戲開發第1步中，我們將圖片拖拽到指定地區後，程式是怎樣得到圖片內容資訊的呢？fileReader對象又是怎樣將圖片資訊轉化為base64字串內容的？Image對象拿到圖片的base64內容之後，又是怎樣初始化載入的？帶著這些疑問，我們來研究一下實現項目中實現了第一步的關鍵代碼。

var droptarget = document.getElementById("droptarget"),            output = document.getElementById("ul1"),            thumbImg = document.getElementById("thumbimg");             //此處省略相關代碼........           function handleEvent(event) {                var info = "",                    reader = new FileReader(),                    files, i, len;                EventUtil.preventDefault(event);                localStorage.clear();                if (event.type == "drop") {                    files = event.dataTransfer.files;                    len = files.length;                    if (!/image/.test(files[0].type)) {                        alert('請上傳圖片類型的檔案');                    }                    if (len > 1) {                        alert('上傳圖片數量不能大於1');                    }                    var canvas = document.createElement('canvas');                    var context = canvas.getContext('2d');                    var img = new Image(),          //原圖                        thumbimg = new Image();     //等比縮放後的縮圖                    reader.readAsDataURL(files[0]);                    reader.onload = function (e) {                        img.src = e.target.result;                    }                    //圖片對象載入完畢後，對圖片進行等比縮放處理。縮放後最大寬度為三百像素                    img.onload = function () {                        var targetWidth, targetHeight;                        targetWidth = this.width > 300 ? 300 : this.width;                        targetHeight = targetWidth / this.width * this.height;                        canvas.width = targetWidth;                        canvas.height = targetHeight;                        context.clearRect(0, 0, targetWidth, targetHeight);                        context.drawImage(img, 0, 0, targetWidth, targetHeight);                        var tmpSrc = canvas.toDataURL("image/jpeg");                        //在本機存放區完整的縮圖源                        localStorage.setItem('FullImage', tmpSrc);                        thumbimg.src = tmpSrc;                    }                            //此處省略相關代碼......                 EventUtil.addHandler(droptarget, "dragenter", handleEvent);         EventUtil.addHandler(droptarget, "dragover", handleEvent);         EventUtil.addHandler(droptarget, "drop", handleEvent);            }

這段代碼的思路就是首先獲得拖拽地區目標對象droptarget，為droptarget註冊拖拽監聽事件。代碼中用到的EventUtil是我封裝的一個對元素添加事件、事件對象的相容處理等常用功能的簡單對象，下面是其添加註冊事件的簡單簡單代碼，其中還有很多其他的封裝，讀者可自行查閱，功能比較簡單。

var EventUtil = {    addHandler: function(element, type, handler){        if (element.addEventListener){            element.addEventListener(type, handler, false);        } else if (element.attachEvent){            element.attachEvent("on" + type, handler);        } else {            element["on" + type] = handler;        }    },        //此處省略代...... }

當使用者將圖片檔案拖放到地區目標對象droptarget時，droptarget的事件對象通過event.dataTransfer.files擷取到檔案資訊，對檔案進行過濾（限制只能為圖片內容，並且最多隻能有一張圖片）。拿到檔案內容以後，使用FileReader對象reader讀取檔案內容，使用其readAsDataURL方法讀取到圖片的base64內容，賦值給Image對象img的src屬性，就可以等到img對象初始化載入完畢，使canvas對img進行下一步的處理了。這裡有一個重點的地方需要說明：一定要等img載入完成後，再使用canvas進行下一步的處理，不然可能會出現圖片損壞的情況。原因是：當img的src屬性讀取圖片檔案的base64內容時，可能還沒有將內容載入到記憶體中時，canvas就開始處理圖片（此時的圖片是不完整的）。所以我們可以看到canvas對圖片的處理是放在img.onload方法中進行的，程式後邊還會有這種情況，之後就不再贅述了。

3.2 圖片等比縮放和本機存放區

在第一步中我們完成了對拖拽檔案的內容讀取，並將其成功載入到了Image對象img中。接下來我們使用canvas對圖片進行等比縮放，對圖片進行等比縮放，我們採取的策略是限制圖片的最大寬度為300像素，我們再來看一下這部分代碼吧：

 img.onload = function () {                        var targetWidth, targetHeight;                        targetWidth = this.width > 300 ? 300 : this.width;                        targetHeight = targetWidth / this.width * this.height;                        canvas.width = targetWidth;                        canvas.height = targetHeight;                        context.clearRect(0, 0, targetWidth, targetHeight);                        context.drawImage(img, 0, 0, targetWidth, targetHeight);                        var tmpSrc = canvas.toDataURL("image/jpeg");                        //在本機存放區完整的縮圖源                        localStorage.setItem('FullImage', tmpSrc);                        thumbimg.src = tmpSrc;                    }

確定了縮放後的寬度targetWidth和高度targetHeight之後，我們使用canvas的drawImage方法對映像進行壓縮，在這之前我們最好先使用畫布的clearRect對畫布進行一次清理。對圖片等比縮放以後，使用canvas的toDataURL方法，擷取到縮放圖的base64內容，賦給新的縮放圖Image對象thumbimg的src屬性，待縮放圖載入完畢，進行下一步的切割處理。縮放圖的base64內容使用localStorage儲存，鍵名為"FullImage"。瀏覽器的本機存放區localStorage是硬儲存，在瀏覽器重新整理之後內容不會丟失，這樣我們就可以在遊戲過程中保持資料狀態，這點稍後再詳細講解，我們需要知道的是localStorage是有大小限制的，最大為5M。這也是為什麼我們先對圖片進行壓縮，減少儲存資料大小，儲存縮放圖base64內容的原因。關於開發過程中儲存哪些內容，下一小節會配有圖例詳細說明。

3.3 縮圖切割

產生縮圖之後要做的工作就是對縮圖進行切割了，同樣的也是使用canvas的drawImage方法，而且相應的處理必須放在縮圖載入完成之後（即thumbimg.onload）進行處理，原因前面我們已經說過。下面我們再來詳細分析一下原始碼吧：

thumbimg.onload = function () {                        //每一個切片的寬高[切割成3*4格式]                        var sliceWidth, sliceHeight, sliceBase64, n = 0, outputElement = '',                            sliceWidth = this.width / 3,                            sliceHeight = this.height / 4,                            sliceElements = [];                        canvas.width = sliceWidth;                        canvas.height = sliceHeight;                        for (var j = 0; j < 4; j++) {                            for (var i = 0; i < 3; i++) {                                context.clearRect(0, 0, sliceWidth, sliceHeight);                                context.drawImage(thumbimg, sliceWidth * i, sliceHeight * j, sliceWidth, sliceHeight, 0, 0, sliceWidth, sliceHeight);                                sliceBase64 = canvas.toDataURL("image/jpeg");                                localStorage.setItem('slice' + n, sliceBase64);                                //為了防止圖片三像素問題發生，請為圖片屬性添加 display:block                                newElement = "<li name=\"" + n + "\" style=\"margin:3px;\"><img src=\"" + sliceBase64 + "\" style=\"display:block;\"></li>";                                //根據隨機數打亂圖片順序                                (Math.random() > 0.5) ? sliceElements.push(newElement) : sliceElements.unshift(newElement);                                n++;                            }                        }                        //拼接元素                        for (var k = 0, len = sliceElements.length; k < len; k++) {                            outputElement += sliceElements[k];                        }                        localStorage.setItem('imageWidth', this.width + 18);                        localStorage.setItem('imageHeight', this.height + 18);                        output.style.width = this.width + 18 + 'px';                        output.style.height = this.height + 18 + 'px';                        (output.innerHTML = outputElement) && beginGamesInit();                        droptarget.remove();                    }

上面的代碼對於大家來說不難理解，就是將縮圖分割成12個切片，這裡我給大家解釋一下幾個容易困惑的地方：

• 1.為什麼我們再切割圖片的時候，代碼如下，先從列開始迴圈？

 for (var j = 0; j < 4; j++) {    for (var i = 0; i < 3; i++) {        //此處省略邏輯代碼    }  }

這個問題大家仔細想一想就明白了，我們將圖片進行切割的時候，要記錄下來每一個圖片切片的原有順序。在程式中我們使用 n 來表示圖片切片的原有順序，而且這個n記錄在了每一個圖片切片的元素的name屬性中。在後續的遊戲過程中我們可以使用元素的getAttribute('name')方法取出 n 的值，來判斷圖片切片是否都被拖動到了正確的位置，以此來判斷遊戲是否結束，現在講起這個問題可能還會有些迷惑，我們後邊還會再詳細探討，我給出一張圖協助大家理解圖片切片位置序號資訊n:

序號n從零開始是為了和javascript中的getElementsByTagName()選擇的子項目座標保持一致。

• 2 我們第3步實現的目的不僅是將縮圖切割成小切片，還要將這些圖片切片打亂順序，代碼程式中這一點是怎樣實現的？
  閱讀代碼程式我們知道，我們每產生一個切片，就會構造一個元素節點： newElement = "<li name=\"" + n + "\" style=\"margin:3px;\"><img src=\"" + sliceBase64 + "\" style=\"display:block;\"></li>"; 。我們在是在外部先聲明了一個放新節點的數組sliceElements，我們每產生一個新的元素節點，就會把它放到sliceElements數組中，但是我們向sliceElements頭部還是尾部添加這個新節點則是隨機的，代碼是這樣的：

(Math.random() > 0.5) ? sliceElements.push(newElement) : sliceElements.unshift(newElement);

我們知道Math.random()產生一個[0, 1)之間的數，所以再canvas將縮圖裁切成切片以後，根據這些切片產生的web節點順序是打亂的。打亂順序以後重新組裝節點：

//拼接元素for (var k = 0, len = sliceElements.length; k < len; k++) {    outputElement += sliceElements[k];}

然後再將節點添加到web頁面中，也就自然而然出現了圖片切片被打亂的樣子了。

• 3.我們根據縮圖切片產生的DOM節點是動態添加的元素，怎樣給這樣動態元素繫結事件呢？我們的項目中為每個縮圖切片DOM節點綁定的事件是“拖動交換”，和其他節點都有關係，我們要保證所有的節點都載入後再對事件進行綁定，我們又是怎樣做到的呢？

下面的一行代碼，雖然簡單，但是用的非常巧妙：

(output.innerHTML = outputElement) && beginGamesInit();

有開發經驗的同學都知道 && 和 || 是短路運算子，代碼中的含義是：只有當切片元素節點都添加到
WEB頁面之後，才會初始化為這些節點綁定事件。

3.4 本地資訊儲存

代碼中多次用到了本機存放區，下面我們來詳細解釋一下本遊戲開發過程中都有哪些資訊需要儲存，為什麼要儲存？下面是我給出的需要儲存的資訊圖樣本（從瀏覽器控制台擷取）：

瀏覽器本機存放區localStorage使用key:value形式儲存，我們看到我們本次儲存的內容有：

• FullImage:圖片縮圖base64編碼。

• imageWidth:拖拽地區圖片的寬度。

• imageHeight:拖拽地區圖片的高度。

• slice*:每一個縮圖切片的base64內容。

• nodePos:儲存的是當前縮圖的位置座標資訊。

儲存FullImage縮圖的資訊是當遊戲結束後顯示源縮圖時，根據FullImage中的內容展示圖片。而imageWidth,imageHeight,slice*,nodePos是為了防止瀏覽器重新整理導致資料丟失所做的儲存，當重新整理頁面的時候，瀏覽器會根據本機存放區的資料載入沒有完成的遊戲內容。其中nodePos是在為縮圖切片發生拖動時存入本機存放區的，並且它隨著切片位置的變化而變化，也就是它追蹤著遊戲的狀態，我們在接下來的代碼功能展示中會再次說到它。

3.5 拖拽事件註冊和監控

接下來我們要做的事才是遊戲中最重要的部分，還是先來分析一下代碼，首先是事件註冊前的初始化工作：

//遊戲開始初始化function beginGamesInit() {    aLi = output.getElementsByTagName("li");    for (var i = 0; i < aLi.length; i++) {        var t = aLi[i].offsetTop;        var l = aLi[i].offsetLeft;        aLi[i].style.top = t + "px";        aLi[i].style.left = l + "px";        aPos[i] = {left: l, top: t};        aLi[i].index = i;        //將位置資訊記錄下來        nodePos.push(aLi[i].getAttribute('name'));    }    for (var i = 0; i < aLi.length; i++) {        aLi[i].style.position = "absolute";        aLi[i].style.margin = 0;        setDrag(aLi[i]);    }}

可以看到這部分初始化綁定事件代碼所做的事情是:記錄每一個圖片切片對象的位置座標相關資訊記錄到對象屬性中，並為每一個對象都註冊拖拽事件，對象的集合由aLi數組統一管理。這裡值得一提的是圖片切片的位置資訊index記錄的是切片現在所處的位置，而我們前邊所提到的圖片切片name屬性所儲存的資訊n則是圖片切片原本應該所處的位置，在遊戲還沒有結束之前，它們不一定相等。待所有的圖片切片name屬性所儲存的值和其屬性index都相等時，遊戲才算結束（因為使用者已經正確完成了圖片的拼接），下面的代碼就是用來判斷遊戲狀態是否結束的，看起來更直觀一些：

//判斷遊戲是否結束function gameIsEnd() {    for (var i = 0, len = aLi.length; i < len; i++) {        if (aLi[i].getAttribute('name') != aLi[i].index) {            return false;        }    }    //後續處理代碼省略......}

下面我們還是詳細說一說拖拽交換代碼相關邏輯吧，拖拽交換的代碼如所示：

//拖拽function setDrag(obj) {    obj.onmouseover = function () {        obj.style.cursor = "move";        console.log(obj.index);    }    obj.onmousedown = function (event) {        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;        obj.style.zIndex = minZindex++;        //當滑鼠按下時計算滑鼠與拖拽對象的距離        disX = event.clientX + scrollLeft - obj.offsetLeft;        disY = event.clientY + scrollTop - obj.offsetTop;        document.onmousemove = function (event) {            //當滑鼠拖動時計算p的位置            var l = event.clientX - disX + scrollLeft;            var t = event.clientY - disY + scrollTop;            obj.style.left = l + "px";            obj.style.top = t + "px";            for (var i = 0; i < aLi.length; i++) {                aLi[i].className = "";            }            var oNear = findMin(obj);            if (oNear) {                oNear.className = "active";            }        }        document.onmouseup = function () {            document.onmousemove = null;       //當滑鼠彈起時移出移動事件            document.onmouseup = null;         //移出up事件，清空記憶體            //檢測是否普碰上，在交換位置            var oNear = findMin(obj);            if (oNear) {                oNear.className = "";                oNear.style.zIndex = minZindex++;                obj.style.zIndex = minZindex++;                startMove(oNear, aPos[obj.index]);                startMove(obj, aPos[oNear.index], function () {                    gameIsEnd();                });                //交換index                var t = oNear.index;                oNear.index = obj.index;                obj.index = t;                //交換本次儲存中的位置資訊                var tmp = nodePos[oNear.index];                nodePos[oNear.index] = nodePos[obj.index];                nodePos[obj.index] = tmp;                localStorage.setItem('nodePos', nodePos);            } else {                startMove(obj, aPos[obj.index]);            }        }        clearInterval(obj.timer);        return false;//低版本出現禁止符號    }}

這段代碼所實現的功能是這樣子的：拖動一個圖片切片，當它與其它的圖片切片有碰撞重疊的時候，就和與其左上方距離最近的一個圖片切片交換位置，並交換其位置資訊index，更新本機存放區資訊中的nodePos。移動完成之後判斷遊戲是否結束，若沒有，則期待下一次使用者的拖拽交換。
下面我來解釋一下這段代碼中比較難理解的幾個點：

• 1.圖片切片在被拖動的過程中是怎樣判斷是否和其它圖片切片發生碰撞的？這就是典型的碰撞檢測問題。
  程式中實現碰撞檢測的代碼是這樣的：

//碰撞檢測function colTest(obj1, obj2) {    var t1 = obj1.offsetTop;    var r1 = obj1.offsetWidth + obj1.offsetLeft;    var b1 = obj1.offsetHeight + obj1.offsetTop;    var l1 = obj1.offsetLeft;    var t2 = obj2.offsetTop;    var r2 = obj2.offsetWidth + obj2.offsetLeft;    var b2 = obj2.offsetHeight + obj2.offsetTop;    var l2 = obj2.offsetLeft;    `if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2)` {        return false;    } else {        return true;    }}

這段代碼看似資訊量很少，其實也很好理解，判斷兩個圖片切片是否發生碰撞，只要將它們沒有發生碰撞的情形排除掉就可以了。這有點類似與邏輯中的非是即否，兩個切片又確實只可能存在兩種情況：碰撞、不碰撞。圖中的這段代碼是判斷不碰撞的情況：if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2)，返回false, else 返回true。

2.碰撞檢測完成了之後，圖片切片之間又是怎樣尋找左上方定點距離最近的元素呢？

代碼是這個樣子的：

//勾股定理求距離(左上方的距離)function getDis(obj1, obj2) {    var a = obj1.offsetLeft - obj2.offsetLeft;    var b = obj1.offsetTop - obj2.offsetTop;    return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));}//找到距離最近的function findMin(obj) {    var minDis = 999999999;    var minIndex = -1;    for (var i = 0; i < aLi.length; i++) {        if (obj == aLi[i]) continue;        if (colTest(obj, aLi[i])) {            var dis = getDis(obj, aLi[i]);            if (dis < minDis) {                minDis = dis;                minIndex = i;            }        }    }    if (minIndex == -1) {        return null;    } else {        return aLi[minIndex];    }}

因為都是矩形區塊，所以計算左上方的距離使用勾股定理，這點相信大家都能明白。尋找距離最近的元素原理也很簡單，就是遍曆所有已經碰撞的元素，然後比較根據勾股定理計算出來的最小值，返回元素就可以了。代碼中也是使用了比較通用的方法，先聲明一個很大的值最為最小值，當有碰撞元素比其小時，再將更小的值最為最小值，遍曆完成後，返回最小值的元素就可以了。

• 3.圖片區塊每次交換之後，是怎樣監控判斷遊戲是否已經結束的呢？

答案是回呼函數，圖片切片交換函數通過回呼函數來判斷遊戲是否已經結束，遊戲是否結束的判斷函數前面我們已經說過。圖片切片交換函數就是通過添加gameIsEnd作為回呼函數，這樣在每次圖片切片移動交換完成之後，就判斷一下遊戲是否結束。圖片切片的交換函數還是比較複雜的，有興趣的同學可以研究一下，下面是其實現代碼，大家重點理解其中添加了回呼函數監控遊戲是否結束就好了。

//通過class擷取元素function getClass(cls){    var ret = [];    var els = document.getElementsByTagName("*");    for (var i = 0; i < els.length; i++){        //判斷els[i]中是否存在cls這個className;.indexOf("cls")判斷cls存在的下標，如果下標>=0則存在;        if(els[i].className === cls || els[i].className.indexOf("cls")>=0 || els[i].className.indexOf(" cls")>=0 || els[i].className.indexOf(" cls ")>0){            ret.push(els[i]);        }    }    return ret;}function getStyle(obj,attr){//解決JS相容問題擷取正確的屬性值    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];}function gameEnd() {    alert('遊戲結束！');}function startMove(obj,json,fun){    clearInterval(obj.timer);    obj.timer = setInterval(function(){        var isStop = true;        for(var attr in json){            var iCur = 0;            //判斷運動的是不是透明度值            if(attr=="opacity"){                iCur = parseInt(parseFloat(getStyle(obj,attr))*100);            }else{                iCur = parseInt(getStyle(obj,attr));            }            var ispeed = (json[attr]-iCur)/8;            //運動速度如果大於0則向下取整，如果小於0想上取整；            ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);            //判斷所有運動是否全部完成            if(iCur!=json[attr]){                isStop = false;            }            //運動開始            if(attr=="opacity"){                obj.style.filter = "alpha:(opacity:"+(json[attr]+ispeed)+")";                obj.style.opacity = (json[attr]+ispeed)/100;            }else{                obj.style[attr] = iCur+ispeed+"px";            }        }        //判斷是否全部完成        if(isStop){            clearInterval(obj.timer);            if(fun){                fun();            }        }    },30);}

4 補充和總結

4.1 遊戲中值得完善的功能

我認為該遊戲中值得最佳化的地方有兩個：

• 1.為拼圖小遊戲添加縮圖，因為縮圖有利於為玩遊戲的使用者提供思路。我們又在瀏覽器本機存放區中儲存了縮圖的base64內容，所以實現起來也很容易。

• 2.緩衝有的時候也讓人很痛苦，就比如說在遊戲中有些使用者就想要重新開始，而我們的小遊戲只有在遊戲完成之後才清空緩衝，重新整理頁面，遊戲才能夠重新開始。這給使用者的體驗很不好，我們可以加一個重設遊戲按鈕，清空緩衝並最佳化遊戲結束後的一些邏輯。

這些功能感興趣的小夥伴可以嘗試一下。