摘 要

科技在当今社会里无处不在，人们的生活都因为科技而丰富多彩。随着电脑的出现，生活随之改变。从一开始的扫雷，直到如今的各种网络游戏，游戏也逐渐成为生活中不可缺少的娱乐方式。基于HTML5开发的游戏拥有各种多样的标签、优秀的离线存储与多线程技术、强大的设备访问能力、以及全新的多媒体及图形特效元素。HTML5的游戏开发凭借其强大的跨平台特性以及面向移动的未来趋势开始受到关注并得以发展。

贪吃蛇是一个经典的游戏,在PC个人电脑、手机移动端都有各种实现的版本。本文则是利用HTML5技术，在网页上实现了贪吃蛇这一经典佳作。通过Javascript脚本来控制贪吃蛇在地图上移动，还能让地图中动态随机产生食物、障碍物以及升级奖励图标，并且能控制贪吃蛇蛇身的增加以及判断贪吃蛇是否撞墙死亡。通过Canvas实现游戏界面的排布以及修饰。在本贪吃蛇游戏中，玩家能通过操控键盘上下左右方向键来实现对蛇移动的控制。同时可以选择并且点击开始游戏按钮来开始游戏，可以选择并点击分享到QQ空间或新浪微博来实现游戏分享功能。本贪吃蛇游戏能够实现贪吃蛇游戏过程中基本的功能，吃食物、升级加速、撞墙死亡等。最后通过Audio标签修饰游戏背景音乐以及音效功能。

本贪吃蛇游戏利用Eclipse工具完成编程和调试，并且在不同版本浏览器上对游戏进行运行和测试。本贪吃蛇游戏不仅实现了贪吃蛇基本的移动、吃食物、判断碰壁碰等功能，更在游戏中加入了升级增加难度的功能。增添游戏音效以及新设游戏分享功能，让整个游戏不再单一无趣。通过这次毕业设计，我能够完成老师布置的任务，同时也学习到了HTML5的相关知识，为以后工作就业打下了良好基础。

关键词：HTML5；Canvas；贪吃蛇游戏；JavaScript；

Abstract

Technology in today's society is everywhere, people's life are rich and colorful because of science and technology. With the advent of the computer, life changes. From the beginning of the mine, until now a variety of online games, games have gradually become an indispensable way of life in the entertainment. HTML5 development of the game has a variety of labels, excellent offline storage and multi threading technology, a strong ability to access the device, as well as a new multimedia and graphics effects elements. HTML5 games were developed by virtue of its strong cross platform characteristics and the future trend of mobile trends began to be concerned and developed.

Snake is a classic game. In the personal computer, mobile phones have a variety of mobile terminal to achieve the version. This paper is about use of HTML5 technology, the realization of the snake on the web page of this classic masterpiece. By using JavaScript scripts to control the snake to move on the map, but also to map dynamic randomly generated food, obstacles and upgrade the award icons. We can control the snake and the increase of judgment snake whether the wall of death. Through the realization of Canvas game interface configuration and modification. In the snake game, the player can control the keyboard up and down by the left and right keys to achieve the control of the snake movement. At the same time you can choose and click on the start button to start the game, you can choose and click to share to QQ space or micro-blog Sina to achieve the game sharing function. The snake game to the basic functions of the snake game in the process of food, upgrade acceleration, wall of death. Finally through the Audio tag to modify the game background music and sound effects.

This snake game using Eclipse tools to complete programming and debugging. By using different versions of the browser to run and test the game. The snake game not only to achieve the snake basic mobile, food, judge the wall touch function, more in the game to join the upgrade to increase the difficulty. Add gaming sound and new game sharing feature, so that the whole game is no longer a single boring. Through this graduation project, I am able to complete the task of the teacher, but also to learn the knowledge of the HTML5, for the future employment and lay a good foundation.

Key Words：HTML5；Canvas；SNAKE；Javascript；

目 录

第1章 绪论 1

