摘要：本设计是一款运行在支持HTML5的浏览器中、基于JavaScript的火柴人跳跃游戏。HTML5是HTML的最新版本，与以往版本相比，具有更高的网页表现力，甚至可以做到不依赖Flash插件来播放音频、视频、动画等元素。而JavaScript则是描述网页动作的、被称为轻量级的脚本语言，其特点为占用空间小、安全性高。

所以本设计采用JavaScript在HTML5提供的画布上按照一定逻辑来操作图片以实现整个游戏过程。与诸如开心农场等传统的模拟经营类网页游戏相比，它不需要玩家机械的定时操作和等待。本游戏可以随时进行游戏，达到休闲放松的目的，加之得分可以分享到社交平台，则具有更强的竞技性。

本游戏在完成之后经过测试和bug排查，可以良好的运行。同时也预留了空间可以添加更多的元素以丰富游戏内容，可用于二次开发。

【关键词】：火柴人跳跃游戏；  网页游戏； JavaScript； HTML5

目录

摘要

Abstract

第一章 引言与背景-1

1.1 引言-1

1.2 当代游戏的发展情况-1

1.3 网页游戏的现状-2

1.4 网页游戏的优势-3

1.5 任务概述-3

1.5.1 目标：编写一个火柴人跳跃网页游戏-3

1.5.2 《火柴人跳跃游戏》系统特点-3

第二章 需求分析与解决方案-4

2.1 系统说明-4

2.1.1 用于开发的浏览器的选择-4

2.1.2 用于开发的编译工具选择-5

2.2 开发计划-6

2.3 可行性分析-6

2.3.1 风险分析-6

2.3.2 技术可行性-6

2.3.3 操作可行性-6

2.4 设计方案：对涉及工具及技术的相关说明-7

2.4.1 HTML5（Hyper Text Markup Language)-7

2.4.2 JavaScript-7

2.4.3 CSS（Cascading Style Sheets）-7

2.5 系统开发前景及功能介绍-7

2.6 系统使用范围-8

2.7 用户提醒-8

2.8 运行环境-8

2.9 假设、依赖和约束-8

 第三章 产品分析-10

3.1 整体业务流程图-10

3.2 不同平台属性分析-12

3.3 用户界面需求-13

3.4 性能需求-13

3.5 产品质量需求-13

第四章 设计与实现-14

4.1 界面元素设计与说明-14

4.1.1 游戏主菜单设计-14

4.2 游戏主体设计与说明-14

4.2.1 游戏逻辑-14

4.2.2 人物设计-15

4.2.3 各类平台设计-15

4.2.4 背景设计-16

4.2.5 其他设计-16

4.2.6 总体sprite.png图片设计-17

4.3 游戏过程的编码实现-17

4.3.1 玩家左右控制设计与实现-17

4.3.3 画面卷动-19

4.3.4 人物的“穿墙”-20

4.3.5 判断游戏失败-20

4.3.6 游戏界面-20

4.4 游戏结束界面-21

第五章 系统测试-24

5.1 测试的概念-24

5.2 关于本系统的测试-24

5.3 已发现并解决的bug-24

5.3.1 随机产生断裂平台导致的bug-24

5.3.2 图片切割导致的bug-25

5.3.3 弹簧的设定的bug-25

5.4 暂时发现但遗留的bug及原因-26

第六章 总结-27

参考文献-28

致 谢-29