摘 要

近年，网络技术有着巨大的提升，人们与Web页面的交流变得更加频繁，这促进Web前端技术的发展，与此同时，HTML5已经成为Web前端技术的主流形式，通过HTML5可以使网页拥有更丰富的形式。

网页游戏是不同于大型游戏，以HTTP协议为基础传输形式仅仅需要支持的浏览器即可启动，占用内存小，开发成本低，可在多平台上使用，可移植性强等多优点的游戏形式。

本文使用HTML5实现游戏界面的设计和开发，CSS统一对页面的格式与形式进行制定，使用JavaScript绘制太空战舰游戏内界面和实现其游戏规则，完成战舰飞行、战舰开火、统计得分等游戏功能。

关键词：HTML5，网页游戏，JavaScript

Abstract

In recent decades, the network technology has been greatly improved, and people have more frequent communication with Web pages, which promotes the development of Web front-end technology. Simultaneously, HTML5 has become the most important form of Web front-end technology. HTML5 can make web pages richer form.

Web games are different from large-scale games. The HTTP-based transmission format only needs a supported browser to start. It takes up little memory, has low development cost, can be used on multiple platforms, with the advantages of portability.

This article uses HTML5 to implement the design and development of the game interface, CSS uniformly formulates the format and form of the page, uses JavaScript to draw the interface of the space battleship game and implements its game rules, and completes game functions such as battleship flight, battleship firing, and statistical scoring.

Keywords：HTML5，Web games，JavaScript

目录

第1章 绪论 1

1.1 选题背景 1

1.2 研究的目的及意义 1

1.3 国内外研究及现状 2

1.4 研究内容及组织形式 3

第2章 主要技术分析 4

2.1 开发工具 4

2.2 HTML5特性 4

2.2.1 Canvas 4

2.2.2 Audio 4

2.2.3 WebSocket 5

2.3 JavaScript特性 5

2.4 CSS特性 6

第3章 游戏设计 7

3.1 游戏逻辑设计 7

3.2 加载系统设计 7

3.3 主程序设计 8

3.4玩家系统与武器系统的设计 10

3.5 敌人与关卡设计 11

3.5.1 普通与特殊飞船 11

3.5.2 BOSS 12

3.5.3 关卡设计 12

3.6 增益系统设计 12

3.7 碰撞系统设计 14

3.8 游戏优化设计 15

第4章 游戏实现 16

4.1 加载系统与游戏界面的实现 16

4.1.1 加载系统 16

4.1.2 游戏主界面 17

4.1.3 游戏中界面 18

4.2 主程序的实现 18

4.3 玩家系统和武器系统的实现 20

4.4敌人系统与关卡的实现 21

4.5增益系统的实现 22

4.6碰撞系统的实现 23

4.7 游戏优化 24

第5章 游戏测试与运行 25

第6章 总结与展望 28

6.1 总结 28

6.2 展望 29

参考文献 30

致谢 31

第1章 绪论

1.1 选题背景

自从有互联网的出现，互联网的发展从未停止过进步的步伐^[1]。网页的增长速度与网站的增速在同一步调，快速增长，应用的发展并没有跟上技术的发展，旧式的HTML技术和过时的后台解决方案，大大降低了人们的使用体验。HTML5更新后，添加了数个具有划时代创新性意义的标签和淘汰了使用不便的陈旧标签，使其有了巨大的跃进。

近年来，HTML5持续火爆，在广告设计、教育、新闻媒体，甚至是医疗都能看到HTML5的身影。HTML5游戏是数字广告的一种具有代表性的形式，而在中国，数字广告已经占据广告市场的60%以上的份额。我们也可以在央视新闻和各种新闻客户端看到HTML5游戏的身影。根据用户的体验效果和优化作用，基于HTML5技术的数字出版物有明显优势，如内容丰富，形式新颖等^[2]。有国内学者将HTML5游戏结合到微课中，也有国外学者开发多媒体远程学习网页^[3-5]。让游戏与课堂相结合，寓教于乐，让学生更能沉浸在学习中且不失乐趣，在竞争挑战中获取知识，学习体验相比于传统教育有更好的提升。有研究表明，严肃的健康游戏可以改善病人依从性^[6]。也有国外学者开发一款HTML5游戏用于协助治疗酒精使用障碍^[7]。HTML5还会有更好的发展前景。

1.2 研究的目的及意义

用户对互联网的粘性越来越高，互联网的应用市场广泛，吸引技术人员加大力度对Web页面的开发，从另一个层面看， Web前端开发技术也在因此不断成长，Web前端的开发技术不仅仅只是面向电脑端的Web页面，而且也面向各种移动终端上的Web，并且在Web前端开发技术的发展中，HTML5凭借其新增的标签以及特性，让其一跃成为该技术的主流，随着HTML5技术的应用，应用能够支持Web前端开发技术在不同内核的浏览器中应用，而且能够使开发与维护成本大大的降低，使浏览器具有更加丰富的HTML5特性。

移动端游戏通常会被诟病于网络诈骗，一些不良的开发者在应用程序加入木马程序，用于窃取用户信息，偷取用户钱财，更有甚者利用这些信息做非法勾当^[8]。具有高安全性能的HTML5游戏就可以降低玩家在这方面的烦恼，更值得玩家的信任。

在经典的游戏设计与开发过程中，游戏一般仅限于在特定区域内构建游戏，就像电脑端开发电脑游戏，在掌机端开发掌机游戏。只有拥有Flash使用权的用户才有资格玩Flash游戏。与其他游戏不一样， HTML5没有资格要求，也没有设备要求，游戏形式可以从单个页面框到多页面框。人们可以利用所有页面元素进行交互和数据传递，如音频元素、视频元素和图像元素等，并且可使用多个浏览器窗口来构建游戏。