VUE＋WebPack：開發一款太空版植物大戰殭屍的前端頁游

從本節開始，我們探討如何使用VUE和WebPack開發一款類似於植物大戰殭屍的前端遊戲，當遊戲完成後，情況如下：

遊戲的設定如下，一系列外星飛船從天而降入侵地球，為了保護地球，玩家需要使用各種道具防止外星飛船落入底部的地球。如圖所示，這些道具可以是箱子，也可以是衛星。當外星飛船被成功阻擋時，界面會彈出一系列獎章，也就是圖片裡面的」E」，點擊這些獎章後，玩家可以獲得積分，一旦積分達到要求，玩家就可以選擇炮台，也就是圖片中紅色的物體，炮台可以發射子彈，一旦子彈打中外星飛船，飛船就會從界面上消失，遊戲的玩法其實和植物大戰殭屍是如出一轍。本節，我們先完成代碼基本架構的設計。

先在本地目錄新建一個VUE工程，在工程目錄下打開index.html做如下修改：

Space Defender

在代碼中，我們先把需要使用的若干類庫給載入進來，在本項目中，我們新增了兩個類庫，一個是movieclip-0.7.1.min.js，另一個是assets.js，後者是一個資源類庫，我們遊戲所有的圖片資源都壓縮在這個類庫里，後面我們會詳細解讀它的作用。

接著進入src/目錄，在裡面修改App.vue:

它的主要作用是引入GameContainer組件，遊戲的啟動將由GameContainer組件載入如頁面後開始，我們再看看該組件的實現，進入component/目錄，在裡面新增一個文件名為：gamecomponent.vue，然後添加如下代碼：

它的邏輯簡單，主要是在頁面顯示遊戲標題，它最重要的作用是將GameScene引入頁面，遊戲的所有特效，場景都將由GameScene組件來完成，接著，我們重點查看GameScene的實現，在目錄下新建一個文件名為gamescenecomponent.vue,打開後先完成以下代碼：

template部分的代碼主要用來設計遊戲界面，在上面代碼中，我們現在頁面載入一個html5的』畫布『組件，也就是canvas,遊戲所有的特效顯示將依賴canvas組件來完成。繼續在template部分添加如下代碼：

上面代碼的作用是在頁面頭部顯示與遊戲相關的數據，上面代碼完對應的就是前面遊戲界面截圖中的頭部顯示內容：

在遊戲舞台的底部，我們添加按鈕，以便玩家在頁面上添加各種能消滅或阻止外星飛船入侵地球的障礙物，相關代碼如下：

上面代碼完成後，在遊戲界面的下方會出現一系列按鈕，情形如下：

接著，我們添加style標籤代碼，這部分代碼其實是一段css,用來對template部分的html代碼進行界面美化：

現在我們開始集中精力完成程序的主邏輯代碼，也就是script標籤部分的代碼，在文件中先添加如下代碼：

data()介面用於設置組件的內部數據，當組件被頁面載入後，mounted()函數就會被執行，一旦它執行後，它會調用init()函數執行組件的初始化工作。我們看看init()初始化函數的實現：

在init函數里，我們先獲取createjs對象，圖片的顯示和特性都需要該類庫提供支持。這裡我們需要了解一下assetsLib,這個對象來自於index.html裡面引入的類庫assets.js,該遊戲所使用的各種圖形例如紅色的炮台，入侵的宇宙飛船，阻擋飛船的箱子，衛星等，全是由flash製作出來的，這些圖片資源全部打包在一個名為assets.fla文件中，這個文件必須使用flash相關軟體才可以查看，為了能夠在js代碼中使用fla文件中的資源，通過flash軟體就可以把.fla文件轉為js代碼文件，通過這個代碼文件我們就可以獲取由flash創建的各種圖片資源。assetsLib就是由assets.js導出來的一個對象，通過調用該對象的介面，我們可以把flash創建的圖片資源載入到頁面上。

我們看下面這段代碼片段：

代碼先創建了一個圖層容器bgLayer,該圖層主要用來繪製遊戲的背景圖，而背景圖片就是assets.Background()介面返回的，我們把背景圖繪製到bgLayer對象里，然後把該對象加入舞台容器控制項，也就是stage,這樣背景圖片就可以顯示在頁面上了, 背景圖的部分顯示如下：

我們接著看下面的代碼片段：

這部分代碼用給頁面添加兩個圖層，一個是boardLayer,這個圖層的作用是繪製玩家在頁面上添加的物件，例如箱子，衛星，以及炮台。而effectLayer這個圖層則用來繪製動態特效，例如飛動的E獎章，以及炮台射出的子彈。當我們把boardLayer圖層添加到舞台容器後，我們就會發現頁面背景圖上方添加了一系列網格圖案，玩家選擇的所有物件都必須放置在網格里：

最後的代碼片段：

setHud()的作用是初始化在頁面頭部的相關信息，例如玩家有多少條命，還剩多少能量值等，同時為底層的按鈕點擊設置響應函數。同時代碼啟動了一個定時器，每秒調用組件提供的tick函數刷新頁面，實現頁面的更新效果。我們繼續閱讀和解析餘下的代碼：

在setHud中，我們通過getElementById獲得html控制項的對象，以便我們後面改變他們該顯示的信息。同時給底部幾個按鈕設置點擊響應函數，當按鈕被點擊是，組件的addButtonOnMouseDown()就會被調用,在該函數里，代碼判斷用戶點擊的按鈕對應哪種物件，並判斷當前玩家所有的資源是否足夠建築對應的建築物，如果資源足夠，那麼就調用readyToPlaceBuidling()函數實現建築物在頁面上的顯示。最後兩個函數我們我們還沒有實現，他們的代碼將在下節課程中再實現。完成上面代碼後，在控制台運行npm run dev命令，代碼被瀏覽器載入後顯示如下：

本節我們搭建了遊戲的基本框架，載入了遊戲背景圖以及一些基本控制項，下節我們進進入到遊戲主流程的開發中。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！