如何用HTML和css实现拼图,打造自己的html5拼图小游戏

得益于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("")) {

//成功后的处理。。。

}

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