本人80后，小時(shí)候，沒有電子游戲，在地上用樹枝畫好棋盤，找倆大石頭做老虎，24個(gè)小石頭做綿羊，兩個(gè)小伙伴就可以開心玩一下午。懷下舊，順便也讓現(xiàn)在的小朋友們接觸這個(gè)好玩的游戲，把他做成h5小游戲。以下記錄構(gòu)思和實(shí)現(xiàn)過程。github代碼。

游戲體驗(yàn)地址老虎吃綿羊。順便也可以關(guān)注下我的青少年教育公眾號(hào)《納尼亞》和小程序《筆家分享》，thanx！

產(chǎn)品設(shè)計(jì)

1. 數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)
   5*5的棋盤二維數(shù)組。

   // 棋盤二維數(shù)組
   [ [ {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined}, {row: 0, column: 0, chess: undefined} ], // row, column為元素的行列值， chess為在(row， column)位置的棋子
    ... // 一共五行
   ]
   // 棋子
    chess = { type: 'sheep', count: 6, hintFrom: undefined, hintTo: undefined, hintTarget: undefined, hintDisapear: undefined } // type為棋子類型，sheep 或者 tiger。count為數(shù)量，最初6只羊放在一個(gè)格子上。hintFrom用于顯示棋子移動(dòng)起始位置標(biāo)志, hintTo: 用于顯示棋子移動(dòng)結(jié)束位置標(biāo)志, hintTarget: 用于顯示棋子目標(biāo)位置標(biāo)志, hintDisapear：用于顯示棋子消失標(biāo)志
   

   selectedItem: null, // 選中的棋子，
   turn: null, // 輪到哪種棋子移動(dòng)
   status: null, // 游戲狀態(tài)，羊輸了還是贏了
   role: null, // 玩家選擇的角色：羊還是老虎，取決于第一次移動(dòng)的棋子
   sheepLastAutoMove: null // 用于記錄羊上次自動(dòng)移動(dòng)信息：從哪移動(dòng)到哪，為了優(yōu)化羊自動(dòng)移動(dòng)算法     
   

2. 頁面結(jié)構(gòu)設(shè)計(jì)
   首先一個(gè)canvas繪制棋盤：5行5列，2個(gè)大斜線，4個(gè)小斜線
   采用grid布局，div顯示棋子：老虎或者羊。
   根據(jù)不同的提示標(biāo)志，為棋子添加相應(yīng)的提示class
   根據(jù)數(shù)據(jù)顯示具體棋子樣子
3. 每個(gè)棋子添加點(diǎn)擊事件監(jiān)聽
   事件監(jiān)聽函數(shù)里大概做了這些事：選中棋子，落下棋子，過程中會(huì)清除一些標(biāo)志，添加一些標(biāo)志，同時(shí)做一些狀態(tài)判斷，不符合條件的操作攔截掉。
   因?yàn)楹竺嫣砑恿撕陀脩粝喾唇巧淖詣?dòng)移動(dòng)，也是用這個(gè)監(jiān)聽函數(shù)實(shí)現(xiàn)的，所以加了一個(gè)參數(shù)isAuto,用于做區(qū)分邏輯。
4. 和用戶相反角色的自動(dòng)移動(dòng)
   包括老虎自動(dòng)移動(dòng)，和羊自動(dòng)移動(dòng)。
   老虎自動(dòng)移動(dòng)，就是簡單的尋找能吃的羊，就吃掉，不能的話隨便走一步，所以走的比較傻。
   羊自動(dòng)移動(dòng)，會(huì)讓每個(gè)個(gè)羊按目標(biāo)位置，預(yù)先移動(dòng)一次，然后計(jì)算移動(dòng)后的棋盤有利于羊的分?jǐn)?shù)。最后比較所有移動(dòng)的分?jǐn)?shù)，采取最高分移動(dòng)。為了防止羊在倆個(gè)位置來回走，又做了和上一次移動(dòng)做比較的邏輯。
5. 設(shè)置游戲狀態(tài)
   每次移動(dòng)完都判斷羊是否小于6只，小于的話羊就輸了。
   同時(shí)也判斷老虎是否能移動(dòng)，不能移動(dòng)，老虎就輸了

總結(jié)

代碼寫的有點(diǎn)粗糙，自動(dòng)算法也不夠機(jī)智。滿足下懷舊玩玩還湊合。另外，用vue這種數(shù)據(jù)驅(qū)動(dòng)型框架，做游戲也很爽，贊一個(gè)。