vue 開發 2048/圍住神經貓 小遊戲

pengliheng發表於2018-06-18

github  -  2048圍住神經貓 小遊戲

vue 開發 2048/圍住神經貓  小遊戲

前言

寫之前,我覺得如果利用好vue的雙向繫結,那麼就只需要操縱陣列就可以玩2048了。但實際操作過程中遇到坑好多。不過基本功能已經實現,可以玩額。

遇到的坑

阻止父元素原生的scroll事件,這關乎小遊戲是否穩定,之前思路一直是覺得只要js就能搞定,現在發現,這個應該用css來做,但是ios手機至今想要解決辦法。

touch-action: none;複製程式碼

方塊移動的時候,需要一個動畫,我用的css3,個倒是簡單

vue對陣列的監聽,這個我用的splice,

由於dom元素是通過v-for 迴圈出來的,所以不得不考慮用空dom元素填充vue 開發 2048/圍住神經貓  小遊戲

核心程式碼

自然就是移動演算法咯,為什麼要用promise.all呢,本打算在移動完成後間隔0.1s,而後才進行相加。但是問題多多就算了算了用JavaScript的animate API。

vue 開發 2048/圍住神經貓  小遊戲

vue 開發 2048/圍住神經貓  小遊戲


------------------------------------------------------------------


=====================================================================

圍住神經貓  

vue 開發 2048/圍住神經貓  小遊戲vue 開發 2048/圍住神經貓  小遊戲

vue 開發 2048/圍住神經貓  小遊戲

前言

為啥要用vue做:好像可以蹭熱度。

A*演算法

網路上那些當然是看不懂了,就自己寫個算了。

vue 開發 2048/圍住神經貓  小遊戲

vue 開發 2048/圍住神經貓  小遊戲


vue 開發 2048/圍住神經貓  小遊戲

關於座標

由於要判斷四周是否可行,必須建立xyz座標,

vue 開發 2048/圍住神經貓  小遊戲

如何判斷神經貓是否被圍住了

為了方便,我當然是直接列舉所有可行路徑,列舉不到,自然被圍住了。當然這樣是非常低效的,正確的姿勢應該是列舉神經貓四周所有可行點,並儲存於陣列中,再次迴圈所有可行點道的四周的點,重複則跳過,直至列舉完所有節點,如果沒有邊界節點,那就是被圍住了。

當得知神經貓被圍住之後,給他新增狂暴狀態動畫。

關於動畫

神經貓沒有動畫。


相關文章