基与HTML5的塔防游戏设计与实现.doc

《基与HTML5的塔防游戏设计与实现.doc》由会员分享，可在线阅读，更多相关《基与HTML5的塔防游戏设计与实现.doc（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、本科论文目 录摘 要IAbstractII引 言11 项目背景与相关技术31.1 背景与发展简介31.2 HTML5技术及其优势41.3 JavaScript开发的优势与劣势41.4 CSS样式表在开发中的用处51.5 本章小结62 系统分析72.1 需求分析72.2 问题分析72.3 流程设计72.3 功能分析82.4 本章小结103 系统界面设计与优化113.1 技术支持113.2 初始数据设计113.3 炮台属性设计113.4 怪兽属性设计123.5 游戏初始设定133.6 游戏选项指令设定133.7 游戏失败设计143.8 本章小结144 系统实现154.1 功能实现效果154.1.1

2、 打开游戏界面154.1.2 放置建筑物154.1.3 升级建筑物164.1.4 游戏失败174.2 本章小结185 系统测试195.1 模块功能测试195.2 性能测试195.3 本章小结20结 论21致 谢22参考文献23附录 源程序清单25本科论文摘 要现如今，HTML5技术的飞速发展，同时也是带动了网页塔防游戏开发行业的飞快发展。本游戏是由个人开发和设计的基于最新HTML5技术的网页塔防游戏，是一款既简单又休闲有趣的益智塔防类的小游戏，主要是利用了最新HTML5的不同标签来设计和构造了主标题页面，使用了最新的CSS3样式标签来进行润饰页面，利用先进的Javascript脚本开发技术去设

3、计和实现网页游戏的主要操作逻辑和算法，采用这些最新的网络前端脚本开发技术，使得游戏运行时无需任何安装，用浏览器就是可以轻松打开，具有良好的安全性和用户网络游戏体验。随着现代网络自动化技术的发展，轻型的传统网页游戏也越来越多的受到了用户的广泛喜爱，而目前使用HTML5开发的轻型网页游戏已经不再服输于那些使用第三方插件进行开发的中小型传统网页游戏。本文主要的灵感是来源自大火的简易版保卫萝卜，笔者对游戏进行了大量的提炼以及简化，塔防游戏主要通过在塔防游戏的地图上装置特定的炮塔，阻止敌人进攻的策略型塔防游戏。本次的塔防游戏项目就是在塔防地图上的特定位置和地点可以装置多种防御能力不同的塔防炮台以及抵御多

4、种怪兽的攻击和入侵。同时在游戏中玩家每场的战斗将会都会拥有多种的道具可以让玩家的防守更加轻松。通过设计本次的塔防游戏项目对HTML5的网页游戏应用进行一个常用的标签和脚本的总结研究，通过学习如何使用这些标签和脚本来对于网页类塔防游戏应用在设计过程中时会有可能出现的一些问题和方法进行一个总结性的探究，根据已有的基础知识以及相关的参考文献进行找寻脚本以及更多的相关设计方面的基础知识。关键词：HTML5； JavaScript； 塔防游戏； CSSAbstractNowadays, the development of HTML5 technology also drives the rapid d

5、evelopment of the web game industry. The tower defense game based on HTML5 technology designed by this project is a casual puzzle game.It mainly uses the different tags of HTML5 to construct the main page, uses the CSS3 style to retouch the page, and uses JavaScript to realize the main logical algor

6、ithm of the game. Using the latest front-end technology, the game can be opened directly with the browser without installing plug-ins, and users have a good game experience.With the development of Web Technology, light web games are becoming more and more popular with users. Web Games developed usin

7、g HTML5 are no less than traditional web games developed using third party plugins. And because of its small size, there have been a lot of simple version of web games. This article is mainly to introduce one of the tower defense game . The developers inspiration is from the source of fire defense r

8、adish. The developers refined the simplicity and designed a simple version of the guardian radish based on it. Tower defense game mainly represents a kind of strategy game that prevents the enemy from attacking by installing turrets on the game map. This game is a map of specific locations in the in

9、stallation of multiple capabilities of the battery to resist the invasion of a variety of different monsters, and players will have a different building for each battle to defend.The purpose of the developer is to design this project through the HTML5 application of a common tag and script to resear

