用Vue寫幾個小遊戲玩玩

求個Star (感謝各位觀衆老爺們~)

GitHub：github.com/ordinaryA/A…

在線Demo

• 掃雷 ：在線試玩
• 管道小鳥 ：在線試玩
• 貪吃蛇 ：在線試玩

掃雷

思路

1. 棋盤的每一個格子分爲三種類型的其中一種：

• 雷：emmm 就是一顆雷
• 數字：以當前格爲中心的九宮格內雷的數量
• 空白：以當前格爲中心的九宮格內沒有雷

2. 當點擊某個格子的時候有對應以上三種類型的三種狀況：

• 雷：emmmm 遊戲結束
• 數字：顯示當前數字，提示用戶雷的數量
• 空白：須要以當前點擊格子爲中心向外遞歸尋找類型爲數字的格子來中止遞歸，如圖

遞歸

1. 假設點擊空白格的座標[x,y]，則以它爲中心的另八個格子座標爲：

const arr = [
                //獲取九宮格數據
                [x - 1, y - 1], //左上
                [x, y - 1], //中上
                [x + 1, y - 1], //右上
                [x - 1, y], //中左
                [x + 1, y], //中右
                [x - 1, y + 1], //左下
                [x, y + 1], //中下
                [x + 1, y + 1] //右下
            ];
複製代碼

2. 過濾掉邊界外的座標，得到以座標爲集合的二維數組：

const [maxX, maxY] = this.boardSize; //棋盤的邊界值
            const filterArr = arr.filter(
                ([posX, posY]) =>
                    !(posX < 0 || posY < 0 || posX >= maxX || posY >= maxY)
            );
複製代碼

3. 遍歷座標的集合，再去獲取以每一項爲中心的另八個座標的集合，進行遞歸;

   

4. 當遞歸的途中某個座標的類型不爲空白，爲數字時，則中止遞歸，以下圖:

   

點擊紅色向外遍歷 => 紫色箭頭 => 綠色箭頭（找到數字格）=> 跳過綠色箭頭的遞歸 => 開始黑色箭頭的遞歸

5. 爲避免遞歸的過程當中重複遞歸某一座標，則給每一個棋格對象添加是否遞歸過的布爾值，經過判斷則可避免重複遞歸
6. 最後會獲得擴展開的邊界都爲數字格的棋盤；

emmmm 不要在乎畫風。

旗子

1. 須要給全部雷類型的格子插上旗子來得到勝利
2. 點擊數字格子時判斷九宮格內的旗子是否正確排雷

• 只有當旗子數量大於或等於點擊格的數字時才判斷
• 旗子誤插時則分別顯示三種狀態：

正確的雷（正常顯示） 排掉的雷（綠色背景的雷） 錯排的雷（紅色背景的雷）

完成！

管道小鳥

鳥對象與管道集合

const bird = {
               top, //鳥的top值
               right, //鳥的right值
               sports, //記錄運動狀態來更改跳躍和下墜動畫
             };
             
const pipe = {
               right, //管道的right值
               topPipeTop, //上管道的top值
               topPipeSrc, 上管道的資源地址
               bottomPipeTop, //下管道的top值
               bottomPipeSrc, //下管道的資源地址
               isCross, //管道是否已被小鳥經過
             }; 
複製代碼

比較關鍵的點：

• 鳥的下落速度與上拋速度 （表示已經所有還給了物理老師 特地去網上查了查公式 (┬＿┬)）
• 遍歷管道集合時，當最後一項距離右邊界必定距離則push一個管道對象，unshift掉首項
• 當小鳥經過一組上下管道後，則該對象新增記錄，遍歷時存在則跳過
• 邊界值的判斷與偏差值

管道的邊界判斷

當小鳥經過管道時存在三種狀態

• 飛往管道的途中或正在管道中飛行
• 失敗
• 成功
  當小鳥成功飛過管道時，記錄當前管道的isCross字段，已被小鳥經過。

完成

接下來就好辦了，寫一個動畫讓背景和小鳥動起來，設置定時器讓管道動起來，一切就完成啦！

貪恰蛇

生成一條貪吃的蛇 🐍與它的食物 🎂

首先須要定義一個二維數組來存放蛇頭與蛇身的座標

• 蛇頭：[~~(Math.random() * (棋盤寬度 - 蛇長 - 1) + 1),~~(Math.random() * (棋盤高度 - 蛇長 - 1) + 1)];
• 蛇身：經過蛇頭的座標隨機向上或向下遍歷座標可獲得
• 蛇的數據結構：最終獲得相似右邊的二維數組 [[10,10],[10,11],[10,12],[10,13],[10,14]]
• 食物： 經過while遍歷出一個不屬於🐍身的座標就行了

讓蛇動起來 🐍

根據移動的方向使蛇的首項的當前軸座標+1，並刪除蛇集合的尾項，蛇就動起來啦！咱們須要：

1. 綁定鍵盤事件，當用戶按下時設置蛇移動的方向;
2. 經過遍歷去判斷蛇頭是否存在邊界問題或蛇身;
3. 判斷蛇頭座標是否與食物座標重合;
4. 當蛇'吃到'食物時，則不刪除蛇的尾項;

大功告成

接下來能夠給貪吃蛇🐍加上一些因(花)吹(裏)斯(胡)汀(哨)的功能了！