第四章 游戏的设计

本章节主要介绍本系统是如何设计出来的，分为三大部分，分别以游戏体系结构设计、游戏功能框架设计、各功能模块设计这几方面进行分析，全方面地了解本游戏的设计。

4.1游戏的体系结构设计

网页游戏主要是给的用户提供操作的模式，该小程序界面包含首页（选择游戏模式）、游戏界面（操作游戏）、结束页（游戏成功或者失败显示，得分显示）功能。[[]]

主要游戏模式的设计：

1.经典模式界面：

当选择经典模式游戏后，要求用户以最快的速度到达终点。如果碰到白块则失败，点击黑块数达到47则可以通关游戏。

2.禅模式界面：

当选择禅模式游戏后，要求用户在30秒内看尽可能多的黑色钢琴块。

3.接力模式界面：

当选择接力模式游戏后，要求用户在10秒内正确按下50个方块，然后会有新的10秒供玩家来完成新的50个色块。

4.街机模式界面：

当选择街机模式游戏后，黑白色钢琴块会逐渐下落，要求用户快速地按下一个个黑色块，随着时间的递增，黑白钢琴块的速度会越来越快。如果黑色钢琴块触碰底部则表示游戏挑战失败，游戏结束。

5.极速模式界面：

当选择极速模式游戏后，黑白色钢琴块会逐渐下落，要求用户快速地按下一个个黑色块，随着时间的递增，黑白钢琴块的速度会越来越快，这个模式类似于街机模式，但没有最高速限制, 挑战用户极限。

6.闯关模式界面：

当选择闯关模式游戏后，用户选择关卡，要求用户以最快的速度到达终点。如果碰到白色钢琴块则表示游戏挑战失败，游戏难度随着关卡而递增。

该游戏的各个模式的体系结构如图4-1所示。

图4-1 游戏模式体系结构图

4.2 游戏功能框架设计

躲避白色钢琴块网页游戏根据游戏的需求，设计出各个游戏模块功能。本网页游戏模块功能分为记时，计分，下落，运行，游戏区域几个部分，根据用户选择的不同模式设置不同的参数来进行游戏。

本网页游戏的总体功能结构如图4-2所示。

图4-2 游戏操作体系结构图

4.3 各功能模块设计

该游戏具有计时器记录游戏的开始到结束时间，计分器来记录游戏的点击数量，同时游戏的canvas顶部标题初始时会有游戏操作对应模式的使用说明，当开始游戏后会切换成该模式所对应的速度，时间或者点击数，该游戏的操作区主要在居中的canvas画布，另外有静音按钮和返回主页按钮。

该游戏整体的所有类图如图4-3所示。

图4-3 游戏总体类图

然后，需要再次从玩家和设计人员的角度分析出这个游戏设计的具体用例图，如图4-2所示，在这个图中可以清晰的看到对应的需要初始化和需要架构的部分，主要页面的基础部分包括游戏标题，计时器，计分器，游戏页面设计的操作区。

其中游戏标题显示游戏的分数、玩法说明、游戏时间、游戏模式。而计分器计算玩家正确操作点击的黑色方块数。

本游戏的游戏操作用例如图4-4所示。

图4-4 游戏操作用例图

躲避白色钢琴块游戏需要根据从上到下落下的钢琴块的点击来实现消除钢琴块的作用，如果钢琴块落地或者错误点击白色钢琴块则表示游戏失败，辅以计时器计时，计分器。

本游戏的系统流程图如图4-5所示。

图4-5 程序系统流程图

4.3.1.标题

在该游戏中标题的作用在于显示信息，完成用户对游戏操作、运行、得分的区别与理解，实现传递信息的作用。

该游戏项目的标题显示即显示对应游戏模式的操作说明，当游戏刚刚开始运行时显示当前模式的玩法，玩家点击最底端的“开始”黑色键后游戏开始，标题也就对应切换为该模式的分数、倒计时、或者速度。

4.3.2.计时器与计分器

该游戏中计时器的作用在于计算当前游戏在特定模式下从起始游戏时间到在该模式下该局游戏结束所花费的时间，如果用户超过了该游戏当前对应模式规定的时间，那么游戏会提示游戏挑战失败。计时器除了可以记录游戏的总花费时长，还可以根据游戏时长来判断出最佳的游戏挑战时间为多少。

计时器功能用到 setTimeout函数。

该游戏中计分器的作用在于计算当前游戏在特定模式开始到游戏结束所点击的黑色方块数量，如果玩家达到游戏对应模式规定的需要点击的黑色方块数则代表游戏挑战成功，相反则挑战成功。计分器除了可以记录游戏的点击数，还可以根据游戏点击数来判断出最佳的游戏点击分数为多少。

4.3.3.游戏操作区

本游戏在主页面选择模式或者关卡后会依次从左右两边各划出3格黑白色钢琴块，每个钢琴块上有着对应供玩家选择的游戏模式或者关卡。该区域就是游戏操作区。

当玩家选择模式或者关卡后会切换为4行4列的16格子，每个格子的背景底色是白色方块。因为是网页游戏依据玩家用鼠标单击来实现对游戏的操作，又考虑到人类的视角在60°上下，所以没有设置满屏的游戏操作区域，而设置了4行4列的模式，符合日常玩家使用习惯，同时也会更加美观，不会有紧凑压抑感。

下一步需要让操作界面，有随机的黑色钢琴块产生。因为。该游戏项目的名称叫做躲避白色钢琴块音乐游戏，换句意思来说就是点击黑色块，躲避白色块，如果遗漏了黑色键或者误踩到白色键，那么就代表游戏结束。该游戏黑色键在每一行都会随机生成，在4个格子里的其中一个，黑色的这个格子需要用户通过鼠标来点击，用户通过点击黑色的格子来使游戏正常的运行。

计时器或者计分器，在开始游戏的同时去启动。当用户误点击白色格子块或者遗漏了黑色格子块的同时就停止计时和停止计分。当游戏挑战成功或失败后，都会跳转到游戏分数显示界面，提醒玩家游戏成功或者游戏失败，并同时判断当前是否为最佳的成绩，如果是最佳的成绩，则显示新记录，如果不是最佳成绩，则显示以往最佳的成绩。

在游戏显示成绩的界面下方，有重新开始游戏和返回上一页界面的按钮。玩家通过鼠标点击来进行相应的操作。如果玩家点击重新开始游戏，那么整个游戏界面就会在该模式下重新刷新一次，回到最开始游戏等待玩家，点击开始按键界面，首先先显示该模式下游戏的玩法，当玩家点击开始后则又重新开始游戏的运行，计时器和计分器则重新开始计时或者记分。

该游戏使用的是html5新增加的本地存储功能web storage。当用户在一个浏览器上运行该游戏时，该本地存储web storage会记录当前游戏的对应时间，模式选择，关卡选择,以及分数。

4.3.4游戏页面整体样式

在这里主要还是css层叠样式表的作用起到了效果。在页面上的整体的颜色显示由下面的代码实现：

 html {
        height: 100%;
        background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
      }

4.4本章小结

本章节对本系统进行了详细设计分析，首先介绍了各功能模块的设计，配以时序图使大家对本系统的用例行为顺序有个大致的了解。

第五章 游戏的实现

本章节主要为游戏实现，该章节展示本游戏中各个模式的主要功能代码和界面，具体有游戏经典模式的实现、游戏禅模式的实现，游戏接力模式的实现、游戏街机模式的实现、游戏极速模式的实现、游戏闯关模式的实现。

5.1 游戏经典模式的实现

打开游戏进入游戏主页面，如图5-1所示。

图5-1 游戏起始界面

在游戏主页面，点击“游戏模式”跳转到主界面，如图5-2

图5-2 游戏模式选择界面

当在主界面选择“经典”，游戏进入经典模式，如图5-3所示。

图5-3 游戏经典模式初始界面

经典模式的游戏参数设置：

(this.fallNum = 47),

(this.maxTouchTimes = 50),

游戏在经典模式下的运行操作如图5-4所示。

图5-4 游戏经典模式游戏中界面

当用户在经典模式时误触白色方块或者遗漏黑色方块，则游戏失败，出现失败的界面并显示最佳成绩，如图5-5所示。

图5-5 游戏经典模式游戏失败界面

如果用户成功点击了47块黑色方块则，街机模式下游戏挑战成功，出现成功的界面，并且根据用户过关的时间来判断是否为最佳成绩，如图5-6所示。

图5-6 游戏经典模式游戏成功界面

5.2 游戏禅模式的实现

当在“游戏模式”界面选择“禅”，游戏进入禅模式，初始时会显示游戏规则，即在30秒内正确点击黑色方块，如图5-7所示。

图5-7 游戏禅模式游戏开始界面

当用户在禅模式下运行游戏时，会显示30秒的倒计时，游戏操作的界面如图5-8所示。

图5-8 游戏禅模式游戏中界面

用户如果在30秒内没有误触白块或者遗漏黑块，则游戏挑战成功，弹出图5-9所示。