10、ch and application, and to summarize and explore the problems in web game design through tags, and to find more relevant knowledge based on existing knowledge and references.Keywords: HTML5; JavaScript; tower defense game; CSS引 言进入新的时代，HTML5正在成为引领新的时代游戏发展的新一个潮流，随之而来的也必然带动了互联网游戏开发行业的繁荣和飞速发展1。与传统客户端高设

11、备开发速度要求网游的开发相比，网页游戏的研发实现难度和成本相对较低2，设计产品研发和市场经营过程所需要前期投入的大量资金和成本相对较低，研发的周期也相对较短，游戏产品上线之后需要资金回笼的速度较快，使得传统的企业游戏平台可快速的运行，这些优势的组合令得网页企业游戏一直以来备受广大游戏玩家和开发商的喜爱，长期保持着高速的增长。本项目将真正的将HTML5游戏的设计核心展现出来，抛去以往其他游戏的华而不实，以最基本的操作来展现塔防游戏的精髓。开发时参考一款经典的塔防游戏保卫萝卜进行大致界面设计，抛去界面复杂的UI设计，只采用最基本的设计，通过使用不同的样式来渲染不同角色，让用户的使用体验尽量在不增加

12、开发者工作量的情况下达到最佳3。本次系统设计主要采用的就是JavaScript脚本开发，主要是因为随着JavaScript的出现，web编程的兴起，web的编程技术也因此得到了它的飞速发展。常用的JavaScript脚本语言就是一种基于对象和事件驱动的用于进行客户端和web编程开发的交互式脚本语言，使用这种语言能够给设计者本身静止的页面添加动画效果，代替了原先使用第三方插件生成的动画效果。在本次操作系统中主要使用的JavaScript在客户端HTML的文档中主要实现的就是通过编写了客户端网页脚本的代码，从而可以代替第三方的插件从而实现了客户端和web编程中网页内容的动态变化。当一个用户在网页浏

13、览器中自动打开一个项目的网页时，浏览器就是会自动执行该项目网页内嵌用户事先设计好的的一个JavaScript脚本代码，用户就是可以直接通过交互式的行为来自动更改客户端网页的内容和网页外观，这也就是实现了仅用客户端的HTML和CSS技术就实现的网页动态效果。而本文主要是为了向用户介绍本系统，从需求分析到运行测试一系列的操作，使用户能够更加清晰了解具体的操作，通过文字说明解释，让用户了解各种技术的使用背景，通过需求分析来向用户展示系统开发的目的，通过核心代码的解释说明来向用户展示HTML5游戏的核心实现技术，最后再加以图片更加直观让用户了解当前系统的运行实现效果。本文第一章主要介绍网络大环境下HT

14、ML5主要技术发展背景，包括JavaScript和CSS等技术的发展及优点。第二章主要介绍项目的分析过程，包括需求分析和设计的理念及规则，用流程图来结合描述，展示玩家与开发者各自所能实现的功能点，结合用例图进行描述。第三章就是对系统具体实现代码进行详细的解释说明，向用户展示核心技术，通过文字说明、代码和运行抓图相结合的方式让用户更加直观的理解核心技术点。第四章主要是向用户展示项目的整体运行效果。第五章系统测试是对一个项目整体性能系统进行的一个整体综合测试，包括各个系统功能模块的测试以及整体性能的测试。1 项目背景与相关技术1.1 背景与发展简介HTML5作为HTML的最新标准，增添了类似新多媒

15、体(video、audio)、新表单(keygen、output)、画布(canvas)等此类新鲜元素4，对网页提供更好的页面结构，同时它也有很多新的优点，其中比较重要的一点是具有强大的图形和跨平台特性。HTML5增加了很多新的元素5，其中包括与Web游戏设计紧密相关的Canvas元素。尽管Canvas元素在各个类型的跨平台浏览器中的运行性能都有所很大的差异，不过总的来说，Canvas的应用程序运行编码速度还是很快的。HTML5是基于HTML语言的进化过程中的其中一个开发版本，也被广泛认为是适用于下一代移动网页游戏开发的基础语言，它为开发者提供了一系列新的技术元素和新的功能特性，这也让越来越多

