基于Cocos的大富翁游戏设计与开发.doc

1、中 国 矿 业 大 学本 科 生 毕 业 设 计姓 名： 学 号： 学 院： 计算机科学与技术学院 专 业： 信息安全 设计题目： 基于 Cocos的大富翁游戏设计与开发 专 题： 指导教师： 职 称： 年 月 徐州摘 要随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式也开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是 HTML5 。HTML5 是近十年来 Web 标准最巨大的飞跃，和以前的版本不同，HTML5 并非仅仅用来表示 Web

2、 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图象和动画，以及同电脑的交互都被标准化。本文首先从整体上介绍了国内外 HTML5 技术的发展现状，然后讨论了 HTML5 及其相关开发技术的发展历程，分析了 HTML5 添加的最新功能及应用。在这些基础上设计开发了一款基于 HTML5 技术的单机版的“坦克大战”游戏应用，该游戏界面简洁，功能全面，运行流畅，操作简单易懂，主要功能模式包括单人对战和双人对战模式，实现了游戏的关卡难度设置、背景设置、声音设置、用户信息存储与管理等功能。本课题在开发过程中采用了EditPlus 这个功能强大的、可处理文本、HTML 和程序

3、语言的 32 位编辑器。本游戏参照 20 世纪 90 年代时期曾经开发出来用于在电视上运行的同款游戏而设计开发的，趣味性很强同时很有怀旧的氛围。关键词：HTML5；Canvas；JavaScript ；单机版游戏；坦克大战；AbstractWith the increasing development of the Internet technology and the constantly rising of the computer performance, users also begin to enjoy the Internet in the constantly changed w

4、ays. More and more application can be directly use in the way of opening the browser, data are stored in the clouds, and therefore its more safe and reliable and continent for users to share data. In the same time of various application continuously tends to be more webified, a new standard of techn

5、ology is produced, which is HTML5. HTML5 is the most giant leap of Web standards in nearly 10 years and it is different from the previous version.HTML5 is not only used to express the content of the Web, meanwhile, its mission is to bring the Web into a mature application platform, on which the vide

6、o, audio, image and animation, and the interaction of computers are all standardized. Based on the latest version of the hypertext markup language HTML5 and its related technologies are studied on the basis of overall first HTML5 technology development present situation at home and abroad are introd

7、uced, and then discusses the development course of HTML5 and its related development technologies, after development of several kinds of commonly used tools are introduced, and then analyzes the HTML5 adds new functions and applications, finally based on the developed an based on HTML5 to create a s

8、tandalone version of the “tanks war“ game, the game interface is concise, comprehensive functions, running smooth, simple operation, the main function models including single against and double mode, realized the game difficulty level setting, background setting, sound Settings, user information sto

9、rage and management, and other functions.This game reference period had developed in the 1990 s used to run on TV with game design and development, interest is very strong and has a nostalgic atmosphere.Keywords: HTML5; Canvas; JavaScript; stand-alone games;tank war;目 录1 绪论 .11.1 课题的目的和意义 .11.2 国内外发

10、展现状 .21.3 课题主要的内容和功能介绍 .31.3.1 课题主要的内容 31.3.2 坦克大战游戏功能介绍 31.4 相关技术简介 .41.4.1 HTML5 标准简述及意义 41.4.2 JavaScript 标准简述及意义 41.4.3 CSS 标准简述及意义 51.5 开发工具 .61.6 本文章节安排 .72 系统分析 .82.1 系统设计分析 .82.2 系统需求分析 .82.2.1 系统角色 82.2.2 需求分析 82.2.3 用例分析 93 系统概要设计 .113.1 系统总体功能设计 .113.1.1 程序功能模块分析 113.1.2 地图读取以及修改 113.1.3