图5-9 游戏禅模式游戏结束界面

5.3 游戏接力模式的实现

在主界面中选择模式选择后，游戏跳转到主界面，如图5-10所示。

图5-10 游戏模式选择起始界面

当在模式选择界面选择“接力”后，游戏进入接力模式，初始会显示游戏的规则，如图5-11所示。

图5-11 游戏接力模式游戏起始界面

接力模式的游戏参数设置：

 (this.touchTimes2 = 0),
 (this.recordGameModule2 = 1e4),
 (this.maxTouchTimes = 30),
 (this.dateGameModule1 = null),

在接力模式下，游戏运行操作时会显示10秒的倒计时，如图5-12所示。

图5-12 游戏接力模式游戏中界面

当在接力模式中超过时间，会提醒“时间到”，并终止游戏，如图5-13所示。

图5-13 游戏接力模式游戏中界面

显示接力模式的最终成绩显示界面，如图5-14所示。

图5-14 游戏接力模式游戏结束界面

5.4 游戏街机模式的实现

在主界面中选择模式选择后，游戏跳转到主界面，如图5-15所示。

图5-15 游戏模式选择起始界面

当在游戏模式界面选择“街机”，游戏进入街机模式，如图5-16所示。

图5-16 游戏街机模式游戏起始界面

街机模式的游戏参数设置：

(this.fallSpeed = 9)

(this.topTitle = “00”)

街机模式设置方块下落的速度递增为0.005

(this.fallSpeed += 0.005)

街机模式操作成功后的结束界面如图5-17所示。

图5-17 游戏街机模式游戏结束界面

5.5 游戏极速模式的实现

在主界面中选择模式选择后，游戏跳转到主界面，如图5-18所示。

图5-18 游戏模式选择起始界面

当在游戏模式界面选择“极速”后，游戏进入极速模式，该模式下方块下落速度会比其他模式更快，没有限制游戏时间，如图5-19所示。

图5-19 游戏极速模式游戏结束界面

极速模式的游戏参数设置：

 (this.fallSpeed = 9),
(this.recordGameModule4 = 0),

游戏时会显示当前的游戏速度，用户操作时显示的界面如图5-20所示。

图5-20 游戏极速模式游戏中界面

速度递增0.005

this.fallSpeed += 0.005;

游戏从速度3.7开始

var h = (3.7 +(c - this.dateGameModule4) / 1e4 ).toFixed(3);

当用户误触白色方块或者遗漏黑色方块时，极速模式下的游戏结束，显示最终的成绩界面，如图5-21所示。

图5-21 游戏极速模式游戏结束界面

5.6 游戏闯关模式的实现

打开游戏跳转到主界面，如图5-22所示。

图5-22 游戏起始界面

当在主界面选择“关系关卡”，游戏进入闯关模式，共有6个关卡，每个关卡随着游戏的关卡数难度递增，用户选择关卡进行游戏，如图5-23所示。

图5-23 游戏闯关模式选择关卡界面

闯关模式里的关卡和街机模式类似，设置参数：

this.fallNum = 47
this.maxTouchTimes = 50

用户在闯关模式下的界面会显示当前的点击黑色方块数量在顶端，如图5-24所示。

图5-24 游戏闯关模式游戏中界面

闯关模式下当游戏挑战成功，弹出结束界面，如图5-25所示。

图5-25 游戏闯关模式结束界面

5.7 本章小结

本章节展示了游戏的功能模块设计和实现，配以图文和展示代码重点说明该游戏各模式主要功能的设计实现思路。

第六章 游戏测试

在完成了游戏的设计与实现后，虽然游戏已经成型，但为了确保游戏能够正常合理地运行，还得对游戏进行一系列的测试，并从中发现问题解决问题。让游戏能够放心且运作良好的交给用户们去使用。

6.1 测试原则

本次对游戏进行测试的原则是将自己当做一般用户，以用户的角度去模拟用户的游戏操作，排查游戏的存在的问题与优化游戏，提升未来用户的使用体验。

6.2测试方法

本游戏测试模拟了玩家的成功操作与失败操作，成功操作即在没有误触白色方块以及遗漏黑色方块的条件下，根据模式的对应规定，在限定时间或者限定的点击数内完成即代表操作成功，相反如果误触白色方块或者遗漏黑色方块，则游戏挑战失败。

通过模拟玩家的成功操作与失败操作可以更好的测试出该游戏项目各个功能是否符合正常的逻辑操作模式，通过模拟测试也更系统的检测出游戏的不足，方便开发改正。

