摘要：随着现代计算机网络的兴起，我们的生活正在悄然发生着翻天覆地的变化，在这样的大环境下，H5一经发布，给互联网世界带来不小的震动。所谓H5就是html5的缩写，是在网络上通用的一种超文本标记语言，它代表着一种技术规范。而对于H5小游戏,我们可以看作成移动端的web小游戏，H5小游戏最大的优势就是省去了庞大复杂客户端的下载与安装,同时它开发的周期相对较短，后期修改相关代码简便，兼容性强，可跨平台，多渠道，占用系统内存小。这些优势为H5小游戏的传播创造了极大的便利，越来越受人们的欢迎。

本课题以Sublime Text3+谷歌浏览器为开发环境，以H5前端技术为主要研究内容，开发基于H5的射击类小游戏。课题实现过程主要包括鼠标事件的处理，HTML本地存储，碰撞检测的实现，各种音效的添加和游戏各个角色的控制等。

关键词：html  js  html5  canvas画布  h5小游戏”

目录

摘要

Abstract

1. 引言-7

1.1 研究背景-7

1.2 研究目的及意义-7

1.3 课题研究带来的影响-8

2. 系统开发环境-9

2.1 开发工具-9

2.1.1 WampServer-9

2.1.2 Sublime Text3-9

2.1.3谷歌浏览器-10

2.2 开发技术-11

2.2.1 HTML5技术概述-11

2.2.2 CSS技术概述-12

2.2.3 JavaScript技术概述-12

2.2.4 PHP技术概述-12

3．概要设计-14

3.1 游戏整体设计思路-14

3.2 游戏角色设计-15

3.2.1 英雄设计-15

3.2.2 怪兽设计-17

3.2.3 子弹设计-17

3.2.4 音效设计-18

3.3.5 按钮设计-20

4. 游戏功能实现-21

4.1 游戏注册登录-21

4.2 游戏场景制作-24

4.3 游戏主循环实现-29

4.4 游戏历史记录-30

4.5 游戏排行榜-32

4.6 游戏记录的清除-34

5. 重要算法实现-36

5.1 碰撞检测-36

5.2 游戏键盘控制-36

5.3 鼠标事件处理-38

5.4 帧动画-39

5.5 HTML本地存储-40

6 游戏说明-41

7.结语-42

7.1 课题总结-42

7.2 展望-42

参考文献-43

致谢-44