手记

打造自己的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("")) {
     //成功后的处理。。。                   
}

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

22人推荐
随时随地看视频
慕课网APP

热门评论

这个真心不错~~~~~~

请问视频在那?? 标题

   我用的Chrome浏览器,touchstart 游戏开始补了。  

查看全部评论