11、游戏进行中的声音的控制分析 123.2 程序流程 .123.3 各模块及对应的功能 .144 系统详细设计 .164.1 数据管理模块设计 .164.2 地图功能模块 .174.2.1 读取地图 174.2.2 绘制地图 174.2.3 地图模块部分代码 204.3 坦克模块的设计 .214.3.1 读取数据管理模块信息 214.3.2 控制坦克 214.3.3 坦克模块的部分实现代码 224.4 炮弹模块的功能 .244.4.1 读取数据管理模块信息 244.4.2 控制炮弹飞行 254.4.3 炮弹模块的部分实现代码 254.5 声音控制模块 .284.6 系统奖励模块功能 .284.7

12、游戏中动画界面模块功能 .295 总结与展望 .325.1 总结 .325.2 展望 .32参考文献 .34翻译部分 .35英文原文 .35中文译文 .38致 谢 .41中国矿业大学本科生毕业设计（论文） 第 1 页1 绪论1.1 课题的目的和意义目前，随着互联网技术的高速不断发展，其作用和用途在人们的日常生活、学习、工作中也在越来越重要，同时也在不断地变化并且被持续的加强着。人们随着时间的流逝也已经逐渐地开始使用互联网及其附属功能所带来的各项便利服务与应用，并且随时随地都在不自觉地享受着它给我们生活以及工作、学习等带来的好处和方便。当然，随着互联网基础用户和相关开发者的不断增多和底层平民化，

13、人们完善和创造其功能和服务的脚步也随之越来越快。对于整个互联网以及软件行业来说，无论是从其所具有的商业层面还是从其开发所需要的技术层面上来讲，由于新的开发设计的方法和模式的不断推陈出新，伴随而来的就是其新陈代谢速度的不断加快，不断有公司都尝试挑战着与其相关的新的模式和新的技术。凭借着整个行业创业成本低、技术门槛高等特点，许多大型的网络软件公司也都在不断地开发同时促进着新技术和新模式的产生，他们正是基于这个优势来垄断着一定的技术革新，同时也基于此又重新创建出全新的开发技术和服务应用。然而，毕竟整个互联网产业是一个相对开放性的平台，在开发、经营的过程中，大家应该在一个共同被认可的标准模式下进行相关

14、的操作，这样就避免了垄断性的、一家独大式的竞争模式的出现和产生，同时也避免了开发标准多样化、开发结构复杂化和开发路径偏激化等各种问题，就如同需要像秦始皇统一六国后制定出的车同轨、书同文等措施，正是基于此，HTML5 应运而生，而这种更加符合大多数开发者需求的新的标准和技术体系在其不断地革新中也在不断地发展、壮大。 有人说过，HTML5 的产生是Web 标准史上最大的跨度和飞跃。同以前所有的HTML版本所不同的是，HTML5并非仅仅只是用来表示Web 的内容，从它被制定出来的那一刻起，它就被赋予了将Web 带入一个更加成熟的应用以及开发平台中的使命和责任。在这个巨大的平台上，图象、音频、视频和动

15、画，以及它们同电脑的交互方式都将被标准化。从目前看来，尽管离HTML5 的实现还有很长很长的一段距离，但不可否认的是，HTML5 将改变并且正在改变着 Web 的某些方面。另外，目前人们所了解的互联网已经不仅仅是传统意义和规模上的互联网，它使所有过去出现的模式和应用都在向着更加便捷和移动的方向上不断地发展和壮大着，人们在日常生活中可能会通过平板电脑、智能手机等各种各样的移动设备来获取所需要的信息，并且能够使用更加丰富的功能，比如物理位置定位信息等这种新型的数据采集和重力感应、多点触控等新型的交互式的快捷应用，我们可以看到，这必将会改变而且已经在改变着人们生产、生活中的方方面面 1。与此同时，在

16、HTML5 中目前已经加入了上面所提到的各项新的功能和元素。更令人欣慰的是在这其中也开始并且已经考虑到非健全人士在使用互联网时可能会遇到或者带来的问题。所以，研究并应用HTML5 这种新型技术体系并借助于它来尝试做一些相关产品和应用更是一个造福人类社会以及子孙后代的好事，而且能够在这个高速发展的时代敏锐地抓住这中国矿业大学本科生毕业设计（论文） 第 2 页个机会并使用类似的技术来创造、实施更多新的、便捷的应用，这本身就充满了无穷的乐趣。本课题正是基于HTML5 的游戏开发。相对于其他应用来说，游戏有着它无可匹敌和替代的作用，其有着很强的互动性，可以直接在网页中运行，同时还能给人们以放松，也可以