6.3游戏测试用例

1.躲避白色钢琴块网页游戏的经典模式测试（游戏操作成功）：用户进入经典模式后，避开白色钢琴块且没有让黑色钢琴块触底。

经典模式成功操作的用例如表6-1所示。

表6-1 经典模式成功测试表

用例的名称 网页游戏的经典模式（游戏操作成功）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的经典模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“经典”键->进入经典模式->游戏开始->按键都是黑->游戏结束”来运行程序

续表6-1 经典模式成功测试表

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

2.躲避白色钢琴块网页游戏的经典模式测试（游戏操作失败）：用户进入经典模式后，误触白色钢琴块。

经典模式失败操作的用例如表6.3.2所示。

表6-2 经典模式失败测试表

用例的名称 网页游戏的经典模式（游戏操作失败）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的经典模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“经典”键->进入经典模式->游戏开始->按键不是黑->游戏结束”来运行程序

预期的测试结果 在用户成功误触白色钢琴块的情况下，用户操作游戏失败，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

3.躲避白色钢琴块网页游戏的禅模式测试（游戏操作成功）：用户进入禅模式后，避开白色钢琴块且没有让黑色钢琴块触底。

禅模式成功操作的用例如表6-3所示。

表6-3 禅模式成功测试表

用例的名称 网页游戏的禅模式（游戏操作成功）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的禅模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“禅”键->进入禅模式->游戏开始->按键都是黑->时间到->游戏结束”来运行程序

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

4.躲避白色钢琴块网页游戏的禅模式测试（游戏操作失败）：用户进入禅模式后，没有避开白色钢琴块且让黑色钢琴块触底。

禅模式失败操作的用例如表6-4所示。

表6-4 禅模式失败测试表

用例的名称 网页游戏的禅模式（游戏操作失败）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的禅模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“禅”键->进入禅模式->游戏开始->按键不是黑->游戏结束”来运行程序

预期的测试结果 在用户没有成功点击所有的黑色钢琴块，且误触白色钢琴块的情况下，用户操作游戏失败，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

5.躲避白色钢琴块网页游戏的接力模式测试（游戏操作成功）：用户进入接力模式后，避开白色钢琴块且没有让黑色钢琴块触底。

接力模式成功操作的用例如表6-5所示。

表6-5 接力模式成功测试表

用例的名称 网页游戏的接力模式（游戏操作成功）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的接力模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“接力”键->进入接力模式->游戏开始->按键都是黑->游戏结束”来运行程序

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

6.躲避白色钢琴块网页游戏的接力模式测试（游戏操作失败）：用户进入接力模式后，没有避开白色钢琴块且或让黑色钢琴块触底。

接力模式失败操作的用例如表6-6所示。

表6-6 接力模式失败测试表

用例的名称 网页游戏的接力模式（游戏操作失败）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的接力模式是否正常

续表6-6 接力模式失败测试表

测试的流程 按照“进入页面->游戏初始化->按键是“接力”键->进入接力模式->游戏开始->按键不是黑->游戏结束”来运行程序

预期的测试结果 在用户没有成功点击所有的黑色钢琴块，并且误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏失败，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

7.躲避白色钢琴块网页游戏的街机模式测试（游戏操作成功）：用户进入街机模式后，避开白色钢琴块且没有让黑色钢琴块触底。

街机模式成功操作的用例如表6-7所示。

表6-7 街机模式成功测试表

用例的名称 网页游戏的街机模式（游戏操作成功）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的街机模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“街机”键->进入街机模式->游戏开始->黑白块自动下落->按键都是黑->黑块触底->游戏结束”来运行程序

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

8.躲避白色钢琴块网页游戏的街机模式测试（游戏操作失败）：用户进入街机模式后，没有避开白色钢琴块或者让黑色钢琴块触底

街机模式失败操作的用例如表6-8

表6-8 街机模式失败测试表

用例的名称 网页游戏的街机模式（游戏操作失败）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的街机模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“街机”键->进入街机模式->游戏开始->按键不是黑->游戏结束”来运行程序

续表6-8 街机模式失败测试表

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

9.躲避白色钢琴块网页游戏的极速模式测试（游戏操作成功）：用户进入极速模式后，避开白色钢琴块且没有让黑色钢琴块触底。

极速模式成功操作的用例如表6-9所示。

表6-9 极速模式成功测试表

用例的名称 网页游戏的极速模式（游戏操作成功）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的极速模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“极速”键->进入极速模式->游戏开始–>黑白块自动下落->按键都是黑->黑块触底->触底黑块闪烁->游戏结束”来运行程序

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

