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

基于HTML5的“闯关游戏式”移动学习平台的开发和设计陈宏扬(广东轻工职业技术学院，广东广州510300)［摘要］慕课平台建设在我国已有一定规模，但慕课学习平台难以长期吸引那些没有学习兴趣和学习自主性的学生。

随着互联网教育的快速发展，教育游戏越来越热，游戏化学习思维也越来也得到社会认可。

如果能够在慕课平台融入游戏化学习功能，让学生在学习中体验到游戏的互动性、趣味性、竞争性及即时反馈等特性，必然能够提升在线学习的乐趣，激发学生学习动机。

为了适应当代大学生富有激情和挑战的特点，提出了基于HTML5的“闯关游戏式”移动学习平台的开发，以期能够提升慕课平台的学习效果。

［关键词］移动学习；教育游戏；游戏化学习；闯关游戏式The Development and Design of the Passing Game Mobile Learning PlatformBased on HTML5CHEN 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提供了很多新的特性，比如跨平台、跨终端、本地离线存储、开发游戏的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数据库系统，创建平台系统所需的实体表。

图1 “闯关游戏式”移动学习平台框架模型2.2“闯关游戏式”系统模块设计平台大部分功能主要依照“闯关游戏式”的思维来设计。

学生在学习过程中，参与课程学习活动积累经验值，并阅读通关秘籍，代入角色进入模拟测试冲关以及守关挑战。

教师根据学生实际的学习情况，设置考试闯关的难度系数以及相应关卡的题目[4]。

该学习过程共分为3个阶段，每个阶段对应不同的系统功能模块。

1.自主学习：对应游戏化课程系统，包含计学习模块、笔记模块、测试模块、讨论模块、问答模块、生命值系统以及选课模块。

学习模块以章节为结构，每个知识点提供微课、课件、思维导图、通关秘籍、评价指标等课程资源。

学生通过看视频、参与讨论、回答问题以及做课堂笔记来获得生命值，当生命值大于60分，就可以进入模拟测验阶段。

2.模拟测试阶段：对应题库中心及“闯关游戏式”模拟测验平台。

题库中心系统包含题库管理（导入、导出、在线设计）模块以及成绩管理模块。

教师汇总课程题目，按照难、中、易三种维度将题目导入平台，导入时选择题目所属的知识点，并制定知识点的通关秘籍。

模拟测验子系统包含闯关任务管理模块、评价模块、排位模块、经验值模块以及角色扮演RPG系统等功能模块。

RPG系统把角色分为两类，一类是骑士角色，设计一个手持长剑的骑士形象，由冲关学生充当。

一类是守关BOSS，本文使用王者荣耀里的英雄角色形象，增强学生的游戏代入感，BOSS的召唤师由本校师生、外校学生以及企业专家充当，他们是关卡的挑战者，也是守关者，时刻迎接学习者挑战。