要實現一個拼圖游戲，需要考慮怎樣隨機的打亂順序，怎樣交換兩張圖片的位置，等等。但是，使用了Flexbox布局以后，這都不需要你去考慮，瀏覽器會幫你做，Flexbox就是這么的強大。關于Flexbox的介紹可以點擊這里。
這個游戲中要用的是Flexbox布局的order屬性，order屬性可以用來控制Flex項目的順序。
這里我用九個canvas元素來把圖片分成九等分，也可以用其他方法，比如背景圖片定位：

如果不僅限于九宮格，還要十六宮格等，上面的元素完全可以動態生成。
下面是生成打亂順序的九張圖代碼：

上面的關鍵代碼是：

通過將數字打亂順序，隨機賦值給每個canvas元素的order屬性，這樣瀏覽器就自動幫你排序了。
關于代碼的其他細節就不講了，這里說一下怎樣交換兩張圖片的位置，真是出乎意料的簡單：

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

完整代碼

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript結合Flexbox簡單實現滑動拼圖游戲_javascript技巧

javascript結合Flexbox簡單實現滑動拼圖游戲_javascript技巧:滑動拼圖就是把一張圖片分成幾等份，打亂順序（下圖），然后通過滑動拼湊成一張完整的圖片。 要實現一個拼圖游戲，需要考慮怎樣隨機的打亂順序，怎樣交換兩張圖片的位置，等等。但是，使用了Flexbox布局以后，這都不需要你去考慮，瀏覽器會幫你做，Flex

推薦度：

點擊下載本文 文檔為doc格式