基于HTML5的“闯关游戏式”移动学习平台的开发和设计

基于HTML5的“闯关游戏式”移动学习平台的开发和设计

陈宏扬

(广东轻工职业技术学院，广东广州 510300)

［摘 要］慕课平台建设在我国已有一定规模，但慕课学习平台难以长期吸引那些没有学习兴趣和学习自主性的学生。随着互联网教育的快速发展，教育游戏越来越热，游戏化学习思维也越来也得到社会认可。如果能够在慕课平台融入游戏化学习功能，让学生在学习中体验到游戏的互动性、趣味性、竞争性及即时反馈等特性，必然能够提升在线学习的乐趣，激发学生学习动机。为了适应当代大学生富有激情和挑战的特点，提出了基于HTML5的“闯关游戏式”移动学习平台的开发，以期能够提升慕课平台的学习效果。

［关键词］移动学习；教育游戏；游戏化学习；闯关游戏式

The Development and Design of the Passing Game Mobile Learning Platform

Based on HTML5

CHEN Hongyang

(Guangdong Industry Polytechnic，Guangzhou 510300，China)

Abstract：MOOC platform construction has a certain scale in China, but it is difficult to appeal to the students who

have no interest and learning autonomy in learning. With the rapid development of internet education, educational

games become more and more hot, learning thinking based on game is also increasingly recognized by society. If

game learning function can be integrated into MOOC platform, students can experience the game of interactive,

interesting, competitive and instant feedback and other characteristics in the study, then it will be able to enhance

the fun of online learning, to stimulate students to learn motivation. In order to adapt to the characteristics of

passion and challenge of college students, the paper putted forward the development of the "HTML5" mobile

learning platform, in order to improve the learning effect.

Key words：mobile learning; educational game; Game based learning;

Passing game

随着教育信息化改革的不断深入以及“互联网+”时代的来临，出现了大量的在线自主学习平台，包括MOOC、SPOC等，相较于传统教学模式，这些平台更加强调学生学习的积极主动性和自觉性,如果缺乏学习动机，在线学习就难以持续[1]。通过研读现有的关于中美慕课的研究论文发现，大部分慕课平台在注册一门课后的一两个星期之内平均有50%的学习者会退课[2]，大部分学习者都是图个尝鲜，很难长时间坚持学习，其中老师的教学方法不吸引人、学习过程枯燥及教学资源无趣是主要原因，学生更愿意把大部分课余时间花在感兴趣的事情上，例如微信、QQ以及手机游戏上，这些APP所带来的互动性、趣味性、竞争性及即时反馈等特性促使学生有强烈的使用动机。如果能够利用现代信息技术，将这些特性植入到移动学习平台中，并引入闯关式教学项目，让学生的学习过程变成使用手机打通关游戏，必定能激起学生的学习兴趣，进而激发他们的学习动机。

目前，国内的悟空识字、乐教乐学网站、Mamagame唐伯虎点秋香等学习网站已经先行做了尝试，开发了基于FLASH的游戏化学习功能，来增加课程的趣味性，并利用积分、徽章、排行榜等元素来激发学生的挑战心，获得了一定的成效。但是FLASH开发的在线教育游戏教育价值不是很高，而且技术上存在如加载速度慢、必须安装flash插件、高耗能、苹果设备不支持等缺点，导致了移动端学习体验不佳，在这样的背景下，本文结合现慕课学习平台的功能,并考虑到当代大学生爱玩手机以及富有激情和挑战的特点，提出了利用HTML5网页技术来开发“闯关游戏式”移动学习平台。

1 基于HTML5的游戏化学习平台的优势及意义

HTML5是HTML未来发展的新方向，相对于HTML4提供了很多新的特性，比如跨平台、跨终端、1

本地离线存储、开发游戏的Canvas元素、Web socket多线程应用开发、扩展的HTML DOM API等，为开发丰富的移动端WEB提供了强大的工具。随着移动互联网的快速发展以及移动终端设备硬件的持续升级，基于浏览器的Web应用和本地APP的差距越来越小，使用HTML5来开发游戏化移动端学习平台，既有利于推广WEB新技术，给用户带来更优质的体验，而且有利于创新教育软件及游戏化学习平台，推动游戏化学习的发展。其中利用HTML5技术来开发游戏化学习平台的意义主要体现在以下6个方面：

（1）开发实现标准化：利用HTML5技术，直接可以用浏览器内嵌的功能来开发教学平台的教育游戏和动画，在2D绘图效果上可以直接媲美FLASH，无需任何插件即可实现对教学视频、教学动画、教学音频的播放，避免了需要安装插件所带来的不稳定性、不安全性，同时减少硬件资源耗费。

（2）更加丰富的页面效果：利用HTML5技术中的CSS3即层叠样式表可以轻松实现如圆角、渐变、旋转和阴影等众多特性，而这些效果以前都需要借助JavaScript来实现。使用这些效果，能够丰富游戏化学习平台的扁平化设计，从而达到丰富动态的用户体验。

