拼图小游戏

时间 2019-12-08

标签拼图游戏栏目游戏繁體版

原文原文链接

若是您想要综合使用javascript中canvas、原生拖拽、本地存储等多种技术完成一个有趣的项目，那么这篇博文将很是适合您，水平有限，还望感兴趣的开发人员给予更多代码优化建议。

1 简介和源码

该项目中的拼图小游戏使用javascript原创，相比于网站上相似的功能，它使用到的技术点更先进丰富，功能更强大，还包含程序开发中更多先进的思想理念，从该项目中您将能学到：javascript

FileReader、Image对象的配合canvas对图片进行压缩，切割的技巧。
学习小游戏开发中最经常使用的碰撞检测、状态监控、刷新保持状态的处理方法。
深刻了解拖拽交换元素的细节，学习到动态元素绑定事件、回调函数的处理方式。

项目源码-githubjava

下面是游戏界面的示例图：
node

2 实现思路

根据游戏界面图咱们能够将完成这么一个小游戏分为如下几步来实现：git

1.拖拽图片到指定区域，使用FileReader对象读取到图片的base64内容，而后添加到Image对象中
2.当Image对象加载完成后，使用canvas对图片进行等比缩放，而后取到缩略图的base64内容，添加到另一个缩略图Image对象中，并将该缩略图base64的内容保存到本地存储（localStorage）中
3.当缩略图Image对象加载完成后，再次使用canvas对缩略图进行切割，该游戏中将缩略图切割成3*4一共12等份，使用本地存储保存每份切割缩略图base64内容，将缩略图顺序打乱，使用img标签显示在web页面上
4.当缩略图切片都添加到web界面上之后，为每一份缩略图切片添加注册拖拽事件，使得缩略图切片能够相互交换，在这个过程中，添加对缩略图切片顺序状态的监控，一旦完成拼图，就直接展现完整的缩略图，完成游戏

从以上对小游戏制做过程的分析来看，第4步是程序功能实现的重点和难点，在以上的每一个步骤中都有不少小细节须要注意和探讨，下面我就详细分析一下每一个步骤的实现细节，说的很差的地方，欢迎你们留言指正。github

3 开发细节详解

3.1 图片内容读取和加载

在游戏开发第1步中，咱们将图片拖拽到指定区域后，程序是怎样获得图片内容信息的呢？fileReader对象又是怎样将图片信息转化为base64字符串内容的？Image对象拿到图片的base64内容以后，又是怎样初始化加载的？带着这些疑问，咱们来研究一下实现项目中实现了第一步的关键代码。web

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是我封装的一个对元素添加事件、事件对象的兼容处理等经常使用功能的简单对象，下面是其添加注册事件的简单简单代码，其中还有不少其余的封装，读者可自行查阅，功能比较简单。json

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方法中进行的，程序后边还会有这种状况，以后就再也不赘述了。canvas

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) {
            //当鼠标拖动时计算div的位置
            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.缓存有的时候也让人很痛苦，就好比说在游戏中有些用户就想要从新开始，而咱们的小游戏只有在游戏完成以后才清空缓存，刷新页面，游戏才可以从新开始。这给用户的体验很很差，咱们能够加一个重置游戏按钮，清空缓存并优化游戏结束后的一些逻辑。

这些功能感兴趣的小伙伴能够尝试一下。

4.2 总结

虽然花了周末几乎一天的时间写了几百行代码才实现了一个功能不是很强大的小游戏，可是在这个过程当中查阅了不少资料，总算把本身喜欢作的一件事情给完成了，仍是很开心的。写这篇博客的目的是为了和更多有相同兴趣爱好的小伙伴分享一下本身的看法，笔者水平有限，但愿你们对代码有好的建议或者有更好的思路留言相告。感谢你们！