[製作一些東西] - 8-puzzle
點擊圖片就可以玩喔~(目前只能用鍵盤)
這部分就直接用上次 ooxx 的格子囉，是用 css grid layout 做的，有興趣可以參考我之前寫的
用 css 製作九宮格
🌕製作數字
從這裡下載了圖片之後，寫了一個小腳本把它切開了 (想要嗎？腳本在這裡～)
🌕把數字放進格子
這次原本也是想直接用data attribute來解決的～但是因為不想要寫9個一樣的css，就先嘗試了使用attr方法
不過由於這樣使用 attr 目前還在實驗階段，所以就爽快的失敗了😶。這次就直接使用 <img> 吧。
先讓它能符合格子的大小
然後生成這些方塊(可以注意到我還是把dataset加上了，它在這裡就真的只是資料而已，沒有相對的css)
🌕遊戲初始化
首先打亂位置，打亂的方法就不提了，只是從完成盤面開始亂移的暴力法。有興趣請直接到 我的repo 看
再把圖片依照相對的位置加到框框裡面(replace就是打亂後的位置)
這裡也一起加入了dataset的資訊，代表著這個框框應該是什麼數字
然後就開始玩囉～
至於完成的判定，還記得之前加上的dataset嗎？只要確認有沒有全部符合就行啦，超簡單~
留言
張貼留言