摘 要：2018年，一个叫“跳一跳”的微信小游戏带着它独特的游戏模式以及简单小巧的不用安装的体制火遍了所有人的朋友圈。它简单好理解同时易上手的操作方式、清新的界面设计、轻松的游戏氛围获得了广大年轻人的一致好评。对于其游戏逻辑的好奇，我想基于“跳一跳”小游戏的游戏机制，扩张游戏玩法，增加一些新的玩法。

本游戏项目是利用HTML5、JavaScript以及css来编写完成的H5小游戏，主要使用webstorm软件编写而成。本论文主要是围绕着编写项目的具体方式来进行研究与阐述，具有一定的对游戏项目的理解与解析。

本论文对小游戏项目编写的过程进行了细致的剖析与理解，比如本小游戏使用css来实现游戏界面的整体布局，使用了HTML5语言来实现素材的加载以及页面的跳转等作用，使用JavaScript来完成整个游戏的逻辑关系的实现等。

 

关键词：H5小游戏；跳一跳；HTML5；JavaScript；css

 

目 录

摘 要

Abstract

第1章 绪 论

1.1研究目的和意义

1.1.1 研究目的

1.1.2 研究意义

1.2研究背景

1.2.1国内发展（应用）现状

1.2.2国外发展（应用）现状

1.3论文研究方案

1.3.1研究目的

1.3.2研究内容

1.4论文的结构

第2章 系统相关技术研究

2.1技术选型

2.1.1 前端技术栈

2.1.2 开发工具

2.2技术介绍

2.2.1 HTML5

2.2.2 JavaScript

2.2.3 CSS（层叠样式表）

2.3 本章小结

第3章 “跳一跳”游戏需求分析

3.1开发目标

3.2 功能需求分析

3.2.1 功能总体描述

3.2.2 玩家操作人物概述

3.2.3 跳台进行移动概述

3.2.4 跳台进行重置概述

3.2.5 分数增加概述

3.2.6 背景音乐播放概述

3.2.7 人物跳跃到跳台上概述

3.2.8 游戏失败概述

3.2.9 游戏成功概述

3.3 性能需求分析

3.4 本章小结

第4章 “跳一跳”游戏系统设计

4.1系统总体设计

4.2 游戏玩法设计

4.3 游戏风格设计

4.4 游戏画面设计

4.4.1 游戏主界面

4.4.2 游戏玩法介绍页面

4.4.3 游戏关卡选择页面

4.4.4 游戏页面

4.5 玩家控制角色设计

4.6 游戏控制函数设计

4.7 背景音乐设计

4.8 本章小结

第5章 系统实现

5.1 游戏功能实现

5.1.1 人物角色进行跳跃的功能实现

5.1.2 跳台移动的功能实现

5.1.3 跳台重置的功能实现

5.1.4 游戏倒计时的功能实现

5.1.5 人物皮肤切换的功能实现

5.1.6 跳台外观随机选择的功能实现

5.1.7 根据跳台外观进行加分的功能实现

5.1.8 检测人物是否跳到跳台上的功能实现

5.2 游戏展示

5.2.1游戏开始页面展示

5.2.2 游戏三模式展示

5.2.3游戏成功/失败效果展示

5.3 本章小结

第6章 系统测试

6.1 系统测试总体概述

6.1.1 系统测试的目的

6.1.2 游戏系统测试的方案

6.2 测试环境

6.3 测试记录

6.4 本章小结

第7章 结论与展望

7.1总结

7.2创新与不足

致 谢

参考文献