基于HTML5的飞机大战游戏设计与开发

摘要  本设计主要结合HTML5技术和Photoshop技术,设计并实现了基于HTML5飞机大战游戏.本游戏使用了HTML5技术中的Canvas(画布)标签、Audio标签、JavaScript、CSS、本地数据库等.本设计中游戏流程为:背景图片的选取及制作;登陆界面和游戏界面的设计;各功能模块的实现;各模块间的衔接;各功能模块的测试;整个游戏的测试.本游戏服务器运行后,玩家可以直接通过浏览器打开，并采用键盘对飞机进行操作.

关键词:HTML5;JavaScript;键盘操作

玩家通过控制键盘来控制自己的飞机状况，如飞机发射子弹相当于键盘上Z；P相当于键盘上P；上、下、左、右飞机可以随意移动。当敌方飞机被玩家飞机子弹达到时玩家分数加100；当玩家飞机与敌方飞机相撞时玩家飞机生命值减1，玩家飞机生命值共有4次，当生命值为0时游戏结束。

目 录

1.1研究背景和国内外研究现状 3

1.1.1研究背景 3

1.1.2研究现状 5

1.2开发平台简介 6

1.2.1 VS 2012简介 6

1.2.2 开发环境的搭建 6

1.3课题主要内容和系统功能介绍 6

1.3.1 课题主要内容 6

1.3.2飞机大战游戏功能介绍 7

2.1 HTML5的新特性 8

2.2 JavaScript中的面向对象 8

2.3 CSS层叠样式表 9

2.4 Photoshop技术 9

3.1 游戏设计简介 10

3.2 需求分析 10

3.2.1 系统角色 10

3.2.2 用例分析 10

本游戏是按进度条层、游戏层、飞机层、子弹层、文字层划分层次的。进度条层是用来显示图片读取时的进度。游戏层是用来掌控整个游戏，其他各层都会添加到游戏层上面。飞机层是用来显示游戏中的飞机。子弹层是对子弹进行操控的。文字层是用来显示游戏中的文本。 11

4.1进度条层 11

6.1测试目的 15

6.2测试方法 15

6.3测试实例 15

6.3.1 进度条模块 15

测试 17

结果图 17

图6.1 进度条测试图 17

6.3.2游戏运行模块 18

6.3.3游戏结束 21