17、充当一种交流的方式，所以它能够更加容易地融入人们的日常生活中，借此便可推广其中的HTML5 的相关功能。本课题是在该项技术的基础上实现了一款单机版的坦克大战，这无疑是一次实践和学习的机会，同时也是对自己相关能力的一次考验和历练。1.2 国内外发展现状相对于HTML5 刚被制定出来时候的无人问津，如今，业内人士对其的讨论可谓是喋喋不休，乐此不疲，而HTML5 也从一个几乎被遗弃的角落走到了舞台中央。在2012 年的时候，HTML5 曾经被开发者尝试使用于不同的领域之内，那时就有人评价说2012 年的HTML5 的发展远员未达到预期的目标。对于所有的软件工程师来说，电脑端和手机端HTML5 的开发

18、过程是很不一样的。它们两个之间的混合应用不能依赖移动浏览器、不同移动设备之间进行适配等这些问题在开发设计过程中都需要有效的解决方式。而对于用户来说，人们已经习惯了被动式的去下载、更新某些需要使用的软件或其他应用，用户本能的反应就是通过应用商店去搜索应用。可是目前在这项领域占主导地位的苹果和谷歌的应用商店迄今为止还从没上线、发布过一款HTML5 相关站点的应用。这些问题都导致HTML5 的用户推广过程存在相当大的阻力和无奈 2。前不久，据移动应用开发公司Kendo 的调查数据显示：目前仍有94%的软件工程师看好HTML5 未来的发展优势，而这在某种程度上表明了有大批的技术流开发工程师正在进入HT

19、ML5 的开发队伍中来。尽管如此，当务之急还是需要一个在世界范围内有巨大影响力、号召力和权威性的大公司参与到对其的推广工作中来。近日，微软和三叶草发布了国内一些少数的采用HTML5 和流行的 Parallax 视觉差效果的体验网站，虽然这些网店在视觉和动态体验上还说不上特别华丽，但是这种商业型性质的HTML5 体验在国内还是相当罕见和新奇的，这个举动反映出了微软公司希望通过新版的IE9 甚至是IE10 来推动国内新标准应用和开发的决心，而相较于国内复杂多变的网络环境，这方面的实现还有很长一段路要走。当然，国内也有比较成熟的HTML5 相关应用的例子。拿一款比较成熟的完全用HTML5 开发的门户

20、新闻网站举例，手机搜狐概念版，它的开发算国内比较早的，其产品在2012 年底就已上线，到目前为止，它的优势在用户中已经完全体现出来了，它可以让用户彻底摆脱下载、安装、更新时的困扰和烦恼，同时又继承了用户在浏览网页新闻时的app模式，显然，门户网站这类应用是一款完全贴合HTML5 实际开发过程和标准的WebApp 产品。尽管如此，相对于国外酷炫体验的HTML5 网站遍地开花的情况来说，无论是从个人的创意发挥上说，还是从大公司的市场营销活动中看，他们都充分利用HTML5 的方式呈现而不是传统的Flash 插件，而反观国内，情况就是那么的理想，当然原因也是显而易见的：（1）目前，国内大部分的用户在网

21、络平台中还是比较偏好使用传统意义上的浏览器，而这些浏览器恰恰都没有很好的支持HTML5、CSS3 等这些最新的技术应用，这就导致大多中国矿业大学本科生毕业设计（论文） 第 3 页数开发商不得不采用比较保守的开发策略和技术。（2）目前，国内在这方面的前端设计开发人员和团队没有形成一定的规模。首先，虽然HTML、CSS 这些技术看起来并不是很复杂，但是要深入并能够熟练地将其应用还是一个很大的挑战，而在开发过程中还要顾及到各种浏览器的差别、向下兼容的测试等等，这些问题都会出现，甚至让人望而生畏，基于种种原因都导致了很多开发人员不愿意从事有关的开发；然后，由于HTML5 前端发展速度特别快，要求开发人