16、的游戏开发人员对游戏进入了研究。目前各大主流的智能移动浏览器都已经全面的兼容了HTML5，智能移动浏览器平台和移动互联网的普及和兴起，让下一代HTML5应用更惹人喜爱和关注。而随着HTML5的迅速普及和发展，带动了互联网游戏浏览器产业的迅速崛起。例如磊友网络科技最新推出的修仙三国6，推出当日便已经迎来982位活跃注册玩家，付费率8.3%，这使得很多开发者针对这一现象进行了大范围的研究，国内的HTML5光景一片大好，众多之前沉迷于开发插件游戏的开发者逐渐开始思考是否真的一味的使用插件就会开发出真正适合玩家的游戏。HTML5在网页游戏领域的取得的重大突破，是在新推出的HTML5标签和和开发者不断研

17、究完善后使用js脚本进行编码。在国外HTML5市场经过5年的长期发展之后，早进入理性的状态，不是炒作概念或者单纯的市场宣讲活动，甚至关注度出现了下降，已经变成了在web技术各个独立领域深度探索和创新7。国内传统基于flash网页游戏流行的原因，是flash支持视频播放、音频播放与录制等。如今，HTML5新引入的Canvas标签同样具备了游戏开发的条件8。HTML5游戏也迎来了真正的发展高潮，越来越多的开发者加入了开发HTML5游戏的行列，越来越多的大型游戏公司也开始和这些开发者进行合作，国内的发展也开始由这些先行者们领头进入了迅速发展崛起的时代。1.2 HTML5技术及其优势HTML5游戏即点

18、即玩的特性非常适合轻度游戏的发展9，随着玩家日渐苛刻的要求，对于开发者的要求也越来越高，开发者们也开始进行更加深层次的研究，HTML5游戏就此也迎来了真正的春天。已故的乔布斯大神曾经这样说过：“没有人愿意使用Flash，全世界已经开始步入了一个名为H5的时代10。”其实，HTML5的Canvas标签是允许设计者进行设计实现很多不同样式和作用的交互动画，和以往人们用Flash动画设计实现生成的效果一样，这样就使用户不用提前安装其他的第三方插件来进行游戏，也避免了出现大多数网页玩家所反映的插件不兼容等等问题。与其他不同的高技术型开发的游戏相比，基于HTML5的标签开发的游戏有三点主要的优势：一是相

19、关技术免费开放、规范且容易推广，设计者在设计的时候不需要有偿的去获取自己想要的资料，使得HTML5的开发更加的开放化，不为单个公司所有或控制11；二是开发者不需要安装其他插件，这样从根本上减少了用户在操作时的会产生的麻烦，也提高了安全性，使用插件总是会导致某些病毒的潜在攻击，是众多游戏开发者的优先选择12；三是HTML5覆盖面广，能够在任何系统上进行操作，不存在兼容性异常的情况，无论是安卓系统还是ios系统都能够很好的实现设计者想要展示的效果，不会因为使用者运行环境的影响而受到影响。1.3 JavaScript开发的优势与劣势Javascript作为一种脚本语言与python，shell等脚本

20、语言类似，不需要编译运行，有自己的基本数据类型，语法结构，算术和比较运算符，在帮助用户处理数据和文件实际应用中，提供了四种基本的数据类型，同时利用变量存放信息，采用表达式来完成功能复杂的操作13。目前总结出来的JavaScript的优劣势已经十分明显了，有以下几个优势：JavaScript的优势：（1）快速的终端反应：Java脚本在客户端进行编写，不需要服务器端提供支持就可以运行，提高速度优势14。在用户电脑上直接作为脚本执行测试，几乎是立即就可以完成的。相比起其它开发脚本更加容易学习和实现。它只需利用DOM模型，提供大量的代码，就可以开发出一个用户需要的脚本15。（2）用途广泛：目前Java

21、Script和其他大部分语言都可以很好的进行交互，并且被广泛应用于各个领域。现在，有很多的方法可以使用JavaScript，不拘泥于某一种固定的使用途径，使得其更加灵活方便，成为开发者青睐的一种脚本开发。JavaScript的劣势：（1）安全性：任何一种开发都不可能是绝对安全的，同样JavaScript被显示添加到用户的浏览器，它就有可以会利用客户系统，人为有可能会察觉不到，导致信息泄露16。（2）浏览器支持：不同的引擎对Javascript也会有不同的渲染结果17，因为不同的功能和接口之前是存在差别的。如果关闭引擎，那么依赖于浏览器支持的脚本也会被关闭，整个JavaScript代码就不会继续

