[S16_WebFund] Post#2 第5組 黑白雙柱女祭司

Group content visibility: 
Use group defaults
Groups audience: 

組員: 

資工二 403261649 黃志華
資工二 403261340 蔡承紘
資工二 403261481 羅安妮
醫資一 404570243 游育承

動機:

我們組本身喜歡玩遊戲多年,而這次有機會修web相關課程,因此想嘗試HTML5是否能相較於Flash等技術重現經典的遊戲。

技術: 

1.1 建立運行場景

首先,我們可以先建立一個最簡單的界面,如圖所示,遊戲界面的最上面顯示了玩家當前操作飛機的生命以及分數。

 

1.2 建立捲軸背景

利用視差滾動建立一個背景不斷向下的背景,令飛機看起來不停向上飛行

方法:創建一個背景移動的精靈,計算需要截取的部分圖像,渲染到canvas中。

(把屏幕上顯示的遊戲窗口稱為一個視口,然後需要找一個比視口長度長的背景圖片,寬度和視口寬度一致,這樣,我們不斷改變背景精靈類的Y坐標,然後計算出需要把背景的哪一部分繪製到視口中。)

 

1.3 建立射擊類

- Player需要通過玩家控制發射子彈,而Enemy根據一定的規則進行發射子彈。

不管是哪種方式發射子彈,子彈精靈的產生都是相對某一個Shooter對象而言,並且不同的Shooter發射子​​彈的位置可能不太一樣。所以,根據這個特點,我們在Shooter類中增加一個tags屬性,可以稱該屬性為掛載點,該屬性用來存儲某個精靈上面的幾個區域,這幾個區域可以作為與之相關的其他精靈的位置,而且,根據需要,這些掛載點具有不同的用途。(採用AABB包圍盒。這是非常廉價的檢測手段,但精確度不高,為了解決這個問題,通常我們把一個精靈採用多個AABB包圍盒的方式處理,解決子彈撞飛機的問題)

 

1.4 建立玩家類

(根據前面的分析,Player類需要從Shooter類繼承就可以了。當然,還需要做一些調整,比如需要設置Player的groupID以及targetID,Player的free狀態的移動需要由玩家控制,以及我們可以給Player添加一些特殊的效果,如防護罩等。)

當飛機的生命降為0的時候,設置場景的isOver為true,這時,場景就會轉換為結束場景,如果生命數大於0則隱藏飛機,表示Player死亡

 

1.5建立敵機類

在Enemy類中,增加了一個score屬性,表示該敵機的分數,一旦該敵機死亡,則給遊戲增加相應的分數。同時我們複寫了update方法以及onCollide方法,在onCollide方法中,我們改變了敵機目前顯示的動畫幀,表示該敵機正受到攻擊,該狀態會持續5幀後顯示正常狀態。另外,在構造函數中重新註冊了一個 FreeState1 的狀態對象,和一個 DieState1 的狀態對象, FreeState1表示該對象表示敵機自由移動時的行為

 

1.6 建立子彈類

子彈類可以直接從Sprite 類繼承,和普通的Sprite 精靈不同的地方在於,子彈類需要在update的時候,檢測是否有和其他的精靈類,比如Enemy以及Player發生碰撞,一旦發生碰撞,則需要觸發Shooter類的onCollide方法。

 

1.7 遊戲配置實現

把遊戲中需要的一些數據採用配置文件的形式來存儲,一方面可以防止遊戲中硬編碼的情況發生,另一方面可以讓配置數據可以更加靈活地控制遊戲的邏輯,做到極致的情況是使用數據來驅動遊戲邏輯

使用JSON格式,然後,需要把這個配置文件在資源文件中定義,資源配置文件片斷就增加了一種類型的資源

新增加了一種類型的資源,所以在xengine引擎中的ResManager類中需要新定義一種類型,本質上來說,實際上就是加載一個JSON格式的文

 

1.8 運行場景實現

 而圖片素材來自於一款叫做Project Blaze Zero 的飛行射擊遊戲,該遊戲採用了Construct2遊戲引擎開發,Construct2遊戲引擎也是一款基於HTML5的2D遊戲引擎,它可以讓你在不用編碼的情況下開發出一款令人滿意的小遊戲。

困難:

開始做這遊戲時真的無從入手,幸好運用圖書館的資源,借閱到大量關於html 5遊戲制作所需要的技術,得知制作的方向,和所需的。

心得:

最開始完成劇情的時候,以為最煎熬的部分已經結束了,沒想到開始Coding才是最煎熬的,到最後還被迫要改變方向,覺得蠻失落的,只能繼續精進,讓想好的劇情有一天成為實體。
不過,最後還是能做出一個嘗算完整完成的遊戲,也會有份外的滿足感。