22、员在进行开发的同时能够不断地吸收新的相关研究成果，而且如果想要在开发过程中具有特别创意的表现，就需要对HTML、CSS 和JS 等相关能够利用的有效模块进行重新编写新的代码，加之于不同项目之间很少有能够重复利用的地方，这就导致在前端开发过程中很难对已有大量模块、代码等进行重复利用，增加的工作量和开发难度，另外，目前专门用于HTML5 的开发调试环境还不是很完整，这些也都导致开发人员很难对其进行深度开发。（3）很多相关的商业机构和公司的决策层对HTML5 这项新的技术并不是很了解，一方面的原因是由于国内还没有已经成熟的参考案例，另一方面也是由于很多广告公司或者Marketing 策划团队没有能够

23、很好的用于展示HTML5 的创意方案，这也导致了市场与决策层之间的信息交流出现断层。（4）因为HTML5 本身就还存在很多问题，它的不完善也导致了很多开发商的观望、犹豫。综上所述，目前国内的HTML5 开发还处于一个很混沌的状态，想要令其焕发活力恐怕只有靠巨头们的牵引了。不过，相信随着支持Webkit内核的浏览器，比如Midori 和搜狗浏览器的推广使用，HTML5会越来越普及，并成为能够改变移动互联网模式的重要力量和成员。1.3 课题主要的内容和功能介绍1.3.1 课题主要的内容课题的主要内容是使用最新的HTML5和CSS3标准来构建各种常见类型的游戏，实现游戏的关卡难度设置、背景设置、声音

24、设置、用户信息存储与管理。1.3.2 坦克大战游戏功能介绍用户在启动支持HTML5的浏览器后，输入有效地址或者点击相关链接即可进入坦克大战游戏界面。游戏分两种模式：单人模式和双人模式。游戏主要功能包括：（1）玩家必须通过键盘或者有效的游戏手柄来间接地控制自己的坦克，以消灭系统自行分配和出现的坦克为目标，同时又必须保护好自己的大本营。游戏中一旦被敌方坦克击中，就算死亡，相应的己方复活次数减一，直至为零或己方大本营被攻破。（2）游戏中出现的地图可以在服务端通过修改地图相关的数组来改变地图中各种通道的走向以及障碍物的分布情况。中国矿业大学本科生毕业设计（论文） 第 4 页1.4 相关技术简介1.4.

25、1 HTML5 标准简述及意义HTML5 是HTML 众多版本中继 HTML4 之后又一个主要修订版本，目前其进度仍然处于完善和发展阶段。制定它的初衷是用来取代W3C 于1999 年所制定出的XHTML 1.0 和HTML 4.01 标准，以期能在基于互联网相关应用及开发快速发展的时候，使得网络规范的标准尽快达到符合当代的网络需求的地步。广义的HTML5 实际上指的是包括HTML、JavaScript 和CSS 三项技术在内的一整套技术组合。通过在开发过程中使用HTML5 及其相关技术，能够减少浏览器对于插件的RIA的需求，同时能够研发并增添更多的增强网络应用的相关标准集。HTML5 在继承了

26、上一个版本全部功能的同时还增加了部分新的语法特征，这其中就包括、和标签（，和标签均为HTML5 中的新标记） ，同时还 集成了矢量图形实现方式（SVG）的相关内容。增加这些元素的目的是为了在网页中能够更加容易的展现和插入多媒体和图片内容。除此之外，还增加了其它一些新的标签，比如 、和，其作用在于能够使网页中的相关数据内容得到更加全面的展示。而且一些增加新的属性标签也确实如上文所述，有着与其相同或相近的目的。自然，在增加一些东西的同时删除了一些标签和属性。一些元素比如、和都进行了重新定义或被修的更加标准化了。同时DOM 和APIs也都已经融入了HTML5中，并作为它的基础部分进行使用。HTML5