22、运行了。1.4 CSS样式表在开发中的用处样式表CSS的英文全程为Cascading Style Sheets，又可翻译为层叠式样式表18，通过CSS样式表的定义，可以很简单地定义一个整体网页的样式包括定位显示、字体以及各种格式显示大小、元素定位和超链接的各种样式。既能大大减少网页开发者在导航栏书写的代码和工作量，又甚至能够大大增强导航栏设计的效果，使得设计的页面也更灵活多变。通常的情况下，CSS脚本文件可以直接嵌入到自己的HTML的脚本页面中，但是一般程序开发者常用的一种做法是首先生成一个文件后缀为.css的脚本文件，然后通过自己的HTML调用该.css的脚本文件,一般的方法为19。在结构上

23、有以下几点的优势：(1)设计手段灵活：通过调用CSS样式表可实现效果与设计分离，网站建设形式更为灵活。开发者可以将页面单独进行CSS设计，标明文字显示调用得当即可展示效果20；(2)布局更规范、代码更清晰易懂：当网页的某一部分需要改动时，维护人员只需要找到该模块所对应的CSS样式表就可以进行修改，便捷而且不会出现错误修改其他正常部分； (3)具备控制排版能力：开发者可以直接通过CSS样式表修改结构框架的定位21，只要提前规划好各个模块的位置便可以直接编写样式，从而更加便利的解决在传统html中经常会出现元素错位的情况。CSS样式表在布局页面样式时，又有几种常见的布局方式22：（1）float布

24、局，这种布局方式的兼容性比较好；（2）absolute布局，该布局简单直接，兼容性好；（3）flex布局，布局简单、灵活，移动端友好，但IE8以下不兼容；（4）table布局，兼容性好，有时候布局相对简单，但是它是对Table标签的不正规使用，一直以来被大家所诟病。当需要内容高度不一致时并不适应。CSS样式表又分为三种不同的使用样式：（1）简单的一种行内其他元素类型样式：主要缺点：行内元素样式没有很大的资源可用和复用性，仅仅能作用于当前的一个行内其他元素；主要优点：这种行内元素样式具体写法比较简单，适用范围广，使用优先极高；（2）内部的内容样式：主要缺点：内部内容页面间不能相互交换复用；主要优

25、点：基本上已经实现了内部内容样式相互复用。复用的复杂程度不高但也不能在多个使用页面之间复制使用；（3）外部样式：缺点：编辑时需要频繁切换；优点：HTML和CSS完全分离，CSS得到最大程度复用。三种外部属性样式之间又因为不同的类型和特性有着不同的优先级一般的情况下可以采用就近的原则23，在正常的设计中引用样式下优先级的顺序一般为：行内属性样式内部属性样式外部属性样式。本次样式设计中因为采用的是并不复杂的样式设计，所以直接选择采用外部属性样式直接调用的方法来为开发者编写CSS外部属性样式，也很好的避免了开发者在进行样式开发的过程和设计中的各种混淆。1.5 本章小结本章主要描述网络大环境下HTML

26、5主要技术发展背景，国内外目前的发展趋势，也在本章详细介绍了本项目使用到的包括JavaScript和CSS等技术各自的发展背景及其优点。2 系统分析2.1 需求分析随着网络科技的发展，人们也在追求更加更富有娱乐性的小游戏，在这种大环境下，现在已经大火的网页游戏HTML5游戏更是以其独特的游戏跨平台性和游戏轻量性优势获得了很好的用户和游戏体验1，已经迅速的成为了近些年来互联网游戏开发行业最热门的网页游戏关键词之一。在目前这种市场需求下，本项目应运而生，目的就是为了满足玩家既不想让游戏占据过大内存又想要进行富有乐趣的游戏的需求。本款游戏将实现如下功能：防御塔的创建、售卖、攻击；怪兽的攻击、移动；合

