基于HTML5技术的移动教学游戏设计和开发

来源:用户上传      作者:董娜

　　摘要：为了提高小学低年级学生数学口算和心算能力，先利用 HTML5 新增的 Canvas标签绘制游戏场景，通过 CSS3 实现游戏页面样式与布局，再使用JavaScript脚本实现游戏的主要逻辑，最后利用Local Storage在客户端进行本地存储，设计开发出一款小学数学教学游戏并应用于实际教学中。该游戏提升了学生的学习动能，也为移动游戏在教育领域的应用研究提供实践案例。
　　关键词：教育游戏;HTML5技术;移动教学;数学游戏
　　中图分类号：G434      文献标识码：A      文章编号：1009-3044（2019）02-0033-03
　　HTML5标准的制定是 HTML语言的一次重大改版，较之前版本提供了很多新的特性，随着移动互联网技术的快速发展，使用HTML5开发的教育游戏为用户提供了更好的互动体验。使用浏览器内嵌功能实现动画和多媒体效果避免了安装插件的风险，结构化标签和新的表单控件提高了游戏运行效率，CSS3技术丰富了游戏受众的用户体验，相对于Flash游戏而言，HTML5得到了绝大部分主流平台和浏览器的支持，更稳定、更低耗、更新维护也更加方便。由此可见，利用HTML5技术开发教育游戏不仅丰富了教育游戏的功能，也推动了自主游戏化学习方式的发展，为课堂教学提供了补充、拓展和延伸。
　　埃里克森的人格发展理论指出：在学龄期（6-12岁），学校应培养儿童适应社会，使儿童获得未来生活所需的知识和技能[1]。中国著名教育家陈和琴先生说：“小孩子生来是好动的，是以游戏为生命的。”[2]在我国，小学低年级儿童在面对数学课堂的学习形式和书本内容时，常会感到不适应甚至导致焦虑不安。因此，该阶段教学中应考虑到游戏化学习方式，设计和开发一款小学低年级算术运算游戏，让儿童在玩中发现问题，解决问题，获取数学知识，训练学习能力，通过简单的游戏方式和贴近生活的游戏动画实现算术运算能力的提升。
　　目前，国内的宝宝吧、61儿童网、儿童Flash网等学习网站已经开发了基于 Flash技术的数学小游戏，通过交互，在有趣的画面中实现数学教学，获得了一些成效。但是，由于Flash开发的游戏在使用时必须安装Flash插件，增加了Web端的能耗，在移动端，苹果设备也不支持，导致了Web端和移动端学习体验不佳的现状。在这样的背景下，本文结合有统一的网络标准，可跨平台，多设备支持的HTML5技术，提出了利用 HTML5来设计和开发一款低年级数学游戏。
　　1 可行性分析
　　1.1技术可行性
　　HTML5技术能够使用主流浏览器原生支持视频、音频、动画与图片等元素的交互，并具有跨平台特性，不需要安装插件，提高了安全性和稳定性，因此使得教学游戏的设计开发和实际使用成为可能。使用HTML5设计教育游戏，在教学领域具有很大的实用价值。
　　1.2社会可行性
　　随着网络技术的飞速发展，网络浏览器和移动终端在中国中小学生中越来越受欢迎。将教学应用在移动设备上的学习方式已经逐渐兴起。小学数学游戏的需求热情不断高涨。同时，为了激发学生的学习兴趣，提高他们的学习能力，老师与家长也期望能有一款与儿童心理发展和教学内容相适应的游戏，
　　1.3系统目的
　　对于小学（低段）学生而言，加减法运算是数学学习重点，需要通过不断的练习才能熟练。该款游戏使用儿童熟悉的超市付账和收银场景，在收银台处进行加减法运算练习，训练数学口算、心算能力，达到快速准确计算的水平，具有较强趣味性和实用性，是對课堂加减法运算教学的有益补充。
　　1.4系统结构
　　游戏有四个功能模块，如图1所示：初始模块，游戏模块，结束模块，奖励模块。初始模块主要是玩家了解游戏规则，选择角色并进入游戏;游戏模块主要用于玩家对指定的物品进行加减法运算，在规定时间内计算出正确数字，通过单击模拟数字键盘实现数字输入;结束模块主要用于记录每个关卡计算的结果和总成绩;奖励模块主要根据成绩提供不同的关卡徽章奖励和总奖杯奖励。
　　2系统总体设计方案
　　游戏采用HTML5进行页面显示和组件渲染，使用 JavaScript进行动画交互与业务逻辑处理，采用 jquery技术进行页面动画效果的实现，css3技术进行样式管理，JSON技术进行数据格式定义，Local Storage进行数据管理等，综合以上技术完成本游戏的设计和开发。
　　2.1分层体系结构
　　游戏的用户界面可以部署在Web’浏览器和Android手机上。若选择“顾客”角色，则根据商品价格进行加法运算，若选择“收银员”角色，则根据商品价格进行减法运算，最终通过数据库进行成绩汇总，如图2所示。
　　2.2主要处理流程
　　整个游戏过程如图3所示，大致分为：页面加载、用户选择角色、进入相应场景、用户根据商品价格进行加减法运算，结算后程序根据正确率进行奖励，在游戏结束时，向用户提供三个出口，即“下一关”，“重玩”，“退出游戏”。
　　3游戏各功能设计
　　使用DOM（文档对象模型）来操作HTML中的元素，以实现丰富的人机交互。使用AJAX技术实时更新页面数据，为玩家提供流畅的用户体验。使用 Canvas 标签绘制图形、制作动画和嵌入音频，MySQL进行游戏中数据的管理。
　　3.1界面设计
　　优秀的教育游戏产品界面布局应能营造出良好的学习氛围，给予儿童愉悦的学习心情，从而激发其学习兴趣，提高其认知水平，实现教育目标。由于小学低年级儿童普遍耐心不足，因此，该游戏的启动界面需在第一时间吸引他们并介绍出游戏的规则，实现快速进入游戏的功能。游戏启动界面设计如图4所示。
　　儿童游戏界面的图标应根据儿童身心发展的特点进行设计[3]。在点击操作上，儿童尤其是低年龄段儿童的准确性往往不高，这就要求每个操作界面上的图标数量尽量控制在5个以内[4]，以保证使用体验。由于儿童的耐心有限，游戏界面文字设计上应使用较大字号和标题性文字，降低阅读难度。整个游戏界面的颜色设计应保持风格的一致性，每个界面的主色不应超过两个。该款游戏的游戏界面充分尊重小学低年级学生的心理特点，游戏主界面的可控图标为3组，放置在屏幕底端，使用空白区域进行间隔，易于观察和操作。界面整体色调为暖色调，以橘黄色为主，卡通人物形象有趣，涉及文字区域为“收银台”“关卡信息”“答题时间”和商品价格，文字简练并且字号较大，识别度高，易于儿童快速获取和理解。 　　3.2动画设计
　　该游戏中的动画主要分为功能动画和强调动画。功能性动画主要用来进行游戏控制，比如计时器和弹出提示框;强调性动画主要用来强调场景中的关键元素，从而使玩家能够快速注意到游戏关键信息，比如角色闪动动画和计价商品动画。动画效果全部由函数实现，程序中的函数结构如图5所示。
　　3.3交互设计
　　算术运算技能的练习贯穿整个小学数学教学。该游戏的交互强化了过程体验，通过儿童喜闻乐见的超市购物和收银场景营造出一个有趣的算术运算环境，互动设计思路主要体现在以下几个方面。
　　3.3.1角色扮演使玩家身临其境
　　设计了顾客和收银员两个角色，进入角色即选择不同运算方法进行计算。儿童在角色扮演中，熟悉社会角色，语言、记忆、想象、逻辑推理及创新能力均得到加强。
　　3.3.2及时反馈帮助玩家获得成就
　　在游戏反馈中，设计了倒计时器和关卡信息，帮助玩家迅速了解当前状况，及时反馈本关所剩时间和关卡对错得分信息，让玩家一目了然，在有限的时间内完成挑战任务，反馈、挑战与技能匹配，让玩家在适度紧张的关卡中答对更多的题目，获取更高的分数，获得更大的成就感。
　　3.3.3奖励激发玩家热情
　　层次性奖励设置使玩家在完成不同关卡任务后收获奖励勋章，这是该款游戏交互体验中重要的一部分，它不仅增强了玩家对游戏的黏度，而且还给予他们心理上的满足感，挑战更高难度[5]，在完成三关后，可获取奖杯，激发玩家再次进行游戏的热情。
　　3.3.4超轻提示保持游戏流畅
　　频现且无需操作的反馈信息，使用超轻提示进行交互，比如简单闪烁提示或较少文字提示。盡量避免由于提示导致弱化玩家游戏沉浸感的情况，保持游戏流畅度。
　　4 实例应用
　　以下子模块介绍了基于HTML5和前端技术开发的小学数学游戏案例，以“疯狂超市”游戏的三个模块为例。
　　4.1初始模块
　　对游戏规则进行说明，根据提示，玩家选择“顾客”或者“收银员”角色进入游戏，游戏共三关，如图6所示：
　　角色载入功能关键代码，如图7所示，selectRole函数用于玩家选择角色后载入相应游戏场景。
　　4.2游戏模块
　　 进入角色场景后，进行游戏，下面以“顾客”角色为例，顾客根据购买商品进行价格计算，如图8所示，所买商品为随机出现的“饮料”，总价为6元，选择模拟键盘中的数字，进行加法填空运算，输入数字过程中可以撤销，完成后点击“结算”按钮进行结算，答题正误将及时在关卡牌上显示，答案错误将弹出提示框，如图9所示，每关共10题，要求60秒内完成，界面右下角的倒数计时器将提示剩余时间。
　　4.3结束模块
　　每个级别完成后，系统将根据分数选择奖励奖牌。勋章选择功能的关键代码如图10所示，整个游戏完成后，系统根据总成绩给予奖杯奖励，并呈现出最近十个玩家的总成绩排名。
　　5结束语
　　小学数学口算和心算能力，不仅是小学生必须掌握的数学能力，也是一种必备的生活技能，该能力的获得，需要大量的课外练习。本文中基于HTML5结合前端技术进行设计和开发的游戏面向小学低年级学生，用于提高数学加减法运算能力。游戏界面友好、交互灵活，易于在Web端和移动端运行且可跨平台。这些性能为小学教育游戏在教育应用实践中的开发和应用提供了积极的教学意义和广阔的应用空间。
　　参考文献：
　　[1] 埃里克森八阶段理论[EB/OL]. https：//baike.baidu.com/item/%E5%9F%83%E9%87%8C%E5%85%8B%E6%A3%AE%E5%85%AB%E9%98%B6%E6%AE%B5%E7%90%86%E8 %AE%BA/8394418？fr=aladdin.
　　[2] 张芮.儿童教育类游戏卡通形象及界面设计初探[J].设计，2017（2）：137-139.
　　[3] 刘彪，陈卫东.电子游戏对儿童心理发展影响的实证研究[J].苏州科技学院学报，2012（2）：79-83.
　　[4] 孙湛.儿童益智游戏类APP 交互界面设计研究[J] .遵义师范学院学报，2015，17（1）：150.
　　[5] 郑金条.激励机制在游戏中的运用与思考[J] .程序员，2012（11）：85-87.
转载注明来源:https://www.xzbu.com/8/view-15270400.htm