27、 还增加了一些新的、多样化的API（1）Canvas API：能够动态生成和展示图形、图标、图像以及动画。（2）音频与视频：开发人员不必使用插件就能播放音频和视频。对于这两个元素，HTML5 规范提供了通用、完整、可脚本化控制的API。(3) 通信网络Communication API：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与XMLHttpRequest Level2。（3）Geolocation API：用户在Web应用程序可共享其地理位置，使其能够享受位置感知服务。（4）Communication API：

28、构建实时（real-time）跨源（cross-origin）通信的两个重要模块：XMLHttpRequest Level2 与跨文档消息通信（ Cross Document Messaging） 。（5）WebSockets API：定义了一个全双工通信信道，仅通过Web上的一个Socket 即可进行通信。（6）Web Workers API：令Web 应用程序具备后台处理能力。（7）离线Web 应用API：控制缓存资源的加载等。1.4.2 JavaScript 标准简述及意义1992年有一家被作Nombas的公司曾经自主开发了一种命名为Cmm（C-minus-minus）的嵌入式脚本语言。

29、后来这个脚本语言被捆绑在一个叫做CEnvi 的共享软件产品中，该软件也中国矿业大学本科生毕业设计（论文） 第 5 页首次向人们展示了这种语言的威力。之后，Nombas把Cmm的名字改成了ScriptEase。后来在Netscape Navigator刚刚出现于世之时， Nombas就为此开发出了一个可以用来嵌入网页中的CEnvi的版本。而Nombas丝毫没有料到它的理论将会成为因特网的一块重要基石。后来，效力于Netscape的Brendan Eich，为即将在 1995年发行的Netscape Navigator 2.0开发了一个称之为LiveScript 的脚本语言，当时的目的是同时在浏览

30、器和服务器端使用它。Netscape与Sun 公司联手及时完成LiveScript 实现。就在 Netscape Navigator 2.0即将正式发布前，Netscape将其更名为JavaScript，目的是为了利用Java 这个因特网时髦词汇，从此JavaScript 变成了因特网的必备组件。因为JavaScript 1.0如此成功，Netscape在Netscape Navigator 3.0中发布了1.1版。恰巧那个时候，微软决定进军浏览器，发布了IE 3.0并搭载了一个JavaScript的克隆版，叫做JScript 。而微软步入Web浏览器领域的这一重大决定更是成为促进JavaSc

31、ript语言发展过程中的重要一步。1997年，JavaScript 1.1版本在被作为一个草案提交给了欧洲计算机制造商协会（ECMA） 。由此，第39 技术委员会（ TC39）就被委派来“标准化一个通用的、跨平台式的、中立于厂商的脚本语言的语法及其相关的语义” 。由来自Netscape、Sun 、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了 ECMA-262。该标准定义了叫做ECMAScript的全新脚本语言。自此之后，Web浏览器就开始努力（虽然有着不同程度的成功和失败）将ECMAScript作为JavaScript实现的基础。在没有JavaScript

32、 之前，互联网网页都是静态内容，就像一张张写满内容的纸，Netscape 公司为了丰富互联网功能，所以在Navigator 浏览器中扩展了JavaScript 支持，这样就大大扩展了互联网网页的功能，使得互联网网页可以拥有丰富多彩的动画和用户交互。直到现在，运行JavaScript 的主要环境依然是各种浏览器，因此通常会将JavaScript 嵌入互联网网页中，由浏览器负责解释执行。JavaScript 的主要功能是：动态修改HTML 的页面内容，包括创建、删除HTML的页面元素，修改HTML页面元素的内容、外观、位置、大小等。HTML5 的出现更是突出了 JavaScript 的重要性，例如

33、HTML5 绘图支持，页面上的绘图完全是由JavaScript 完成的。不仅如此，HTML5 新增的本地存储、离线应用、客户端通信等功能，更是大量使用了JavaScript 编程。1.4.3 CSS 标准简述及意义CSS全称为 Cascading Style Sheet，也就是所谓的级联样式单，它的另一个较为通用的称呼为层叠样式单。它能够使网页具有自己独特的风格，比如网页中相关字体的填充颜色、大小，以及在网页中相关事件的布局定位等。在Web的开发设计过程中，如果使用CSS了，将会让原本显得乏味单调的网页更加多彩多姿。在HTML5 的规范标准中，也明确表示把网页的外观设计交给CSS去管理。为此，

