這個小游戲主要考察對js基礎知識的掌握和使用情況.
知識點
- 布局: 使用九宮格布局方式, 絕對定位子元素, 并且要留一個空格元素, 用于交換位置.
- 玩法:
- 剛進游戲是一種打亂布局的情況.
- 當我們點擊某一塊的時候, 我們需要判斷這塊是否可以移動, 只有四周有白塊的方塊才可以移動. (根據位置來比較)
- 我們需要判斷是否已經拼圖成功.(根據位置)
效果圖如下:
拼圖游戲
解答
判斷某一塊是否可以移動, 以及移動方向
- 獲取點擊的這一塊的top和left值
- 和空白格的top和left進行運算
- 如果點擊的這一塊可以移動, 說明這一塊的 ( left值與空白格的left相同并且top值的差的絕對值是一個方格的高度 ) , 或者 ( top值與空白格的top值相同, 并且left值的差的絕對值是一個放歌的寬度) 只有這兩種可能
- 如果點擊的方格的left值與空白格的left相同, top值 > 空白格的top值, 說明點擊的這一塊要向下移動, 空白格向上移動, 如果 小于空白格的值的話, 說明點擊的方格需要向上移動, 空白格向下移動.
- 如果點擊的方格的top值與空白格的top值相同的話, left > 空白格的left的話, 則點擊的方格需要想左移動, 如果小于空白格的left值, 則點擊的方格需要向右移動.
判斷是否已經復原.
- 首先在九宮格布局的時候, 用一個數據將每個方塊的原始正確位置記錄下來, 并將這個標簽記錄下來. 每移動一步, 就去對比下每個位置是否是正確的.
打亂布局
- 打亂布局需要注意, 不能隨便打亂, 要根據空白格來進行打亂, 就是讓空白格隨機移動相應的步數即可, 我做的時候就是讓白塊隨機移動100次. 只有這樣才能復原.
有不明白的地方給我發簡信 or 給我發郵件
只寫沒有代碼不是很好理解, 代碼地址如下:
