摘 要

本文详细介绍了网页版躲避白色钢琴块音乐游戏的设计和实现。由于游戏软件安装占据较大的空间与安装时间，而且步骤繁琐，用常规的游戏安装方法不能取得便捷的游戏安装体验。网页游戏是一种基于在网络游戏中被广泛应用，网页游戏更具有便捷性，不用安装，只需要打开网页就可以开始玩。基于该现象，本文选择了网页游戏进行开发，并在原生基础上进行了简单的修改。

本游戏采用visual Stdio code开发工具开发，其中的逻辑层为前端逻辑层框架HTML，css以及JavaScript技术。本小网页游戏的主要功能是在于可以选择6种不同的游戏模式，在鼠标上通过点击黑色钢琴块来完成对游戏的操作。设计的整体布局，包括题目，游戏操作区域，计时器，计分器。游戏操作区域的基础色是白色的钢琴块，随着使用者的操作让黑色的钢琴块在游戏操作区域随机自动生成并按一定数量向下移动。这就是网页版躲避白色钢琴块音乐游戏的基本设计。

最后通过测试来对游戏程序的每条路径进行测试，观察运行结果符合生成条件，程序可以良好运行。最后通过实际的游戏基本操作对该游戏进行了测试，操作运行正常可行。总体游戏运行良好，功能基本都可以运行，游戏趣味性较强，基本预期实现。

关键词：网页游戏；网页游戏设计；JavaScript编程；界面设计研究

第一章 引言

本章节主要介绍了该游戏项目的选题背景以及意义；该网页游戏的设计目的；当前形势下网页游戏在国内外的研究现状；本项目的研究内容与工作；以及本文的文章结构概述。

1.1选题背景与意义

因为互联网技术的发展与崛如今浏览器功能与技术方式愈来愈完善，社交媒体蓬勃发展，而使用受体用户的时间也日渐趋于碎片化，于是网页游戏逐渐受到大家的喜爱与接受，游戏开发慢慢将目光定位到网易游戏或者把游戏web化上，进一步开发网页游戏，网页游戏也借助此蓬勃发展起来。

在互联网进入游戏的高速车阶段的初始时期，因为那时候的计算机并没有在硬件和软件上有标准的模版与定义，所以在初始阶段的游戏不管是在网络游戏平台还是在操作系统，或者在语言上都大相径庭，没有一个确定的规范。那时候的游戏有很多欠缺的地方，比如说游戏的非持续性，这即意味着在游戏中的部分内容与信息记录会因为机器的重启从而面临可能丢失的风险，这让游戏在初始阶段并不受到大家的接纳，还有的缺点比如说，游戏仅能在相同的服务器或者终端机系统内部运行操作，并无法完成跨系统运行。这就导致网页游戏的发展和推广受到很大的影响与限制，虽然基本上所有的网页游戏都免费对用户开放，并不需要额外支付费用，这一部分受到游戏玩家的推崇，但因为网页游戏不能跟上日新月异发展的社会需求，让网易游戏很难保持一直稳定发展下去，也没有多少人愿意用大量时间堆砌玩一个每次都需要从头开始玩的，没有存档的网页游戏。

1.2设计目的

随着互联网行业蓬勃发展，网络游戏的崛起与发展成为大势所趋，目前网络游戏已经成为了大多数人日常生活的一部分。而其中的网页游戏因为便捷性与轻量免安装的特点，也深受喜爱。

然而，即使网页游戏的规模与质量在日渐增长，网页小游戏的用户粘合度依旧不高，这些就是由于网页小游戏本土创新能力不强，没有吸取来自于各处的游戏的设计，这就在极大程度上制约了网页游戏的发展。因而在理性思考许久之后，简单且容易上手的手机游戏就成为了本次网页小游戏设计的参考目标，最后同样也因此找到了这款名为别踩白块的简单的游戏，让其成为网页游戏，让所有人都可以感受到网页小游戏的魅力，为网页游戏的发展寻找一条新的道路。

1.3国内研究现状

中国网页游戏的发展是从二零零七年的中国首款网页游戏的出现而开始的，从此之后中国网页游戏市场开始进入高速车正轨蓬勃发展起来，从一开始最早的一款猫游记网页游戏，到后来的一款方便面三国网页游戏，接着变成腾讯公司的七雄争霸网页游戏，这些游戏都用自己的生命进程证明了在如今这个网络游戏高度普及化的现在，网页游戏都具有自己的立身之本：需要充分利用自自己作为网页游戏的便携占据客户端的优势，以及简单易懂的操作，极大的方便于用户的碎片化时间，这些特点让网页游戏倍受年青一代的关注与期盼。

