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能夠點擊這裏，最好用谷歌模擬器或者手機打開，由於只支持移動端觸摸事件。

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