Flexbox + js實現滑動拼圖游戲

滑動拼圖就是把一張圖片分成幾等份，打亂順序（下圖），然后通過滑動拼湊成一張完整的圖片。

要實現一個拼圖游戲，需要考慮怎樣隨機的打亂順序，怎樣交換兩張圖片的位置，等等。但是，使用了Flexbox布局以后，這都不需要你去考慮，瀏覽器會幫你做，Flexbox就是這么的強大。關於Flexbox的介紹可以點擊這里。

這個游戲中要用的是Flexbox布局的order屬性，order屬性可以用來控制Flex項目的順序。

這里我用九個canvas元素來把圖片分成九等分，也可以用其他方法，比如背景圖片定位：

<div class="wrap">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>

如果不僅限於九宮格，還要十六宮格等，上面的元素完全可以動態生成。

下面是生成打亂順序的九張圖代碼：

var drawImage = function (url) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        img.onload = function () {
            resolve(img);
        };
        img.src = url;
    })
};

drawImage("2.jpg").then(function (img) {
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var random = arr.sort(function() {return Math.random() > 0.5});
    [].forEach.call(document.querySelectorAll("canvas"), function (item, i) {
        item.width = $(".wrap").clientWidth / 3;
        item.height = $(".wrap").clientHeight / 3;
        item.style.order = random[i];
        var ctx = item.getContext("2d");
        ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);
    });
});

上面的關鍵代碼是：

item.style.order = random[i];

通過將數字打亂順序，隨機賦值給每個canvas元素的order屬性，這樣瀏覽器就自動幫你排序了。

關於代碼的其他細節就不講了，這里說一下怎樣交換兩張圖片的位置，真是出乎意料的簡單：

var order1 = item.style.order;
var order2 = target.style.order;
item.style.order = order2;
target.style.order = order1;

只需要交換雙方的order屬性值就可以了。

完整代碼可以在這里查看。

DEMO可以點擊這里，最好用谷歌模擬器或者手機打開，因為只支持移動端觸摸事件。

代碼中只實現了基本功能，並沒有實現完整功能。