但是网页游戏市场空间持续受挤压，多端融合是未来核心趋势。虽然网页游戏市场的近况不佳，但网页游戏并不会就此消失，随着游戏行业的不断发展，绝大多数用户将不单纯执着于某一个平台，而会呈现多端融合的趋势，未来网页游戏或成为端游和手游的补充，在市场上保持一席之地。

1.4本文的研究内容与主要工作

本文研究的是躲避白色钢琴块网页游戏，是一个基于前端JavaScript开发的网页游戏，能够实现可以选择6种不同的游戏模式，包括了经典模式，禅模式，接力模式，街机模式，极速模式，闯关模式，用户在鼠标上通过点击黑色钢琴块来完成对游戏的操作。

1.5本文的论文结构和章节安排

本论文一共有六个章节，每个章节的内容和结构如下所示：

第一章 引言：

本章节主要介绍了该躲避白色钢琴块网页游戏的选题背景和他所具有的意义；目前在当前形势下网页游戏在国内国外的相关研究现状；该游戏的主要功能模式与该游戏实现的具体内容；该网页游戏项目的章节详细安排与论文结构框架。

第二章 相关理论与关键技术：

本章节主要介绍了该躲避白色钢琴块网页游戏开发需要使用到的相关知识理论和实现这个网页游戏项目要运用到的编程语言与前端技术。

第三章 游戏的需求分析：

本章节是描述了本躲避白色钢琴块网页游戏的具体需求分析，包含了问题陈述、用例规约、术语表等。

第四章 游戏的设计：

本章节分析了该躲避白色钢琴块网页游戏各方面的设计，包含该网页游戏的体系结构、该网页游戏的各功能的框架、以及该网页游戏的各功能模块设计等。

第五章 游戏的实现：

本章节会展示该躲避白色钢琴块网页游戏的个模式是怎么实现的，包含各功能演示及其代码。

第六章 游戏的测试：

本章节对该躲避白色钢琴块网页游戏进行全面的测试。

1.6 本章小结

本章开头着重介绍了本文研究的网页游戏躲避白色钢琴块的诞生背景，突出了该网页游戏在这个时代的所拥有的优越性。接着陈述了该系统所能做到的事情，列举出了该游戏所涵盖的六大游戏模式。最后标注了本论文的基本框架，方便读者阅读。

第二章 相关理论与关键技术

本章主要介绍了本网页游戏的开发环境，以及游戏开发中所应用到的相关理论知识和关键开发技术。包括电脑硬件和开发软件的环境、开发时使用的开发工具visual code，开发使用的语言HTML、CSS、JavaScript，并分析了它们各自的特点和优势，开发使用的相关技术如HTML5中新增的audio、Web Storage。

2.1 开发环境

（1）硬件：

操作系统：Windows 10

CPU： (英特尔)Intel® Core™ i5-7200U CPU @ 2.50GHz(2712 MHz)

主板 HP 8216

运行内存 8.00 GB ( 2133 MHz)

硬盘 1000 GB

运行内存：16GB

（2）软件：

网页游戏的开发工具：Visual Studio Code

浏览器：火狐浏览器

2.2 visual Stdio code的优点

1、跨平台

它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和macOS上运行，因此无论您的设备所基于的平台如何，您都可以工作。

2、支持多种编程语言

当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。

3、可以更改所选文件的语言

它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。

4、提供特定语言的文档

它的网站包含特定于Visual Studio Code支持的通用语言的文档。

5、内置Git集成

Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。

6、智能感知

程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为Java，CSS，HTML，Type，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。

7、命令面板

按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。

2.3 前端开发技术

该游戏的前端开发以HTML、CSS、JavaScript语言开发。

HTML5技术以HTML4为标准去优化改良，更加贴合如今网络的快速发展需求。它由各种各样的技术融合而成，十分广泛地应用于互联网当中。

CSS是用来描述HTML代码中各元素样式的代码。

JavaScript是著名的高级编程语言之一，主要作用于开发前端Web页面。JavsScript的主要特点包括动态性、跨平台性与使用简单。

该游戏使用了HTML5中提供视频和音频两个多媒体标签，可以使用这两个标签往页面中插入视频和音频。