1.1课题研究背景及意义 1

1.2国内外研究现状 2

1.2.1 PC端 2

1.2.2移动端 3

1.2.3跨界领域 3

第2章 相关工具 5

2.1相关技术原理 5

2.1.1 HTML5的新特性 5

2.1.2 Canvas 6

2.2 IDE开发工具 8

2.3 浏览器 8

2.4搭建服务器 9

2.4.1 Xampp软件使用方法 9

第3章 系统设计 11

3.1游戏玩法设计 11

3.2需求分析 11

3.2.1系统角色 11

3.2.2用例分析 11

3.3程序总体设计 12

3.3.1程序功能模块分析 12

3.4游戏各功能模块的设计 13

3.4.1游戏逻辑的设计 13

3.4.2贪吃蛇障碍物模块设计 14

3.4.3 贪吃蛇升级模块的设计 15

3.4.4游戏分享模块的设计 16

3.4.5游戏声音模块设计 16

第4章 系统的实现 18

4.1 系统实现方案 18

4.2 贪吃蛇各模块实现 18

4.2.1游戏主体的实现 18

4.2.2食物模块的实现 19

4.2.3音效模块的实现 20

4.2.4障碍物模块的实现 21

4.2.5升级模块的实现 22

4.2.6分享模块的实现 23

4.2.7监听封装 23

第5章 平台运行与测试 25

5.1平台测试环境 25

5.2游戏功能测试 25

第6章 总结与展望 30

6.1本文工作总结 30

6.2下一步的工作展望 30

致谢 31

参考文献 32

第1章 绪论

1.1课题研究背景及意义

我们大家现在都生活在互联网的时代，互联网已经与我们的生活密不可分。走在大街上，你随处可见路人拿着手机，手指在手机屏幕上从下至上迅速滑动，他们有的人是在分享社交圈，有的人在乐此不疲的追剧，有的人在玩些移动端小游戏。人们乐于接受互联网同时人们也享受着互联网给大家生活带来的方便与快捷。随着使用互联网的用户人数的增多以及源源不断的新晋开发者人数的增加，人们也不亦乐乎地去试图让互联网更加迅速，无论从技术的角度还是从商业的层面上来看，互联网的新模式层出不穷，这也导致了整个互联网行业新晨代谢加剧，创意的应用程序和小型创新公司不断地向新的模式发起挑战。整个互联网行业的创业成本不高、技术才是核心力量，因此这也推动着一些大公司不断地开创着新的技术，基于这些可以累积一定的技术专利，同时靠着这些建立全新的技术以及提供更好的服务给客户。但是毕竟开放的互联网才是大家所需要的、才是公平的，一家公司的独裁只会让人们失去对互联网络的信心，所以HTML5这种新的标准才会推着互联网发展不断向前、不断进步。

在近二十年来的Web标准中，HTML5有着相当大的变化以及飞跃，HTML5和老旧的版本不同，HTML5并不是只用来展示Web的内容，它的目的是将Web带向一个更加成熟的平台，在这个平台里，使用者能够观看视频、收听音频、浏览图象并且欣赏动画。虽然真正实现HTML5并非一日之功，但HTML5正在逐渐改变当今Web的格局。另外，当今的互联网已今非昔比，所有的传统和旧模式正在不断地被淘汰甚至被抛弃，互联网已经向着更加高速和便捷发展，人们可以通过掌上电话、平板电脑以及个人电脑等各类设备来得到各种各样的信息以及把玩各种丰富多彩的应用程序，如依据触控开发的“愤怒的小鸟”亦或是集新闻娱乐体育于一身的“新浪微博”。上述各种新的元素和新的功能被加入了HTML5中。因此，研究HTML5这种技术体系之后，尝试创造出一些新奇应用其实是一种难能可贵的机遇，趁着这个进步飞速的时代经常使用这种相似技术来创造出更加新奇的应用，也或许有可能像乔布斯一样，一次又一次改变世界。