0052 遊戲連連看編寫剩餘方塊移動以及是否結束

JavaScript 手遊 遊戲 零基礎學編程by學哥 零基礎學編程by學哥 2017-11-03

前一節課編寫好了判斷2個相同圖片是否可以連接的函數,相當於核心的功能已經具備了。

這節課來完成其它輔助的功能,讓遊戲可以更順利的進行下去。

編寫剩餘方塊移動函數

按照之前的設計,每一關的不同主要是靠移動剩餘方塊的位置來區分。

具體移動方向如下:

第1關:不移動

第2關:向下移動

第3關:向上移動

第4關:向左移動

第5關:向右移動

第6關:從中間向左右分開移動

第7關:從中間向上下分開移動

第8關:從中間向上下左右分開移動

第9關:從上下左右向中間移動

第1關最簡單,無需移動。

第2關到第5關都是整體移動,假如2個圖片消除之後,就要調用一個移動函數,移動函數當中就是根據不同的移動方向,將相對位置剩餘的方塊進行移動,修改allimg的存儲數據即可。

後面4關也是同樣的處理,僅僅需要注意按照中軸線進行區分不同的部分移動的方向不同而已。

首先來做向下移動的處理,linklink.js修改如下:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

修改初始關卡為第2關:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

刷新網頁:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

然後消除一組相同圖片:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

可以看到,消除的2個圖片上方的所有圖片都整體向下移動了一格。

然後消除更多組的圖片:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

可以看到,整體是從上向下移動的效果。

接下來,按照這個思路,將剩餘的7種情況編寫完成:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

然後依次修改關卡初始值來測試每一關是否能夠正常移動。

判斷是否存在可連通的情況

如果當遊戲進行到某種情況時,可能產生一種情況,由於互相鎖住路線,導致所有的圖片都無法連接了,這時候遊戲就無法繼續進行了,那麼這個時候程序必須能夠自動判斷出這種情況並作出處理。處理的方式要麼是遊戲結束,要麼是將剩餘方塊變化位置,同時變換位置的時候也要保證變換完成之後必須存在至少一組可連接的圖片,否則仍然進行不下去。

要判斷是否所有的相同圖片組合都不能進行連接了,方法可以採用遍歷所有組合的辦法,也就是按位置次序遍歷所有的圖片,然後再次遍歷該位置後面所有相同的圖片,確定2個相同圖片後,調用前一節課的判斷是否連通的函數,假如可以連通則認為存在一種可能,就可以函數返回true,如果遍歷完所有的圖片組合都沒有找到一組,則函數返回false。

為了調試看log,將其它函數中的console.log語句都註釋掉,並且調整為測試第1關。

linklink.js修改如下:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

刷新網頁,進行測試:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

消掉一組圖片並且移動之後,console會顯示有解還是無解,顯示判斷結果:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

不停的消除,直到發現有無法連接的情況:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

然後人工進行逐個檢查,確認確實是沒有可連接的情況了,才能證明函數正確無誤。

編寫無解情況下的方塊位置變換函數

當存在無解的時候,就需要對剩餘的方塊位置進行變換,確保遊戲可以繼續進行下去,同時變換位置的時候也要保證變換完成之後必須存在至少一組可連接的圖片。

變化位置,可以採取下面的步驟方法,達到隨機變換的目的。

從前往後,從上往下,將相鄰2個有圖片的地方的圖片進行交換。

linklink.js修改如下:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

為了方便測試,可以調整初值參數如下:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

消除圖片,直到即將出現出現無解的情況:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

然後消除最後一組圖片,看看程序是否正常進行了變換:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

可以看到圖片位置前後相鄰進行了交換,並且至少存在一組可以連接的圖片了。

判斷是否遊戲結束和增加過關功能

前面的函數都寫好之後,就可以將生命值的因素考慮進去了。

首先判斷是否全部消除了,是的話則過關,增加關卡數值,重新初始化所有圖片,並將生命值加1。

否則沒有過關,則判斷當出現無解的時候,則判斷如果生命值還有,則可以變換位置,如果生命值為0了,則遊戲結束。

linklink.js修改如下:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

將難度調高一些,生命值調少一些,讓測試可以方便一點:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

刷新網頁,進行測試:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

然後測試,消耗掉1個生命值:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

再消耗掉1個生命值:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

當再次無解的時候:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

可以看到遊戲結束了,點擊確定,可以看到遊戲圖片全部清空了,並且彈出alert,可以重新開始遊戲。

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

這樣就完成了一個關卡之內如果出現無解的時候可以讓遊戲繼續下去的功能。

然後將生命值調整為正常,並且將第一關的難度值調整為正常:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

然後刷新網頁開始正常遊戲,測試當全部消除完成之後,遊戲是否可以進入第2關。

消除到最後一組的時候:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

消除完成之後:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

點擊確定按鈕,可以看到關卡進入了下一關:

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

消除2組圖片,可以看到剩餘圖片向下移動了。

0052 遊戲連連看編寫剩餘方塊移動以及是否結束

可以看到網頁內存儲的JavaScript變量level和life的值都已經變化了,但還沒有體現到網頁的顯示文字上面,下節課就來完成這個效果,以及增加計時功能、暫停功能和提示功能。

相關推薦

推薦中...