该网页游戏项目游戏数据资料的存储，是运用了HTML5中新增加的Web Storage技术，该技术可以在本地存储用户的具体操作数据。它不仅存储了大量的用户数据，同时还提供了本地的数据库引擎，使网页产生的数据获取和存储更加容易.

2.4 本章小结

本章开头介绍了本系统开发的环境，然后是所用到的最主要的开发工具：Visual Studio Code工具，谈及了其背景和现状。接着介绍了本系统前端开发所用到的语言与，分析了它们所拥有的特性与优势。

第三章 游戏的需求分析

在开始着手项目设计时首先得做好对游戏的需求分析，这样才能确保游戏的合理性，本章节将从游戏的可行性以及功能性、非功能性进行分析。

3.1 游戏的可行性分析

(1).技术可行性

这个游戏项目使用的都是前端最基础的css、javascript、html语言，该网页游戏同时也使用了HTML5中的Canvas、audio技术来实现游戏画布和音频。数据库用的前端HTML5中的本地存储Local Storage，使游戏在浏览器操作完直接保存在浏览器的本地存储中。

(2).HTML可行性

HTML网页制作主要有4个优点，分别是简单性，可以拓展性，兼容通用性和平台无关性。

(3). CSS可行性

CSS（层叠样式表）很多时候也称串样式列表。

(4).JavaScript可行性

javaScript是一种直接翻译类型的脚本语言，JavaScript是一种基于原型的，具有弱类型和动态类型的开发编程网页语言。[[]]HTML5 新增元素Canvas 画布，Canvas 提供了让使用者通过图形界面来更好的与应用数据交互操作。

3.2游戏功能性分析

根据游戏的实际需求，通过前期的可行性分析设计出整个游戏的模块。此游戏主要分为6个不同模式，游戏展现给用户进行使用。

游戏的选择功能包含有经典模式，禅模式，接力模式，街机模式，极速模式，闯关模式。

3.3.1 用例析取

该游戏所有可选择的游戏模式用例如图3-1所示。

图3-1游戏用户用例图

3.3.2用例规约

(1)用户进入经典模式

经典模式的用户活动如图3-2所示。

图3-2 经典模式活动图

经典模式的的主要操作的具体用例规范如表3-1所示。

表3-1 经典模式用例规约表

1. 用户游戏操作成功/失败，结束游戏

2. 跳转到游戏结束界面，显示用户的最佳纪录

3. 用户选择重新开始游戏或者返回主菜单

(2)用户进入禅模式

禅模式的用户活动如图3-4所示。

图3-4 禅模式活动图

禅模式的的主要操作的具体用例规范如表3-5所示。

表3-5 禅模式用例规约表

(3)用户进入接力模式

接力模式的用户活动如图3-6所示。

图3-6 接力模式活动图

接力模式的的主要操作的具体用例规范如表3-7所示。

表3-7 接力模式用例规约表

(4)用户进入街机模式

街机模式的用户活动如图3-8所示。

图3-8 街机模式活动图

街机模式的的主要操作的具体用例规范如表3-9所示。

表3-9 街机模式用例规约表

(5)用户进入极速模式

极速模式的用户活动如图3-10所示。

图3-10 极速模式活动图

极速模式的的主要操作的具体用例规范如表3-11所示。

表3-11 极速模式用例规约表

(6)用户进入闯关模式

闯关关卡一共有六关，由不同的6首曲目构成，每一关难度随着关卡数的递进而增大。闯关模式的具体用户活动如图3-12所示。

图3-12 闯关模式活动图

闯关模式的的主要操作的具体用例规范如表3-13所示。

表3-13 闯关模式用例规约表

3.3.3术语图

本章节内的术语表如表3-14所示。

表3-14 术语表

3.4系统非功能性分析

1.易用性：由于是基于网页设计的游戏，无需下载安装，打开即用；搭载有简单易懂的功能交互UI，方便使用。

2.可靠性：《躲避白色钢琴块》游戏每天二十四小时都能正常使用

3.范围：任何人均能正常使用本小程序

3.5 本章小结

本章节阐述了躲避白色钢琴块游戏的需求分析，由系统可行性可知本网页游戏是能够进行开发的，后续的系统功能性分析系统地展示了本网页游戏相关功能设计的用例规约活动图等，表明了本网页游戏的功能设计的合理性，最后的非功能性分析表明了本网页游戏能够安全地运行。