摘要：随着全球化的发展，科学的进步，二十一世纪的人类社会已经是一个信息化的时代。随着互联网的不断发展和计算机的不断更新，人们的生活得到了极大的满足。其中网络游戏更是为大众的生活增添了丰富的色彩。在众多类型的网络游戏中，网页游戏占有最高的市场份额，相较于传统的Flash技术，新兴的HTML5大有赶超之势。

本课题的目的是通过使用HTML5的绘图技术Canvas，实现一款2D网页游戏。游戏的基本逻辑操作由JavaScript及其相关类库等技术实现；游戏画面及游戏图像由Canvas元素来设计和实现；并结合HTML5的Web SQL的数据存储技术,最终完成设计并实现一款大鱼吃小鱼的网页游戏。

此款网页游戏具有游戏逻辑清晰，视觉效果良好，操作简单等特点，适合各年龄阶段的人群；同时该游戏也充分体现了使用HTML5制作网页游戏的优点。

关键词：HTML5；Canvas； 2D动画；大鱼吃小鱼；网页游戏

目录

摘要

Abstract

1 引言-1

1.1 课题的研究背景-1

1.2 课题的研究意义-2

2 需求分析-3

2.1 系统可行性-3

2.1.1 社会可行性-3

2.1.2 技术可行性-3

2.1.3 操作可行性-4

2.2 功能需求-4

2.2.1 时间模式功能-4

2.2.2 无尽模式功能-5

2.2.3 系统公共功能-6

2.3 开发环境和语言-7

3系统概要设计-8

3.1 系统的设计思想-8

3.2 系统模块划分-8

3.3 游戏操作流程设计-9

3.3.1 时间模式操作流程-9

3.3.2 无尽模式操作流程-10

4 系统详细设计-12

4.1 数据库设计-12

4.1.1 数据库介绍-12

4.1.2 数据库表设计-13

4.1.3 数据展示-15

4.2 部分功能的详细设计-16

4.2.1 玩家控制的主鱼动态介绍-16

4.2.2 无尽模式背景漂浮物的实现-17

4.2.3 无尽模式成长值进度条的实现-17

4.2.4 鼠标绑定事件-18

4.2.5 碰撞检测-18

4.2.6 游戏主界面展示-19

5 系统测试-20

5.1 测试目的-20

5.2 测试原则-20

5.3 测试方向-20

5.4 测试结果-20

结论-21

参考文献-22

致谢-23