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

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

遊戲功能

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…