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可以點擊這里,最好用谷歌模擬器或者手機打開,因為只支持移動端觸摸事件。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM