如果您想要综合使用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 开发细节详解在游戏开发第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(&＃39;请上传图片类型的文件&＃39;);
}
if (len > 1) {
alert(&＃39;上传图片数量不能大于1&＃39;);
}
var canvas = document.createElement(&＃39;canvas&＃39;);
var cOntext= canvas.getContext(&＃39;2d&＃39;);
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(&＃39;FullImage&＃39;, 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方法中进行的，程序后边还会有这种情况，之后就不再赘述了。
在第一步中我们完成了对拖拽文件的内容读取，并将其成功加载到了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(&＃39;FullImage&＃39;, tmpSrc);
thumbimg.src = tmpSrc;
}确定了缩放后的宽度targetWidth和高度targetHeight之后，我们使用canvas的drawImage方法对图像进行压缩，在这之前我们最好先使用画布的clearRect对画布进行一次清理。对图片等比缩放以后，使用canvas的toDataURL方法，获取到缩放图的base64内容，赋给新的缩放图Image对象thumbimg的src属性，待缩放图加载完毕，进行下一步的切割处理。缩放图的base64内容使用localStorage存储，键名为"FullImage"。浏览器的本地存储localStorage是硬存储，在浏览器刷新之后内容不会丢失，这样我们就可以在游戏过程中保持数据状态，这点稍后再详细讲解，我们需要知道的是localStorage是有大小限制的，最大为5M。这也是为什么我们先对图片进行压缩，减少存储数据大小，保存缩放图base64内容的原因。关于开发过程中存储哪些内容，下一小节会配有图例详细说明。
生成缩略图之后要做的工作就是对缩略图进行切割了，同样的也是使用canvas的drawImage方法，而且相应的处理必须放在缩略图加载完成之后（即thumbimg.onload）进行处理，原因前面我们已经说过。下面我们再来详细分析一下源代码吧：
thumbimg.Onload= function () {
//每一个切片的宽高[切割成3*4格式]
var sliceWidth, sliceHeight, sliceBase64, n = 0, outputElement = &＃39;&＃39;,
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(&＃39;slice&＃39; + n, sliceBase64);
//为了防止图片三像素问题发生，请为图片属性添加 display:block
newElement = "上面的代码对于大家来说不难理解，就是将缩略图分割成12个切片，这里我给大家解释一下几个容易困惑的地方：
1.为什么我们再切割图片的时候，代码如下，先从列开始循环？
for (var j = 0; j <4; j++) {
for (var i = 0; i <3; i++) {
//此处省略逻辑代码
}
}这个问题大家仔细想一想就明白了，我们将图片进行切割的时候，要记录下来每一个图片切片的原有顺序。在程序中我们使用 n 来表示图片切片的原有顺序，而且这个n记录在了每一个图片切片的元素的name属性中。在后续的游戏过程中我们可以使用元素的getAttribute(&＃39;name&＃39;)方法取出 n 的值，来判断图片切片是否都被拖动到了正确的位置，以此来判断游戏是否结束，现在讲起这个问题可能还会有些迷惑，我们后边还会再详细探讨，我给出一张图帮助大家理解图片切片位置序号信息n:
阅读代码程序我们知道，我们每生成一个切片，就会构造一个元素节点： newElement = " 。我们在是在外部先声明了一个放新节点的数组sliceElements，我们每生成一个新的元素节点，就会把它放到sliceElements数组中，但是我们向sliceElements头部还是尾部添加这个新节点则是随机的，代码是这样的：
(Math.random() > 0.5) ? sliceElements.push(newElement) : sliceElements.unshift(newElement);
我们知道Math.random()生成一个[0, 1)之间的数，所以再canvas将缩略图裁切成切片以后，根据这些切片生成的web节点顺序是打乱的。打乱顺序以后重新组装节点：
京公网安备 11010802041100号