打造專屬本身的html5拼圖小遊戲

最近公司恰好有個活動是要作一版 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("")) {
    //完成的處理。。。
}

核心代碼和思路就是上面這些，其實整個過程走下來仍是蠻簡單的，接下來無非要作的就是再加一下花哨的東西了（時間，難度等級，排名等等）。若是你們感興趣的話，完整版代碼猛戳 這裏 了。