摘 要

历年来互联网技术不断地发展和更新，网页设计作为其必不可少的一个部分，也在不断地壮大。而HTML5就是网页设计的一大利器，在很多方面发挥着巨大的作用。而在人们的日常生活中，对移动性和信息的需求急剧上升，同时智能手机为人们的生活带来了巨大的变革，使人们进入了移动互联网时代。同时由于人们的生活节奏不断加速，越来越多的人们开始利用碎片化时间娱乐，网页小游戏的前景一片光明，为适应这个市场需求，本次毕设选定HTML5坦克游戏进行设计。而本论文也将围绕着HTML5坦克游戏展开来,该坦克游戏应用了HTML5的一些新技术和新功能，同时也应用了JavaScript和CSS的相关技术。

论文将从国内外网页游戏背景，需求分析，关键问题解决，界面展示和总结展望等几个方面来进行叙述，大致按照游戏的制作流程进行展示。不仅会呈现出游戏的代码模块设置，还会介绍游戏的某些功能的逻辑实现，同时也会把游戏的效果图展示出来。本游戏中主要涉及到的HTML5新技术是canvas，它的应用摆脱了网页游戏对Flash的依赖，提高了平台的适应性，同时也使网页开发更为便捷。希望本论文能够在相关方面给大家提高一个参考。

关键词： HTML5，canvas，坦克游戏

Abstract

Over the years, the continuous developer of Internet technology and updated website design as an essential part, but also continue to grow. And HTML5 is a great tool for web design, in many ways plays a huge role. And in people’s daily lives a sharp rise in demand for mobility and information, smart phones to people’s lives has brought great changes to make it into the mobile Internet era. At the same time because of people’s pace of life continues to accelerate, more and more people began to use fragmented time entertainment and game pages prospect of a bright future, to meet the market demand, this complete set is selected HTML5 tank game design. This paper will focus on the HTML5 tank game to start, the tank game applied some new technology and new features of HTML5 to design, as well as JavaScript and CSS technologies.

The paper will talk about these aspects below, background of web games at home and abroad, demand analysis, the solution of key issue, the interface display and summarize, and show the game in the way how the game making. Not only showing the game’s code module settings, will introduce logic implementation of certain functions of the game, but also the effect of the game displayed in Fig. The game is mainly related to new technologies HTML5 canvas, its application to get rid of the dependence on Flash web games, improving the adaptability of the platform, but also the web development more convenient. I hope this paper can improve relevant aspects give you a reference.

Keywords: HTML5，canvas，Tank Games

目录

第1章 绪 论 1

1.1.选题背景 1

1.2.目的和意义 2

1.3.现状分析 2

1.3.1.HTML 的发展 2

1.3.2.HTML5游戏当前状况 3

1.3.3.HTML5游戏前景 3

1.4.技术分析 4

第2章 需求分析及设计 6

2.1.可行性分析 6

2.1.1.技术可行性 6

2.1.2.经济可行性 7

2.2.功能需求 7

2.3.总体设计 7

2.4.流程设计 8

2.5.模块设计 9

第3章 游戏实现 11

3.1.总体实现 11

3.2.关键问题 11

3.2.1碰撞函数 11

3.2.2 敌人射击问题 13

3.2.3 关卡难度选择功能的实现 14

3.2.4 其他问题 14

第4章 界面展示及测试 17

4.1.欢迎界面和选关界面 17

4.2.关卡展示 18

4.3.测试效果 20

4.4.测试总结 22

第5章 总结与展望 23

参考文献 25

致 谢 26

第1章 绪 论

1.1.选题背景

根据《中国移动互联网发展状况及其安全报告（2016）》数据统计显示，我国的手机网民数量超过电脑网民，在2015年中国境内的手机网民数已经达到了7.8亿；这意味着越来越多的网民选择使用手机上网。

这背后有着很多原因，关键的一点就是，手机方便快捷，可以充分地利用起人们的零散时间，现在的社会节奏很快，人们总是在奔波忙碌，这也造成了大量的零散时间，如等车时间，乘车时间，排队时间以及就餐时间等等，这些时间引起了很多人的关注，大家都想利用起这部分时间，而这正是网页小游戏的巨大前景^[1]。

图1-1 中国网民规模和互联网普及率

如图1-1是我国历年网民的数量变化情况，由图可以看出网民规模和互联网的普及率在逐年递增。