近来公司恰好有个运动是要做一版
html5的拼图小游戏，因而本身心血来潮，本身先完成了一把，也算是尝尝鲜了。下面就把大致的思绪引见一下，愿望人人都能够做出一款属于本身的拼图小游戏，必需是更炫酷，更好玩！来吧，人人一同加油。。。

应用canvas切出小块图片

我们晓得如今的拼图游戏都是由九张小图片顺次分列构成的，就是相似九宫格那样。那末之前的做法就是我们应用Photoshop如许的东西把原始大图【尺寸平常都是正方形的哦】切成九张小块的正方形小图，然则这类做法有点不天真，假如我们要替换图片的话，就得重新去切图，好麻烦。。。
不过没紧要，如今我们有了canvas！应用canvas我们能够很轻松的做到这些。中心代码以下：

var image = new Image();
image.onload = function() {
    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(index-1).find('img').attr('src', canvas.toDataURL('image/jpeg'));
            index++;
        }
    }
}
//900x900
image.src = "shanlian.jpg";

完成小块图片的随机分列

这里的中心是应用了javascript数组的随机排序，中心代码以下：

imgArr.sort(function(a, b) {
    return Math.random() - Math.random();
});
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++;
    }
}

相干touch事宜的监听和完成

这里不过就是应用向左滑动，向右滑动这些去完成拼图的操纵。中心代码以下：

//阻挠手机上浏览器的弹性下拉。。。
$('body').on('touchstart', function(e) {
    e.preventDefault();
});
$lis.on('swipeLeft', function(e) {
    e.preventDefault();
    var $this = $(this);
    var index = $this.index();
    var html = $this.html();
    var $prev = $this.prev();
    if ($.inArray(index, [3, 6]) > -1 || $prev.size() <= 0) {
        return false;
    }
    $this.html($prev.html());
    $prev.html(html);
    App.check();
});
$lis.on('swipeRight', function(e) {
    e.preventDefault();
    var $this = $(this);
    var index = $this.index();
    var html = $this.html();
    var $next = $this.next();
    if ($.inArray(index, [2, 5]) > -1 || $next.size() <= 0) {
        return false;
    }
    $this.html($next.html());
    $next.html(html);
    App.check();
});
$lis.on('swipeUp', function(e) {
    e.preventDefault();
    var $this = $(this);
    var html = $this.html();
    var index = $this.index() - 3;
    var $up = $lis.eq(index);
    if (index >= 0 && $up.size() > 0) {
        $this.html($up.html());
        $up.html(html);
        App.check();
    }
});
$lis.on('swipeDown', function(e) {
    e.preventDefault();
    var $this = $(this);
    var html = $this.html();
    var index = $this.index() + 3;
    var $down = $lis.eq(index);
    if (index < 9 && $down.size() > 0) {
        $this.html($down.html());
        $down.html(html);
        App.check();
    }
});

游戏是不是完成的推断

这里的话，拼图递次的每一次变化都要去检测一下是不是完成了，道理就是猎取当前小块图片的递次和原始的图片举行比较。中心代码以下：

var resArr = [];
$('#gameBox img').each(function(k, v) {
    resArr.push(v.getAttribute("data-seq"));
});
if (resArr.join("") === oriArr.join("")) {
    //完成的处置惩罚。。。
}

中心代码和思绪就是上面这些，实在全部历程走下来照样蛮简朴的，接下来不过要做的就是再加一下花梢的东西了（时候，难度品级，排名等等）。假如人人感兴趣的话，完整版代码猛戳 这里 了。