點選上面這張圖片就可以看到效果~
之前玩 dropbox 獲取空間闖關遊戲時看到了九宮格效果，
想說就利用 JQuery 的簡單動畫效果來試做，
做出來果然效果還不錯，
也當作一次 div 定位的練習~
其實整體程式並不困難，
主要有兩個重點，
第一：製作一個帶有1~9隨機數的九宮格
第二：判斷哪些方塊可以移動哪些不行
第一個重點要用到兩個陣列
在第一個陣列中填入1~9的隨機數
然後隨機取出放入第二個陣列
就可以做出完美帶有1~9隨機數的九宮格
第二點是要如何判斷哪些是點選會移動的方塊，而哪些不是，
方法其實也很簡單，
就是利用 div 區塊的長寬的合來判斷，
首先先讀取空白區域的 x,y 位置(空白區域其實也是一個空的div區塊)，
然後再讀取要移動方塊的 x,y 位置，
如果與空白方塊"x 軸數值相減"加上"y 軸數值相減"的數值大於方塊的邊長，
就表示點選的方塊並沒有與空白方塊相連，
因此就不能移動~
最後再加上行走步數與時間的判斷式，
以及走到固定位置的判斷，
就可以做出一個簡單的小遊戲了呀ㄎㄎ~
主要有兩個重點，
第一：製作一個帶有1~9隨機數的九宮格
第二：判斷哪些方塊可以移動哪些不行
第一個重點要用到兩個陣列
在第一個陣列中填入1~9的隨機數
然後隨機取出放入第二個陣列
就可以做出完美帶有1~9隨機數的九宮格
第二點是要如何判斷哪些是點選會移動的方塊，而哪些不是，
方法其實也很簡單，
就是利用 div 區塊的長寬的合來判斷，
首先先讀取空白區域的 x,y 位置(空白區域其實也是一個空的div區塊)，
然後再讀取要移動方塊的 x,y 位置，
如果與空白方塊"x 軸數值相減"加上"y 軸數值相減"的數值大於方塊的邊長，
就表示點選的方塊並沒有與空白方塊相連，
因此就不能移動~
最後再加上行走步數與時間的判斷式，
以及走到固定位置的判斷，
就可以做出一個簡單的小遊戲了呀ㄎㄎ~
沒有留言:
張貼留言