前端菜鳥遊戲篇，拼圖遊戲！

都說小時候盼著長大，長大了又念著童年。我懷念起，在那個簡簡單單的年代，似乎睡前能捧著個諾基亞玩會小遊戲也算是當時孩生中一件趣事了，當時玩的比較多的是，拼圖，貪吃蛇，桌上彈球等等。想到這裡，我就渴望用自己所學的知識，做個拼圖遊戲出來……

遊戲功能

1.遊戲主體拼圖
2.可更改的遊戲難度
3.切換背景圖片
4.來首輕鬆的BGM

遊戲思想

1. 從示例圖中可以看出，拼圖主體是一個網狀的方形，我們需要移動拼塊來完成圖片的復原。我們在這裡引入類比思想，我們可以用二維陣列的操作去模擬拼塊的移動，用增加二維陣列的階數來實現遊戲困難程度的提升，那麼這裡的每一個拼塊就是存在陣列中的元素。

2. 這是一個遊戲剛開始時候的圖片，圖片中拼塊是混亂的，我們需要寫一個演算法來模擬這種混亂。

(小插曲，我曾經想的很簡單，我單純的認為只是讓陣列亂序就行了，但是在我實現後，我 發現這是一個重大錯誤思想。正所謂雜亂無章的武功恰恰有其意想不到的章法，拼圖的混 亂也是有規律的，如果給他隨機的順序，就會出現完成拼圖後有拼塊錯位的問題，類似於魔方的角安錯位置，因此我們要寫的是模擬人為的混亂演算法！）——用改變陣列的下標來類比四個方位的移動。

3. 指令碼中的陣列與HTML中盒子的連線，當盒子狀態改變時，同時改變陣列內容。

遊戲實現

遊戲初始

由於遊戲中預設是最低難度，所以我們在這裡就以最低難度為背景來製作。

在html中寫一個容器container，在script裡寫一個3*3二維陣列。使用迴圈給container新增9個類名為part-ease的div。給陣列從1到8賦值，最後一個設為 "" 代表拼圖的缺口。給part-ease類定義樣式，定義9個類part-ease1到8最後一個為empty。

（注意事項：要將background-size，x,y方向都設為300%，因為part-ease的高度都定義為容器的三分之一，他的背景圖理應也是1/3，所以，對放大3倍的圖片進行position操作，才是原圖的那一塊圖片，但是我不知道為何，就算不設定300%所得的圖片也只是比原圖少了一小部分……）。

自走演算法

宣告兩個變數x,y，分別為二維陣列的前置座標和後置座標的變化量。

向左走：x = -1，y = 0

向右走：x = +1，y = 0

向上走：x = 0，y = -1

向下走：x = 0，y = +1

使用switch來選擇，將四種方向設為4個case，0到3，定義一個0到3的隨機數來執行向哪個方向走。將switch選擇置於while迴圈，定義一個計數器，每次執行有效步數，計數器+1，並同步陣列值的交換操作，當計數器達到一定值後結束。

不同難度可以改變計數器的最大值已達到合理的混亂程度。（注意事項，避免陣列越域，根據實際情況，可以設定一個值記錄上次的走向，讓拼塊避免往返走節省迴圈浪費）

dom的操作

因為每一塊的圖片都是定義在類名裡，所以改變拼塊就是改變類名，對part-ease進行監聽，發生滑鼠事件，且是有效拼塊時，將其part-ease(位置數字)與empty交換即可，同時改變二維陣列的值。

這裡插入一個一位陣列位置轉二維陣列位置的演算法，因為這個被點選的拼塊返回的index是一個它在同為part-ease的一維陣列的index所以需要轉化。

二維前置座標 = (index / 陣列階數) 的向下取整
二維後置座標 = index - 二維前置座標 * 階數

拼圖完成

只要陣列的元素回到[1,2,3,4,5,6,7,8,""]的排列就可以判定拼圖成功啦！拼圖成功後，圖片的缺口將會變成失去的那部分，並提醒。

按鈕操作

在html中給container寫一個兄弟盒子用來儲存按鈕，分別為重新開始，選擇難度，更換圖片，檢視原圖。

重新開始：重新呼叫自走功能 選擇難度：出現簡單，中等，困難選擇按鈕，點選後，陣列和拼圖盒子都將初始化

更換圖片：更改類名隨機切換圖片，並阻止使用原來圖片

檢視原圖：對比原圖進行遊戲，點選返回，隱藏圖片

美化

最後我們更改css，將加個背景音樂，我們的拼圖遊戲就大功告成了!

功能函式

1. init(num) 初始化html,和陣列，不同難度傳值不同。
2. begin(arr) 根據陣列的存值來操作div類名
3. change(index) 根據div類名改變來運算元組
4. go() 模擬人為打亂
5. winner() 判斷勝利條件

專案教訓

1. jquery獲取的類物件為靜態獲取，如果切換難度後將導致新生成的div沒有新增click事件，所以不能單獨拎出拼塊物件，應該將click事件寫在初始化裡面

2. 遇到了事件冒泡問題，我將難度按鈕設定為選擇難度的子元素，在點選時發生了事件冒泡，在查閱了資料後修正了Bug

3. 類名與寫在標籤裡的位置無關，與在css檔案的位置有關如：

    <div class="part-hard part-hard1 bg2"></div>
複製程式碼

這裡part-hard1 和 bg2都定義了一個樣式，我曾經以為bg2會覆蓋part-hard1,但是事實恰恰相反，因為我在css檔案裡把bg2寫在了part-hard1前面，所以一定要注意啊。

專案原始檔都在我的githup裡，需要的可以下載。
github.com/colddayer/l…