今天一時(shí)興起，想玩會(huì)兒游戲。突然想到了很久沒有玩的植物大戰(zhàn)僵尸，之前有一陣子我是非常迷戀這個(gè)游戲的。

相信大家玩過它的人不在少數(shù)，但是如何用自己學(xué)習(xí)的技術(shù)來實(shí)現(xiàn)游戲的功能呢？今天就來分享一下用原生JS+ES6語法，并通過canvas繪制的方式實(shí)現(xiàn)這個(gè)游戲的一些基本功能。

游戲頁(yè)面展示

游戲引擎篇

在開發(fā)這個(gè)游戲的時(shí)候，我選擇基于ES6的class的方式抽象了游戲相關(guān)函數(shù)，關(guān)于這個(gè)小游戲的核心引擎，主要的相關(guān)屬性如下：

其實(shí)核心邏輯很簡(jiǎn)單，就是定義一個(gè)游戲引擎主函數(shù)，生成一個(gè)定時(shí)器以每秒60幀的頻率不停在canvas畫布上繪制游戲場(chǎng)景相關(guān)元素，然后在定時(shí)器函數(shù)中根據(jù)當(dāng)前游戲狀態(tài)（游戲準(zhǔn)備、游戲開始、游戲運(yùn)行、游戲暫停、游戲結(jié)束）來繪制對(duì)應(yīng)游戲場(chǎng)景。

loading游戲狀態(tài)：游戲引擎繪制了頁(yè)面載入圖片，并添加了一個(gè)開始游戲按鈕?start?游戲狀態(tài)：游戲開始讀條倒計(jì)時(shí)，提醒用戶游戲即將開始?running游戲狀態(tài)：繪制游戲運(yùn)行時(shí)所需所有游戲場(chǎng)景素材?stop游戲狀態(tài)：游戲進(jìn)入暫停階段，游戲中如生成陽(yáng)關(guān)、僵尸的定時(shí)器都將清除，角色動(dòng)畫處于靜止?fàn)顟B(tài)?gameover游戲狀態(tài)：分為玩家獲得勝利以及僵尸獲得勝利兩種情況，并分別繪制不同游戲結(jié)算畫面

游戲場(chǎng)景篇

在這里我將游戲中所有可控制的元素都?xì)w于游戲場(chǎng)景中，并且將這些元素都抽象為類，方便管理，這里包括：植物類、僵尸類、陽(yáng)光計(jì)分板類、植物卡片類、動(dòng)畫類,子彈類。

游戲場(chǎng)景中最核心的兩個(gè)類為植物類、僵尸類，不過在這兩個(gè)核心類中都會(huì)用到動(dòng)畫類，這里我先介紹一下。

動(dòng)畫類（Animation）

動(dòng)畫類的作用是將每一個(gè)角色的不同動(dòng)畫序列保存起來，每隔一定時(shí)間切換當(dāng)前顯示的圖片對(duì)象，達(dá)到播放動(dòng)畫的效果。

這里用到的images，就是通過new Image()的方式生成并添加到images中組成的動(dòng)畫序列：

其中type和section用于判斷當(dāng)前需要加載植物或僵尸、哪一個(gè)動(dòng)作所對(duì)應(yīng)動(dòng)畫序列，count和fps用于控制當(dāng)前動(dòng)畫的播放速度，而img用于表示當(dāng)前所展示的圖片對(duì)象，即images[imgIdx]，其關(guān)系類似于以下代碼：

角色類（Role）

這里的角色類主要用于抽象植物類和僵尸類的公共屬性，基本屬性包括type、section、x、y、w、h、row、col，其中row和col屬性用于控制角色在草坪上繪制的橫縱坐標(biāo)（即x軸和y軸方向位于第幾個(gè)方格），section屬性用于區(qū)分當(dāng)前角色到底是哪一種，如豌豆射手、雙發(fā)射手、加特林射手、普通僵尸。

植物類（Plant）

植物類的私有屬性包括idel、attack、bullets、state，其中idel和attack為動(dòng)畫對(duì)象，相信看過上面關(guān)于動(dòng)畫類介紹的小伙伴應(yīng)該能理解其作用，bullets即用于保存當(dāng)前植物的所有子彈對(duì)象（同動(dòng)畫類，子彈類也有屬性、方法的配置，這里就不詳細(xì)敘述了）。

關(guān)于植物的狀態(tài)控制屬性，如isHurt屬性會(huì)在植物受傷時(shí)，切換為true，并由此給動(dòng)畫添加一個(gè)透明度，模擬受傷效果；isDel屬性會(huì)在植物血量降為0時(shí)，將植物從植物對(duì)象數(shù)組中移除，即不再繪制當(dāng)前植物；state屬性用于植物在兩種形態(tài)中進(jìn)行切換，即普通形態(tài)、攻擊形態(tài)，當(dāng)前狀態(tài)值為哪種形態(tài)，即播放對(duì)應(yīng)形態(tài)動(dòng)畫，對(duì)應(yīng)關(guān)系如下：

攻擊形態(tài)的切換，這里就涉及需要循環(huán)當(dāng)前植物對(duì)象與所有的僵尸對(duì)象所組成的數(shù)組，判斷是否有僵尸處于當(dāng)前植物對(duì)象的射程內(nèi)（即處于同一行草坪，且進(jìn)行屏幕顯示范圍）。

這里主要介紹了植物類的相關(guān)屬性，其方法包括初始化植物對(duì)象、植物繪制、植物射擊、更新植物狀態(tài)、檢測(cè)植物是否可攻擊僵尸...

僵尸類（Zombie）

這里就簡(jiǎn)單介紹下plants、zombies對(duì)象數(shù)組；當(dāng)游戲運(yùn)行時(shí)，所以種植的植物以及生成的僵尸都會(huì)配合其相關(guān)初始化參數(shù)plants_info、zombies_info進(jìn)行實(shí)例化再分別保存在plants、zombies對(duì)象數(shù)組中。

后記

較以往的經(jīng)驗(yàn)來看，關(guān)于游戲中相關(guān)的方法邏輯就不詳細(xì)介紹了，這個(gè)分享主要是為了提供給對(duì)小游戲感興趣，但是卻不知如何下手的小伙伴一個(gè)思路和經(jīng)驗(yàn)。