34、HTML5 删除了原本语言中专门用来进行外观设计的一些专有标签，比如、和等。CSS自 1996年年底面世以来，已经走过了十几年的历史。到目前为止，几乎所有的浏览中国矿业大学本科生毕业设计（论文） 第 6 页器都已对CSS提供了很好的支持。相较于传统上 HTML的表现形式而言，CSS 能够控制网页中的相关事件进行位置排版和布局定位，能够针对网页对象和模型样式进行编辑，并能够进行初步交互设计。CSS可以根据使用者各自的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。下面简单介绍一下CSS的发展历史。CSS 1.0：作为一项W3C 推荐， 1996年12月17日，CSS 1.0作为第一个正

35、式规范面世，其中已经加入了字体、颜色等相关属性。1999年1月11日，此推荐被重新修订。CSS 2.0：作为一项W3C推荐，1998年5月12日，CSS 2.0规范正式推出。这个版本的CSS也是最广为人知的一个版本，以前的前端开发者使用的一般的就是这个版本的CSS规范。CSS 2.1：作为一项W3C 推荐， 2004年2月，CSS 2.1对原来的CSS 2.0进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。CSS 2.1可以认为是CSS 2.0的修订版。CSS 3.0：作为一项W3C推荐，2010年，CSS 3规范推出，这个版本的CSS完善了前面CSS存在的一些不足，例如，颜色模块增

36、加了色彩校正、透明度等功能；字体模块则增加了文字效果、服务器字体支持等；还增加了变形和动画模块等。总的来说，CSS是一种用来表现 HTML或XML等文件样式的计算机语言，同时也是一系列格式规则，这些规则用于控制网页内容的外观：从精确的布局定位到特定的字体和样式，CSS样式都可以一样表现出色，甚至对于一些网页特效，也可借助于CSS 实现。CSS样式单除了可用于控制HTML文档的显示外，也可以用于控制XML文档的显示格式。1.5 开发工具作为时下最为流行的网页语言，HTML5 拥有很多让人期待已久的新特性，被看做是Web 开发者创建流行 Web 应用的最佳利器，越来越多的开发人员开始使用 HTML

37、5 来制作各种交互性强、效果丰富的Web 应用。 虽然HTML5 的标准还不是特别完善的，但是HTML5 已经完全被市场所接受，并有着广阔和良好的发展前景。面对这一形式，开发工具提供商也纷纷向HTML5 技术靠拢，推出了支持HTML5 的新版本 3。下面将介绍三歀优秀的HTML5 的开发工具，这三款开发工具相信大家都不会陌生。（1）Initializr ：Initializr 是制作 HTML5 网站最好的入门辅助开发工具，可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会自动生成代码简洁的可定制的网页模板 4。 （2）Adobe Dreamweaver CS5：Ado

38、be Dreamweaver CS5 是一款能够同时实现管理网站和网页制作的网页编辑器，同时它也是第一套针对专业网页设计师特别开发出来的视觉化网页开发工具，开发人员通过它能够轻松、快速地制作出跨平台限制和跨越浏览器限制的充满动感的网页 5。（3）文字编辑器Editplus：Editplus 主要是对编开发过程中编写的代码进行高亮显示，并且还可以提供包括自定义模板在内的许多功能，以此来提高编程效率 6。由于本人开发时也使用了Editplus，下面就具体简述一下Editplus及其主要特点。EditPlus 是一套功能强大，可取代记事本的文字编辑器，它拥有无限制的撤消与重做、英文拼字检查、自动换行

39、、全文搜索替代、同时编辑多文件、全屏幕浏览功能。另外它也是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML 标记，它还内建了完整的中国矿业大学本科生毕业设计（论文） 第 7 页HTML /实时更新坦克爆炸相关信息updataBombFxs();/实时更新炮弹相关信息updataBullets();/实时更新坦克相关信息updataTanks();/实时更新坦克重新出现时的相关信息updataTankStarts();/实时更新系统出现的奖励的相关信息updataFood();/实时更新坦克数组相关信息addTanks();中国矿业大学本科生毕业设计（论文） 第 17 页4.2 地图功

