HTML5英雄塔防

林越山

【摘 要】塔防游戲是一種非常簡單的游戲。通常在一張地圖中完成，最早的塔防游戲思維起源于FC游戲小豬打狼，在魔獸RPG地圖中帶火了塔防。敵對單元有各種基本屬性（如速度、生命值）。防御塔則各自具有不同的能力，不過無例外地都需要消耗 金錢來購買，金錢是由玩家通過擊敗入侵的敵人來取得的。此論文將構建一款基礎級的塔防游戲，它易于擴展，運用流行的HTML5、CSS3、和JavaScript來搭建。HTML5可以在PC，平板和手機上運行。這使得多平臺下開發(fā)變得簡單。

1.前言

web游戲的開發(fā)類似于傳統(tǒng)游戲的開發(fā)流程，其開發(fā)成員包括策劃，美術，程序，三種主要工種，塔防游戲簡單易上手，其特性非常適合作為無客戶端的web游戲開發(fā)實現(xiàn)。

1.1 web游戲開發(fā)方法

Web游戲基于http協(xié)議上的游戲開發(fā)，其特點是無狀態(tài)。本文開發(fā)工具用了vs2010，也是通常企業(yè)級web站點的開發(fā)工具。由于游戲展現(xiàn)需要用到大量圖片，游戲制作者可以網上尋找資源或是美術外包的形式來完成美化界面的工作。后端選用了筆者較為熟悉的C#來實現(xiàn)。

1.2 web游戲開發(fā)過程

塔防web游戲的開發(fā)過程類似通常的軟件開發(fā)，又和通常的互聯(lián)網web系統(tǒng)有差異，結合游戲開發(fā)元素，系統(tǒng)分析師一般被主策代替，程序設計師一般被主程代替，美工被更加細分的美術代替，加之通常的測試。通常包括如下幾個步驟：

（1）策劃提策劃案：包括系統(tǒng)設計和數(shù)值設計。系統(tǒng)設計，一些塔的種類設計，種類相克，種類結合出不同的效等，這些設計是要憑借設計者的創(chuàng)意以及游戲需求而定。數(shù)值設計這個環(huán)節(jié)我們也是考慮最基本的情況，并且設計者們也可以根據(jù)自己想要的效果合理添加內容，思路一致。

（2）概要設計：策劃案明確后，將得到的數(shù)據(jù)分析后，開始構建數(shù)據(jù)庫的邏輯結構。概要設計文檔形成后，整個程序的邏輯框架也就形成了。

（3）詳細設計：概要設計完成后，根據(jù)策劃制定的不同模塊和內容需要進行詳細分析設計。

（4）程序編碼：部分詳細設計涉及到復雜算法或是獨特算法的，還需要事先請專業(yè)算法人員來設計算法實現(xiàn)，可以直接提供接口或是提供偽代碼讓編碼程序員實現(xiàn)。

（5）測試：程序編碼完成后，就需要測試。測試工作中發(fā)現(xiàn)的錯誤應及時改正，然后將它記錄到測試文檔中，程序需要及時修復bug。

（6）打包：測試完成，確認無誤后。程序就可以打包發(fā)行了。打包工具可以用vs自帶的安裝項目，對于web程序則可以選擇源碼發(fā)布到服務器站點。

2.游戲系統(tǒng)需求分析

2.1游戲內容總體描述

游戲開始玩家只有一定數(shù)量的金幣，玩家只需要通過鼠標就可以控制整個游戲，玩家通過思考敵人的數(shù)量和攻擊來控制防御塔的站位實現(xiàn)防御，如果出現(xiàn)錯誤的判斷有可能導致整個游戲的失敗。當玩家擊退了一定數(shù)量的敵人后將進入下一關。每一關的難度就會增加。

2.2如何吸引玩家分析

此游戲以它獨有的簡單畫面，便捷操作，消滅大量怪物的快感，成功防守的成就感著稱。可以從三個方面來吸引玩家：

（1）獨特的界面展示風格。

（2）大量怪物被擊殺的快感。

（3）對塔防游戲內容的創(chuàng)新。

3.游戲總體結構設計

對開發(fā)者來說，整個游戲系統(tǒng)對象分為入侵怪物和防守炮臺。每關有固定地圖，地圖難度逐級提高，入侵怪物沿地圖固定路線行走。入侵怪物受到傷害為對應地圖區(qū)域防御炮臺所給予的數(shù)值。防守炮臺傷害輸出總是攻擊一個或多個目標致死之后緊接著攻擊范圍內下一個目標。

3.1游戲各功能模塊設計

地圖，地圖固定大小 20*20 的格子組成，每個格子都由50*50大小的png或gif圖片組成，分為可行走格子和不可行走，地圖定義初始怪物進場路線，從初始入口移動到終點逃出后游戲扣分，怪物移動路線通過常用行走算法得出，實際使用的是A星算法。

地圖由地圖編輯器生成，二維的數(shù)組存放到數(shù)據(jù)庫地圖表，需要時讀出。

怪物，怪物等級數(shù)值設置，怪物種類：飛行，陸地，BOSS。

怪物基礎屬性：移動速度，血量，類型（地，空），圖片，級別，類別，名稱。真實生成的怪物在基礎屬性的基礎上的其他屬性： 位置，當前血量，是否活著，移動方向，下個移動位置，冰凍時間，序號，已經行走過的位置記錄。

防御塔，種類：對地對空攻擊，輔助型或攻擊型，輔助有加攻擊和攻速

3.2游戲規(guī)則

（1）總共20關。

（2）每關卡設置最大怪物逃脫量即生命值，每關完成后都會重置，生命為0則游戲失敗結束。

（3）防御塔可建造，可升級，可以三分之二價值變賣，有攻擊范圍。

（4）殺死怪物或是特殊塔攻擊怪物都會得到金錢。

4.塔防游戲的具體實現(xiàn)

主要代碼：程序啟動時運行狀態(tài)機，this.timer=setInterval（Game.loop，20）；每隔20ms運行Game.loop方法，此方法內遍歷所有對象當前狀態(tài)并實行相應動作此塔防游戲中主要三種對象，怪物（敵人），防御塔，防御塔發(fā)射的子彈。

html5游戲開發(fā)充滿著誘人的東西，它是游戲開發(fā)的方向，隨著今后html5的不斷完善，最終將取代本地代碼編寫的游戲。 [科]

【參考文獻】

[1]羅超理，李萬紅.管理信息系統(tǒng)原理與應用.清華大學出版社，2002.

[2]艾德才.計算機信息管理基礎.中國水利水電出版社，2001.

[3]趙韶平，徐茂生.PowerDesigner系統(tǒng)分析與建模（第二版）.清華大學出版社，2010.

[4]Peter Lubbers，Brian Albers.HTML5高級程序設計.人民郵電出版社，2010.

[5]薩師煊，王珊.數(shù)據(jù)庫系統(tǒng)概論.高等教育出版社，2000.

[6]Jeanine Meyer.HTML5游戲開發(fā).人民郵電出版社，2011.

[7]Michael J.Hernandez.Database Design for Mere Mortals.中國電力出版社，2003.

[8]Eric Freeman，Elisabeth Robson.Head First HTML 5 Programming.中國電力出版社，2012.

[9]Michael Bowers.精通CSS與HTML設計模式.人民郵電出版社，2008.

[10]斯蒂夫.麥克康奈爾.快速軟件開發(fā).電子工業(yè)出版社，2001.