27、理的金币获得设计、获取量设计；道具的设计，仿照保卫萝卜的游戏理念，简化游戏中的图形，着重突出其运行的基本规则，同时进行HTML5中标签和JavaScript脚本编写的实践测试，比较发现JavaScript脚本与Python语言开发的不同之处，并从实际开发中体验到明显差异24。2.2 问题分析大部分的网路游戏使用的都是安装Flash插件来进行游戏动画效果的实现，但对于环境要求十分严格，更要求服务器的承受能力优越，对于一些小成本游戏显然不划算，所以在设计之初便设想使用技术来代替插件的使用、在分析需求之后，在整个设计过程主要围绕以下两个问题解决：（1）解决不使用第三方插件问题：以前的第三方插件都是专

28、用插件，而非公共标准，安装这些插件，往往会限制在一个特定的范围内构建游戏，只能在Web浏览器的方框中玩Flash游戏，所以这次的设计决定采用常见的简单算法来进行动作设计，避免使用插件；（2）解决画面跳转卡顿，动作衔接不流畅问题：为了用户的使用体验良好，本次设计过程中为解决该卡顿不流畅问题打算进行一个细致的设计，减少跳转链接的使用，尽可能采用js固有的算法模块进行设计动作和画面背景，简化人物动作，使画面简单化。2.3 流程设计游戏为简化流程避免造成卡顿等不良好的游戏体验，故而将流程简化，用户打开界面即开始游戏，玩家根据初始金币数选择炮台进行摆放，放置有效攻击建筑后怪兽开始按照预先系统设计的轨迹开

29、始行动，击杀怪兽获得金币继而购买更高级的炮台，持续游戏直至玩家生命值为0。设计整体流程图如图2.1所示。图2.1 游戏流程图2.3 功能分析本次系统主要设计的是一款塔防策略型游戏，主要实现的大功能点有以下几个：玩家放置建筑、释放怪物使其按照轨迹行动、建筑物进行攻击和建筑物升级或出售。开发者与玩家可使用的功能不同。目前项目暂时开放的玩家功能有限，为了简化玩家进行游戏时的操作步骤，设置了如下几个功能，玩家用户可以选择开始游戏、选择建筑物并放置于地图中某一位置、升级建筑物、出售建筑物、暂停、继续或者重新开始游戏，玩家的用例图如图2.2所示：图2.2 玩家用例图开发者是可以通过更改后台数据来更改游戏数

30、据，比如游戏初始金钱数和生命值、怪物的属性包括攻击力和移动速度以及移动的轨迹、建筑物的属性包括攻击力、攻击速度和攻击范围、建筑物升级所需的金钱数、出售建筑物的收入以及游戏地图的设计，用例图如2.3所示：图2.3 开发者用例图同时本系统设计保有一定的可拓展性与可维护性。由于系统处理能力的需求不是一成不变的，随着功能的不断拓展，对系统处理能力的要求也会越来越高。而本项目的可拓展性就是在日后数据的不断更新中，为开发者留有一定升级数据的空间，可以根据将来的变化进行实时的更新与升级。维护管理是指为了保证维护质量、提高维护效率、控制维护成本而进行的维护过程管理，要求对项目的每次“修改”均需经过申请、评估、

31、批准、实施、验证等步骤。维护的核心是维护评估和维护验证。而针对本游戏的可维护性就是指在日后一旦出现某一些玩家无法克服的问题那么这时候就需要后台人员对该系统进行一个定时定期的维护以保证用户良好的使用体验。2.4 本章小结本章主要介绍了关于系统的需求分析以及用例分析，结合图示进行分别介绍，对系统中的不同角色也就是玩家与开发者可以使用的不同功能点进行分析介绍，同时介绍了系统保有的可拓展性和可维护性。3 系统界面设计与优化3.1 技术支持初步设计游戏考虑到技术支持方面的问题，有些浏览器可能会出现不兼容的问题，为了减少开发者前期设计框架的麻烦，故而游戏目前只支持在IE9和Chrome浏览器中进行13，使

