前言
寫之前,我覺得如果利用好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座標,
如何判斷神經貓是否被圍住了
為了方便,我當然是直接列舉所有可行路徑,列舉不到,自然被圍住了。當然這樣是非常低效的,正確的姿勢應該是列舉神經貓四周所有可行點,並儲存於陣列中,再次迴圈所有可行點道的四周的點,重複則跳過,直至列舉完所有節點,如果沒有邊界節點,那就是被圍住了。
當得知神經貓被圍住之後,給他新增狂暴狀態動畫。
關於動畫
神經貓沒有動畫。