摘 要

HTML5是由W3C（万维网联盟）与WHATWG（网页超文本应用技术工作小组）共同提出的一套面向未来的HTML标准规范，凭借丰富的语义化标签、优秀的离线存储与多线程技术、强大的设备访问能力、以及全新的多媒体及图形特效元素，这套标准得到了广泛应用并在主流浏览器上得到良好的支持。基于HTML5的游戏开发凭借其强大的跨平台特性以及面向移动的未来趋势开始受到关注并得以发展。

本次课题主要通过JavaScript脚本技术，结合基于HTML5的Canvas、Audio等元素相关API，完成跳伞游戏的设计与开发，并实现服务器的部署。游戏主要实现了包括游戏核心模块、音效控制模块、得分排名以及一键分享等模块的功能。在这款游戏中，玩家可以通过鼠标或键盘操控指定跳伞者角色，与电脑控制的其它跳伞者完成跳伞竞赛，这需要尽可能快的起跳时间以及恰当的着陆时机。在空中我们设计了其它可触碰的物体，包括飞鸟、星星和药丸，玩家需要避开或接触它们以更高的游戏得分和更久的游戏时间。如果玩家的得分够高，它将被记录在排行榜上。除此之外，游戏还提供大量音效以提高玩家体验。

最后通过不同浏览器对游戏进行运行测试，发现游戏在谷歌桌面浏览器中运行效果良好，满足设计要求。

关键词：HTML5；游戏开发；跳伞；JavaScript；Canvas；

Abstract

HTML5 is jointly proposed by W3C (World Wide Web Consortium) and WHATWG (web Hypertext Application Technology Working Group) ,and a set of oriented future HTML Standard Specification, with rich semantic tagging, excellent offline storage and multi thread technology, powerful equipment to access the ability, and the new multimedia and graphics elements, this standard has been widely used and has good support in the mainstream browser. Game development based on HTML5 with its powerful cross platform characteristics and the future trend of mobile trends began to be concerned and to develop.

This topic mainly through JavaScript technology, combining based on HTML 5 Canvas, Audio and other elements related to API, complete jump game design and development, and to implement the deployment of the server. Game mainly implements the core module, audio control module, including games ranked as well as a key to share the function of the module. In the game, players can be specified through the mouse or keyboard to manipulate the parachutist role, and the computer control of the other person to complete sky diving competition, the need to vertical as fast as possible and appropriate landing time. We design the other out of the air can touch objects, including birds, the stars and pills, players need to avoid or contact them at a higher game scores and longer time. If the player's score is high enough, it will be recorded in the list. In addition, the game also provides a number of sound effects in order to improve the playing experience.

Finally through different browsers to run and test the game, found the game in Google desktop browser running effect is good, meet the design requirements.

Key words: HTML5； game development； jump； JavaScript； Canvas

目　录

第1章 绪论 1

1.1课题研究背景及意义 1

1.2国内外研究现状 1

1.3本文内容及组织结构 2

第2章 开发技术与工具 3

2.1 HTML5标准 3

2.1.1游戏开发基础—Canvas 3

2.1.2媒体元素video与audio 5

2.1.3其他特性与功能 6

2.2 JavaScript脚本技术 7

2.2.1 JavaScript概述 7

2.2.2基于JavaScript的游戏设计 9

2.3 CSS3样式 9

2.4其他技术 10

2.5开发工具及环境 10

第3章 游戏设计及目标 12

3.1游戏功能模块结构 12

3.2页面的布局 12

3.3资源加载模块 13

3.4游戏核心模块 13

3.4.1菜单及帮助 14

3.4.2跳伞的过程及细节 14

3.4.3游戏结束 16

3.5声音特效模块 17

3.6得分排名模块 18

3.7一键分享模块 18

第4章 游戏的实现 19

4.1各模块实现的准备 19

4.1.1图形引擎 19

4.1.2游戏的启动与运行 20

4.2资源加载模块的实现 20

4.3游戏核心模块的实现 21

4.3.1菜单及相关界面 21

4.3.2跳伞界面及背景 22

4.3.3跳伞者及空中物体 22

4.3.4事件 24

4.4音效模块的实现 25

4.5排名模块的实现 27

4.6分享模块的实现 27

第5章 游戏的测试 28

5.1测试环境及结果 28

5.2测试小结 28

第6章 总结与展望 30

6.1本文工作总结 30

6.2下一步工作的展望 30

参考文献 31

致谢 32

第1章 绪论

1.1课题研究背景及意义

HTML5是由W3C（万维网联盟）与WHATWG（网页超文本应用技术工作小组）在2006年联合研发并于2014年10月完成制定的一套新的HTML标准规范。凭借丰富的语义化标签、优秀的离线存储与多线程技术、强大的设备访问能力、以及全新的多媒体及图形特效元素，HTML5标准得到了广泛应用并在主流浏览器上得到良好的支持。

虽然如今HTML5发展得如火如荼，但它曾险些胎死腹中。1997年HTML4定稿之后的10年里，HTML标准一致停滞不前。W3C则将全部精力投入XHTML开发，将HTML抛到一边，甚至企图通过XHTML2.0完全与HTML划清界限，“修复”整个Web。直到WHAT工作组率先发起向下兼容的HTML5标准，才让Web界开始迈出标准化的步伐。而真正让HTML5迅速得到广大开发者关注则是2010年乔布斯发表公开信炮轰Flash的事件,在这封信中乔布斯控诉了Flash的斑斑劣迹，将HTML5推上风口浪尖。这才有了各大浏览器对HTML5的青睐及后来IOS与Android两大移动阵营对HTML5的强力支持，甚至在2011年底，Adobe公司也放弃Flash在移动设备上的开发转战HTML5。

基于HTML5的游戏开发，主要是指通过JavaScript脚本对HTML5画布元素（Canvas）进行控制，并实现游戏逻辑的开发过程。作为一个游戏开发团队，精心创造出一款令人心仪的游戏产品自然是首要目标，但是，团队盈利与开发投入是否能符合预期是团队负责人必须考虑的。实际上，一款游戏的实际开发往往先确定游戏运行平台，再利用关联的技术实现，但面对如今繁杂多样系统平台，团队要么顾此失彼，要么强加投入。而HTML5的出现给这些游戏开发团队带来福音。一次发布，多平台运行。而且不仅如此，随着wap开发技术的日益发展，设备平台的更新升级，基于HTML5开发的游戏应用将会表现的越来越出色。