滑動拼圖就是把一張圖片分成幾等份,打亂順序(下圖),然后通過滑動拼湊成一張完整的圖片。
要實現一個拼圖游戲,需要考慮怎樣隨機的打亂順序,怎樣交換兩張圖片的位置,等等。但是,使用了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可以點擊這里,最好用谷歌模擬器或者手機打開,因為只支持移動端觸摸事件。
代碼中只實現了基本功能,並沒有實現完整功能。