HTML5英雄塔防

林越山

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

1.前言

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

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

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

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

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

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

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

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

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

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

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

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

2.1游戲內(nèi)容總體描述

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

2.2如何吸引玩家分析

此游戲以它獨有的簡單畫面，便捷操作，消滅大量怪物的快感，成功防守的成就感著稱?？梢詮娜齻€方面來吸引玩家：

（1）獨特的界面展示風(fēng)格。

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

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

3.游戲總體結(jié)構(gòu)設(shè)計

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

3.1游戲各功能模塊設(shè)計

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

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

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

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

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

3.2游戲規(guī)則

（1）總共20關(guān)。

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

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

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

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

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

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

【參考文獻(xiàn)】

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

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

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

[4]Peter Lubbers，Brian Albers.HTML5高級程序設(shè)計.人民郵電出版社，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設(shè)計模式.人民郵電出版社，2008.

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