32、用Canvas标签的属性提示用户当前浏览器不支持，其代码设计如下：HTML5 塔防游戏加载中.抱歉，您的浏览器不支持 HTML 5 Canvas 标签，请使用 IE9 / Chrome 等浏览器浏览本页以获得最佳效果。3.2 初始数据设计在游戏刚刚开始，为了使玩家有一定的基础储备能够进行第一轮的防守，玩家将会获得最初始设定的基础奖励，主要体现为系统给予玩家一定量足够购买建筑的金钱，也会显示玩家初始的生命值、当前怪物波数、当前积分和目前所在关卡的难度系数，这些开发者都可以在js脚本中可进行更改，目前暂定数据如表3.1所示：表3.1 初始游戏数据表名称含义设定数据difficulty难度系数1.0

33、wave怪物波数0max_wave生命100max_monsters_per_wave最大怪物波数100money金钱500score积分03.3 炮台属性设计炮台采用最基础的圆圈形状来渲染描绘建筑物和怪物的形状，通过声明不同变量来设定不同建筑物的属性，通过更改不同的变量来实现不同的难度设定，同时也为后期开发者修改数据提供便利，用变量的形式也使得各种元素清晰可见，例如攻击力、攻击范围、子弹发射速度和建造所花费的金钱数等等，如表3.2中所示：表3.2 炮台属性表名称攻击力初级攻击范围最大攻击范围攻击速度子弹发射速度建造金额cannon104826300LMG351036100HMG3035358

34、00laser_gun256102002000若炮台被放置在界面中，通过定义并调用不同属性变量例如is_selected、level等来显示当前已放置建筑属性，比如level变量声明的是当前等级，killed声明的是当前击杀怪物的数量等等其他变量，当鼠标放置在建筑物上时显示当前属性。3.4 怪兽属性设计在脚本td-cfg-monsters中定义怪兽不同的级别以及它们分别的属性，设定其初始生命值以及攻击力，通过defaultMonsterRender函数来渲染怪物的默认属性，包括显示怪物的名称、移动速度生命值和攻击力等等，通过设置不同的数值来实现区分不同的怪物，是游戏更加的具有娱乐性，增加玩家参

35、与感，具体的设计如表3.3所示，以中等怪物为例：表3.3 怪物属性表名称含义设定数据name名称monster 2speed移动速度6max_speed最快移动速度20life怪物生命值50damage攻击力5score积分0前十波的怪物设定为开发者设计，由于每个玩家的游戏进程不定所以后续怪物设计不再使用人为设定，均由系统设定自动生成，开发者设定好既定算法进行有规律生成，同时也会根据玩家游戏的进程来自动更改游戏难度，增加娱乐性，具体设计代码如下：newWave: function (cfg) cfg = cfg | ;var map = cfg.map,wave = cfg.wave | 1,

36、/difficulty = TD.difficulty | 1.0,wave_damage = TD.wave_damage | 0;if (wave = 1) /pass else if (wave_damage = 0) if (wave 20) TD.difficulty *= 1.05; else if (TD.difficulty 10) TD.difficulty *= 1.1; else TD.difficulty *= 1.2; else if (TD.wave_damage = 20) TD.difficulty *= 0.8; else if (TD.wave_damage

37、 = 10) TD.difficulty *= 0.9; else if (wave = 10)TD.difficulty *= 1.05;TD.log(wave + wave + , last wave damage = + wave_damage + , difficulty = + TD.difficulty);3.5 游戏初始设定设计游戏的是当用户打开网页的时候就启动，为了避免出现玩家未及时操作导致游戏还未开始就宣告失败，故设计使用算法系统自动检查地图中是否有武器（具备攻击性的建筑）13。调用has_weapon函数来检测当前地图是否有攻击性武器，如果有则启动出动第一波怪物，具体算法如

