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

github  -  2048 -  圍住神經貓 小遊戲

前言

寫以前，我以爲若是利用好vue的雙向綁定，那麼就只須要操縱數組就能夠玩2048了。但實際操做過程當中遇到坑好多。不過基本功能已經實現，能夠玩額。

遇到的坑

阻止父元素原生的scroll事件，這關乎小遊戲是否穩定，以前思路一直是以爲只要js就能搞定，如今發現，這個應該用css來作，可是ios手機至今想要解決辦法。

touch-action: none;複製代碼

方塊移動的時候，須要一個動畫，我用的css3，個卻是簡單

vue對數組的監聽，這個我用的splice，

因爲dom元素是經過v-for 循環出來的，因此不得不考慮用空dom元素填充

核心代碼

天然就是移動算法咯，爲何要用promise.all呢，本打算在移動完成後間隔0.1s，然後才進行相加。可是問題多多就算了算了用JavaScript的animate API。

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

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

圍住神經貓  

前言

爲啥要用vue作：好像能夠蹭熱度。

A*算法

網絡上那些固然是看不懂了，就本身寫個算了。

關於座標

因爲要判斷四周是否可行，必須創建xyz座標,

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

爲了方便，我固然是直接枚舉全部可行路徑，枚舉不到，天然被圍住了。固然這樣是很是低效的，正確的姿式應該是枚舉神經貓四周全部可行點，並存儲於數組中，再次循環全部可行點道的四周的點，重複則跳過，直至枚舉完全部節點，若是沒有邊界節點，那就是被圍住了。

當得知神經貓被圍住以後，給他添加狂暴狀態動畫。

關於動畫

神經貓沒有動畫。