打造自己的html5拼图小游戏

得益于liuyubobobo老师的canvas课程和思路指点，做了一版简单的 html5拼图小游戏，下面就简单介绍一下实现的原理。。。

1. 利用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++;
    }
}

1. 小块拼图的随机排列

//核心代码如下：
var imgArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
imgArr.sort(function(a, b) {
    return Math.random() - Math.random();
});

1. 相关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) {
    //....
});

1. 游戏结果的判断

var resArr = [];
$('#gameBox img').each(function(k, v) {
    resArr.push(v.getAttribute("data-seq"));
});
//oriArr：原始的顺序数组
if (resArr.join("") === oriArr.join("")) {
     //成功后的处理。。。                   
}

核心代码和思路就是上面这些，其实整个过程走下来还是蛮简单的，接下来无非要做的就是再加一下花哨的东西了（时间，难度等级，排名等等）。如果有同学感兴趣的话，完整版代码猛戳 这里 了。