38、下设计：checkHasWeapon: function () this.has_weapon = (this.anyBuilding(function (obj) return obj.is_weapon;) != null);,3.6 游戏选项指令设定本游戏并未设置结束游戏按钮，只设定暂停、继续与重新开始14，用户可选择关闭窗口来结束游戏，通过定义button按钮的不同函数调用来读取用户当前动作，使用如下算法设计选项：this.btn_pause = new TD.Button(panel-btn-pause, scene: this.scene,x: this.x,y: this.y +

39、 260,text: TD._t(button_pause_text),/desc: TD._t(button_pause_desc_0),step_level: this.step_level,render_level: this.render_level + 1,onClick: function () if (this.scene.state = 1) this.scene.pause();this.text = TD._t(button_continue_text);this.scene.panel.btn_upgrade.hide();this.scene.panel.btn_sel

40、l.hide();/this.desc = TD._t(button_pause_desc_1); else if (this.scene.state = 2) this.scene.start();this.text = TD._t(button_pause_text);this.scene.panel.btn_restart.hide();if (this.scene.map.selected_building) this.scene.panel.btn_upgrade.show();this.scene.panel.btn_sell.show();/this.desc = TD._t(b

41、utton_pause_desc_0););3.7 游戏失败设计当怪兽抵御住炮台的攻击并脱离攻击范围后将到达终点，当终点生命值耗尽时则游戏失败，界面将显示“GAME OVER”的字提示用户，定义ctx字段来检测当前游戏进程，当满足变量条件时提示游戏失败，具体设计如下：var ctx = TD.ctx;ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #ccc;ctx.font = bold 62px Verdana;ctx.beginPath();ctx.fillText(GAME OVER, this.width

42、 / 2, this.height / 2);3.8 本章小结本章主要对系统的功能点设计进行分模块介绍，介绍了功能实现的具体方法，通过代码介绍将功能点实现的核心展现出来，通过项目抓图将预期实现的效果清晰的展示出来，让用户明确效果。4 系统实现4.1 功能实现效果4.1.1 打开游戏界面在玩家打开网页游戏界面的时候，游戏启动，显示当前初始设定数据，玩家根据初始的金钱来选择建筑物放在合适的位置进行游戏前的准备，当前状态设定为当玩家放置有攻击型建筑时才算真正开始游戏，初始界面如图4.1所示：图4.1 初始界面图4.1.2 放置建筑物当玩家选择并放置好第一个具备攻击力的建筑时，第一波怪兽来临，建筑会自

43、动识别怪兽来的方向，确定在攻击范围内就会自动发射炮弹。怪物也会根据之前系统中设置好的算法计算的特定轨迹进行移动，实现效果如图4.2所示：图4.2 放置建筑物在系统的设置中，玩家可以选择通过摆放不同的路障来将怪物的轨迹固定，由于设计中将路障设定为怪物不能通过，所以如果玩家大面积布置路障，就会产生类似保卫萝卜的效果，固定怪物的行动轨迹，也变相的相当于是一种减小难度的手段，也可以算是一种趣味玩法，具体实现效果如图4.3、4.4所示：图4.3 趣味玩法图4.4 游戏中4.1.3 升级建筑物当玩家拥有足够的金钱时玩家可以选择某一建筑升级，点击想要升级的建筑，会出现该建筑目前的属性，将鼠标放置在升级按钮上

44、就会显示升级当前建筑所需要的金钱，选择升级则该建筑升一级，随之属性增强，攻击范围增大，具体实现效果如图4.5、4.6所示：图4.5 游戏中升级建筑图4.6 升级成功4.1.4 游戏失败当玩家布置的建筑并未将所有怪物清除时，怪物将会移动到终点，终点将会减少一定量的生命值，当玩家生命值为零时，游戏结束，页面提示GAME OVER，这时玩家可以选择关闭游戏或者是重新开始，具体实现效果如图4.7所示：图4.7 游戏中怪兽属性图4.2 本章小结本章主要通过运行项目，获取界面截图的方式向用户展示各功能实现的效果，为用户详细介绍每一个功能点所能触发的事件效果，通过图文结合的方式更加直观的让用户了解整体的运行

45、效果。5 系统测试5.1 模块功能测试在整体设计完成之后，采用整体运行的方式对本次项目进行模块功能测试，通过完整运行并尝试各个模块功能是否正常，是否能够达到预期效果，并将数据记录下来，记录结果如表5.1：表5.1 项目功能测试用例表测试编号测试功能实现函数操作步骤期望结果实际结果1购买布置建筑building_type函数计算放置位置1：选择某一建筑2：将其放置于地图某位置建筑放置在固定位子建筑被放置在选定位置2怪物属性定义monster_attributes来改变怪物不同属性怪物出现时将鼠标放置在其身上显示设定属性显示当前选中怪物属性3建筑属性定义building_attributes设计建筑物属