10.躲避白色钢琴块网页游戏的极速模式测试（游戏操作失败）：用户进入极速模式后，没有避开白色钢琴块或者让黑色钢琴块触底。

极速模式失败操作的用例如表6-10所示。

表6-10 极速模式失败测试表

用例的名称 网页游戏的极速模式（游戏操作失败）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的极速模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“极速”键->进入极速模式->游戏开始->按键不是黑->游戏结束”来运行程序

预期的测试结果 在用户没有成功点击所有的黑色钢琴块，误触白色钢琴块或者让黑色钢琴块触底的情况下，用户操作游戏失败，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

11.躲避白色钢琴块网页游戏的闯关模式测试（游戏操作成功）：用户进入闯关模式后，避开白色钢琴块且没有让黑色钢琴块触底

闯关模式成功操作的用例如表6-11所示。

表6-11 闯关模式成功测试表

用例的名称 网页游戏的闯关模式（游戏操作成功）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的闯关模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“闯关”键->进入闯关模式->选择关卡->游戏开始->按键都是黑->游戏结束”来运行程序

预期的测试结果 在用户成功点击所有的黑色钢琴块而没有误触白色钢琴块及让黑色钢琴块触底的情况下，用户操作游戏成功，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

12.躲避白色钢琴块网页游戏的闯关模式测试（游戏操作失败）：用户进入闯关模式后，没有避开白色钢琴块或者让黑色钢琴块触底

闯关模式成功操作的用例如表6-12所示。

表6-12 闯关模式失败测试表

用例的名称 网页游戏的闯关模式（游戏操作失败）

测试的目的 测试用户操作躲避白色钢琴块网页游戏的闯关模式是否正常

测试的流程 按照“进入页面->游戏初始化->按键是“闯关”键->进入闯关模式->选择关卡->游戏开始->按键都是黑->游戏结束”来运行程序

预期的测试结果 在用户没有成功点击所有的黑色钢琴块并且误触白色钢琴块，或者让黑色钢琴块触底的情况下，用户操作游戏失败，然后跳转到游戏的结束页显示游戏成绩和最佳成绩，用户选择退出到主界面还是重新开始该关卡

实际的测试结果 实际的测试结果和预期的测试结果一样。

经过上面12条路径经行，发现游戏可以正确运行，也就是说游戏的每个模式都可以按照预定的游戏模式要求正常运行。

6.4本章小结

本章节主要介绍了对该游戏进行的测试，测试了各种功能均没有发现问题，保证游戏能够正常上线运行。

参考文献

[1]乔道迹, 丁逸群. 试谈HTML5中的canvas元素在围棋游戏中的应用[J]. 电脑编程技巧与维护, 2022(1):4.

[2]王萍利. 基于HTML5的Web前端框架设计及研究[J]. 电脑编程技巧与维护, 2021(12):3.

[3]周春吟. HTML5与CSS 3在Web前端开发中的应用研究[J]. 信息与电脑, 2021, 33(21):3.

[4]朱倩. JavaScript在HTML5视频和音频控制中的应用[J]. 无线互联科技, 2021, 18(18):3.

[5]吴蕾. HTML5的前端本地化存储技术研究[J]. 山西能源学院学报, 2017, 30(4):3.

[6]梁艳玲. 基于HTML5的Web前端开发技术研究[J]. 电子技术与软件工程, 2020.

[7]刘心美. DIV+CSS网页布局的设计与实现[J]. 科技资讯, 2021, 19(30):3.

[8]杜佳玲, 徐建华, 杜雨航,等. 基于HTML5的海底鱼群大作战游戏设计与实现[J]. 电脑知识与技术:学术版, 2021, 17(31):3.

[9]陈庚, 朱晓庆, 吴元杰,等. Web前端开发中HTML5的应用探讨[J]. 信息记录材料, 2021, 22(9):2.

[10]阿依佳肯·阿曼太. 基于HTML5的简单骰子游戏的设计与实现[J]. 数字技术与应用, 2020, 38(10):3.

[11]许悦. 基于网页游戏UI界面的若干设计分析[J]. 黑龙江科技信息, 2020, 000(008):94-95.

[12] Wahyudi W , Ambarwati M , Indarini E . DEVELOPMENT OF WEB GAME LEARNING MATERIALS FOR PRIMARY SCHOOL STUDENTS[J]. Infinity Journal, 2019, 8(2):199.

[13]Chen, Yu. Studies on Web Game Interface Design[J]. Applied Mechanics & Materials, 2013, 401-403:1756-1759.