（3）结构化、简单化的设计：相较于其它教学平台开发APP作为移动端应用，HTML5的结构化标签和新的表单控件，能够实现页面结构的语义化，提高了开发人员的工作效率，提升了代码的简洁性，提高了游戏化学习平台的加载速度。

（4）跨平台、跨终端特性：相较于基于FLASH的教育游戏，不需要下载应用程序，对平台终端没有要求，无论是Android、iOS、Windows、还是Linux系统，使用大部分浏览器运行都能随时获得游戏化学习的乐趣，而且更新维护简便。

（5）低耗能：在HTML5出现之前，网页类游戏多是针对PC端进行开发的，所以并不适合在移动端进行推广和普及，因为Flash插件的应用，对于移动端来讲，非常耗电，而HTML5耗费的电量和硬件资源比Flash要小很多，在稳定性方面也更加良好，能为游戏化学习平台的移动端续航能力提供更多技术保障。

（6）开放性：使用HTML5设计游戏化学习平台，具有开放性，不会被单个公司所有或者控制，这使得基于HTML5的游戏化学习平台比其它平台更具有持久的生命力[3]。

2．游戏化学习平台开发与设计

2.1系统总体架构

总体框架参照慕课平台“碎片化资源、结构化课程”的指导思想并融入闯关式游戏化学习的思路，结合HTML5的开发技术，搭建了游戏化移动学习平台的框架模型（如图1所示）。模型由用户层、应用层和资源层组成，层次之间的功能通过接口相互调用，每个层次的模块既可以独立使用，也可以结合其它模块使用，为学生、教师、社会学习者以及企业员工提供了游戏化学习功能、用户学习空间、模拟测验闯关训练、考试闯关、资源检索以及学习过程行为分析等，建立了底层资源与上层用户之间沟通的桥梁，将丰富的教学资源有效的组织，整合与呈现。

在整个平台系统模型中，用户层包括学生用户、教师用户、社会学习者、以及企业员工等，在后台中管理员可以对不同身份的用户赋予不同的学习和管理权限，还可以进行用户审核、添加、删除。应用层是为用户层与资源层的交互提供相互通信的一系列图形UI，平台中所有交互的流程均可在应用层上面实现。在这个层次上，使用HTML5的DOM元素（文档对象模型）来设计整个系统的功能模块，并采用扁平化设计，让“信息”本身重新作为核心被凸显出来，提供丰富的媒体交互性，使用AJAX技术来实现整个平台子系统数据的及时更新，按需读取，减少屏幕的刷新和闪烁。在开发游戏场景时，使用Canvas元素，它通过坐标体系绘制路径，矩形、圆形、字符和添加图像，为了能充分利用Canvas提供的API，需要通过HTML5对象的内置对象getContext 方法获得上下文。资源层主要由数据库系统、文件系统、其它资源库及其数据接口API构成，本文数据库采用MysqL数据库系统，创建平台系统所需的实体表。

2

图1 “闯关游戏式”移动学习平台框架模型

2.2“闯关游戏式”系统模块设计

平台大部分功能主要依照“闯关游戏式”的思维来设计。学生在学习过程中，参与课程学习活动积累经验值，并阅读通关秘籍，代入角色进入模拟测试冲关以及守关挑战。教师根据学生实际的学习情况，设置考试闯关的难度系数以及相应关卡的题目[4]。该学习过程共分为3个阶段，每个阶段对应不同的系统功能模块。

1.自主学习：对应游戏化课程系统，包含计学习模块、笔记模块、测试模块、讨论模块、问答模块、生命值系统以及选课模块。学习模块以章节为结构，每个知识点提供微课、课件、思维导图、通关秘籍、评价指标等课程资源。学生通过看视频、参与讨论、回答问题以及做课堂笔记来获得生命值，当生命值大于60分，就可以进入模拟测验阶段。

2.模拟测试阶段：对应题库中心及“闯关游戏式”模拟测验平台。题库中心系统包含题库管理（导入、导出、在线设计）模块以及成绩管理模块。教师汇总课程题目，按照难、中、易三种维度将题目导入平台，导入时选择题目所属的知识点，并制定知识点的通关秘籍。模拟测验子系统包含闯关任务管理模块、评价模块、排位模块、经验值模块以及角色扮演RPG系统等功能模块。RPG系统把角色分为两类，一类是骑士角色，设计一个手持长剑的骑士形象，由冲关学生充当。一类是守关BOSS，本文使用王者荣耀里的英雄角色形象，增强学生的游戏代入感， BOSS的召唤师由本校师生、外校学生以及企业专家充当，他们是关卡的挑战者，也是守关者，时刻迎接学习者挑战。按照题目的难易度，题量、以及冲关时间把冲关关卡分为10级，如下表所示：