40、能模块4.2.1 读取地图由于地图是一个二维平面图，所以本游戏是将地图数据存储在一个数组变量中，所以采用二维数组来存取。用户界面操作模块从数据管理模块端获得地图数据之后，在用户界面操作模块解析，然后从中读取地图信息，并且根据数组对应的数据，绘制出地图。4.2.2 绘制地图游戏有识别地图的相关功能，而绘制地图的前提是能够解析并识别出二维数组中关于地图的相关信息。游戏将地图信息变量设为一个二维数组，在数组中每个数据都会对应一个相应的数字，这个数字即为当前地图中每个单位的地图信息，而将他们整合起来之后就是一副完整的地图。（1） 本课题中所设定的相关数字及其对应的地图中代表的相关信息如下：var NO

41、N = 0; /坦克所走的通道var WALL = 1; /砖墙var GRID = 2; /水泥墙壁var GRASS = 3; /草棚var WATER = 4; /河流var ICE = 5; /冰面通道var HOME = 9; /大本营每一个地图元素都随之对应了相应的地图属性：空（null） 。坦克能够全部自由通过，显示出来为黑色填充矩形。红砖。坦克不能直接通过，但是可以控制发射炮弹将其击毁，击毁后会自动消失，之后坦克就可以自由通过。水泥墙。坦克不可以通过，炮弹也击毁不了。草棚。坦克可以全部自由通过，但是会被草棚遮掩住，所以坦克在遇到该元素时要在其下面通过。河流。坦克不能够自由通过，

42、炮弹可于河流上方自由飞过。冰面通道。坦克可以自由行驶在上面，但是会有颜色干扰，元素为银白色的填充矩形。（2） 在绘制地图元素时，以绘制红砖为例：使用标签指出相关画布的信息：借助于 document.getElementById 得到矩形画布 wall：var myCanvas = document.getElementById(“wall“); /砖块得到上下文环境来绘制：var graphics = myCanvas.getContext(“2d“);中国矿业大学本科生毕业设计（论文） 第 18 页引入相关图片集 tankAll：var img = document.getElementBy

43、Id(“tankAll“);用 fillRect()对矩形画布进行填充颜色：graphics.fillStyle = “#7f7f7f“;graphics.fillRect(0,0,512,448); /填充一个矩形graphics.fillStyle = “#000“;graphics.fillRect(offerX,offerY,416,416);调用 for 循环进行地图元素进行判断并在地图中显示出来：for(var i=0;i 5) /保证其再次使用时又从最小的开始显示this.frame = 0;this.num +;this.time +;（6）由于本游戏分为双人模式和单人模式，所

44、以选择不同的模式后，己方坦克是有所不同的，这个要用一个 if 判断句进行处理：if(this.name = 1) /如果选择单人，就只出现 myTanktankx = images“myTank“0;tanky = images“myTank“1; else /双人模式的坦克tankx = images“myTank2“0;tanky = images“myTank2“1; （7）同时如果坦克处于带防护罩的状态，还要有不同的处理：if(this.isGod) /带防护罩的坦克var fr = parseInt(this.godTime / 6 )% 2;graphics.drawImage(i

45、mg, shieldx, fr * 32 + shieldy, 32, 32, this.x + offerX, this.y + offerY, 32, 32) ;中国矿业大学本科生毕业设计（论文） 第 24 页（8）在坦克发射子弹时要能够同步其声音 attack，实现代码如下：if(!this.isShot)this.isShot = true;var bullet = new Bullet(this.x,this.y,this.type,this.dir,this.name);bullets.push(bullet);sound.play(“attack“);（9）在进行游戏时，坦克相关数据是需要实时更新的。而进行更新时又是分为己方坦克和敌方坦克两种方式。/己方坦克的实时更新：var i;for(i = playerNum; i 416 | this.y 416)