得益于liuyubobobo老师的canvas课程和思路指点，做了一版简单的 html5拼图小游戏，下面就简单介绍一下实现的原理。。。
利用canvas裁剪拼图所需的小块图片//核心代码如下：
var index = 1;
for (var i=0; i<3; i++) {
for (var j=0; j<3; j++) {
ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);
$lis.eq(imgArr[index-1]-1).find('img').data('seq', index).attr('src', canvas.toDataURL('image/jpeg'));
index++;
}
}
小块拼图的随机排列//核心代码如下：
var imgArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
imgArr.sort(function(a, b) {
return Math.random() - Math.random();
});
相关touch事件的绑定//组织手机上浏览器的弹性下拉。。。
$('body').on('touchstart', function(e) {
e.preventDefault();
});
$lis.on('swipeLeft', function(e) {
//....
});
$lis.on('swipeRight', function(e) {
//....
});
$lis.on('swipeUp', function(e) {
//....
});
$lis.on('swipeDown', function(e) {
//....
});
游戏结果的判断var resArr = [];
$('#gameBox img').each(function(k, v) {
resArr.push(v.getAttribute("data-seq"));
});
//oriArr：原始的顺序数组
if (resArr.join("") === oriArr.join("")) {
//成功后的处理。。。
}
核心代码和思路就是上面这些，其实整个过程走下来还是蛮简单的，接下来无非要做的就是再加一下花哨的东西了(时间，难度等级，排名等等)。如果有同学感兴趣的话，完整版代码猛戳 这里 了。