表1 游戏化学习平台关卡系统

关卡等级

1级

2级

3级

4级

5级

6级

7级

8级

9级

10级

题目难度

简易

简易

简易

简易

中等

中等

中等

困难

困难

困难

题量

10题

12题

15题

20题

10题

12题

15题

12题

15题

20题

时间

<=60<=50<=40<=30<=50<=30<=20分分分分分分分正确率

>=70

>=80

>=90

>=100

>=70

>=80

>=90

BOSS形象

亚瑟

刘备

赵云

李白

项羽

李逵

老夫子

庄周

张良

武则天

3

<=40分钟 >=100

<=30分钟 >=90

<=20分钟 >=100

学生闯关前，先阅读教师提供的知识点的通关秘籍，并创建知识点闯关任务，创建任务时可以根据自身学习情况选择相应的题目难度级别、题目结构以及闯关关卡等级。比如学生甲在计算机网络形成与发展的知识点的闯关任务上选择简易的题目类型，并选择关卡等级3，闯关任务右侧会出现赵云进行守关，召唤师的名字为他的同班同学乙，并提示题目数量及闯关时长，如图2所示。闯关时，学生甲必须在40分钟内做完所有题目，并保证正确率达到90%以上，则通关成功，那么骑士就走下来，把赵云杀掉，然后获得经验值，击杀过程设计一些场景动画提升娱乐性，如BOSS躺倒、求饶等效果让学生获得游戏快感。该阶段闯关系统允许学生进行多次冲关，并保留最好的单次成绩为最终成绩，成绩越高，获得的经验值也越高。如果学生甲在该关卡所花的时间比学生乙短，正确率也高于学生乙，那么学生甲将被系统设定为该关卡的BOSS召唤师，并获得该关卡的附加经验值，同时扣除学生乙在这关卡获得的附加经验值，学生通过某个知识点的闯关后，就能进入下一个知识点的闯关，从而实现了学习行为的可控化。学生完成的知识点闯关任务越多，打败的BOSS越多，经验值就越高，排位模块综合平台所有用户模拟测试情况进行排位，经验值越高，排位越靠前。

图2 模拟测试闯关任务UI界面

3.在线考试阶段：对应在“闯关游戏式”考试平台，该系统功能与模拟测试系统类似，但是学生不能自行设置题目等级、考试关卡等级以及题目结构，由老师根据游戏化学习行为分析系统的学习数据，进行考试的统一设定，学生完成题目闯关后，客观题可以由系统直接评定，主观题教师可以在后台进行打分，学生通关闯关考试时，成绩计入学生期末综合评分并转换为经验值，成绩越高，经验值越高。如果不能通过，则老师可以在某个时间段设置学生有一次重新挑战机会，如果还是不通过，则必须对课程进行重修。考试系统排位模板综合往届生的考试成绩进行排名，最高分者为考试的守关者，守关者也可以是老师自己以及企业专家。

2.3其它模块设计

本平台还设计了用户学习空间、培训中心以及游戏化学习行为分析系统。用户学习空间主要为学生、教师、社会学习者以及企业员工提供游戏化学习、教学、工作、交流等功能，并为用户分配5G的存储空间。培训中心用于企业课程建设，并提供课程定制功能，满足企业培训。游戏化学习行为分析系统用于记录用户的游戏化学习轨迹、学习期间、学习内容、学习效果，展现用户的游戏化学习过程，为在线考试以及其它教学活动提供数据决策。

4

3结语

基于HTML5及相关技术开发的“闯关游戏式”移动学习平台，把学习过程转换成一场RPG游戏，加强了线上学习的乐趣，学习者通过并向身边的同学、老师、企业专家进行课程知识挑战获得排名，增强了学习动机，同行如果能潜心研究，必然能为增加慕课平台粘性以及游戏化学习思维的推广找到一个新方向。

参考文献

[1]尚俊杰·游戏化学习的价值及未来发展趋势[J]·上海教育,2016,（35）:45-47.

[2] Caroline M. Hoxby. The Economics of Online Postsecondary Education:MOOCs,Nonselective

Education,and Highly Selective Education[EB/OL].:///papers/w19816.

[3]黎志雄,黄彦湘,陈学中·基于HTML5游戏开发的研究与实现[J]·东莞理工学院学报,2014,（10）:49-53.

[4]刘志锋,魏振华,蒋年德,王红玲,徐玮·闯关游戏思想在C/C++语言程序设计课程教学中的应用研究[J]·东莞理工大学学报,2014,（04）:390-393.

基金项目：1.广东省教育厅2015年高校教育技术教学改革研究项目“高职院校教学信息化教学能力培养与提升途径的研究”（项目编号：粤教高函【2016】16号2015003）。

2.

广东轻工职业技术学院教改项目“基于校企共建的网络视频公选课平台的移动学习研究”（项目编号：粤轻院高【2016】2号JG201615）

5