基于微信小程序的单词游戏的设计与实现

2020-11-02郭磊鞠宏军

电脑知识与技术 2020年26期

郭磊鞠宏军

摘要：英语是当代人的一个必备技能，一定量的词汇积累是掌握英语的必要基础。随着互联网的发展，单词学习的方式也发生了巨大的变化，从单词书到了应用市场中各类单词学习的App。通过一个趣味性的单词软件来学习英语，成了英语学习的巨大助力。该系统和其他单词App形成了一个互补，设计了单词对战、单词挑战、生词本、学习打卡、排行榜等多个功能，实现了单词小游戏的学习闭环。

关键词：单词游戏;微信小程序;小程序云开发;JavaScript

中图分类号：TP311.52 文献标识码：A

文章编号：1009-3044（2020）26-0055-04

Abstract： English is a necessary skill for contemporary people. A certain amount of vocabulary accumulation is the necessary basis for mastering English. With the development of the Internet， the way of word learning has also undergone tremendous changes， from word books to App for various types of word learning in the application market. Learning English through a fun word software has become a huge boost for English learning. This system and other word Apps form a complementary， designed many functions， such as word battle， word challenge， new word book， learning clock， rankings， and so on， to achieve the closed-loop learning of word games.

Key words： word game; wechat mini program; serverless; JavaScript

1 背景

英语在全世界的流行程度越来越大，是全世界使用人数最多的一门语言。词汇的多少在一个方面上反映英语能力，是制约英语学习效率的一个主要因素。目前市场上已经有了很多单词学习App，但是都比较“重”，所以有了研发一个单词学习轻应用的想法，实现在碎片时间也能趣味化的进行学习。使用微信小程序作为开发平台，利用微信流量巨大的优势，可以在单词学习过程中增添一定的好友互动性，且应用也比较轻量化、易开发。实现了单词对战、单词挑战两种主要模式，单词对战又分为了好友对战、随机匹配对战、人机对战三种类别，线上项目体验，微信小程序搜索进入“单词天天斗”。

2 关键技术

2.1 微信小程序

微信小程序是一种不用下载就能使用的轻应用，依赖于微信客户端的运行环境。至今，已经形成了完善的开发者生态。本课题中使用微信小程序作为前端技术栈，开发用户交互界面，实现了较好的用户体验，设计开发了主页、对战页、词汇挑战页、对战打卡页、排行榜页、设置页等多个页面。

2.2 微信小程序云开发

小程序云开发简单点来说就是不需要自己买或搭建服务器，系统开发完成之后，也不需要手动配置和部署服务，也不需要自己在服务器上搭建数据库，就可以实现前后端分离的架构。前端或者客户端通过调用封装好的SDK中提供的云开发相关API，通过HTTP或其他网络协议，直接获取服务端数据。相比于之前的服务端自己部署代码和维护服务器，时间成本、开发成本、维护成本各方面都有巨大优势。

云开发提供了几大基础能力支持：

1）云数据库，实现无须自建数据库就可以拥有一个既可在小程序端直接读写操作，又能在云函数中进行CURD的 JSON 数据库，基于MongoDB;

2）云函数，实现无须自建或购买服务器就可以在云端执行代码，且含有微信私有协议鉴权，开发者只用编写自身业务逻辑代码;

3）云存储，实现无须自建存储和 CDN服务，就可以在小程序端直接上传文件或下载云端文件，在小程序云开发控制台可以可视化管理文件;

4）云调用，原生的微信服务集成，基于云函数无须鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据、发送订阅消息等能力。

2.3 其他

本项目使用git作为代码版本管理工具，使用github托管代码;使用Node.js开发部分数据整理脚本，序列化爬虫数据;使用Python开发爬虫脚本，获取单词数据;使用Electron開发设计了一个云开发数据库批量导入工具;使用ESlint校验格式化JavaScript代码;使用Sketch设计整套小程序UI页面及交互。

3 需求分析

3.1 系统整体功能

系统包含词汇书：四级核心词、四级大纲词、六级核心词、六级大纲词、考研真题核心词、考研大纲词、小学必备词、中考大纲词、高考大纲词、雅思大纲词、商务词汇。下方将统称为“系统词汇”，系统整体功能结构如图1所示。

3.2 单词对战模式

单词对战的游戏核心为：随机生成一定数量的单词列表的单选题类型题目，题目文本为该单词，有4个随机中文释义的选项，其中仅有一个为正确释义，双方用户一起选择释义，正确率高且速度快的用户获得对战胜利。单词对战游戏分为好友对战、随机匹配、人机对战三种对战的形式，均通过上述游戏核心的方式进行对战。

用户还可以自定义设置对战中的部分功能。设置需要学习的系统词汇类别;设置每一局对战的单词数目为以下任意一种：8、 10（默认）、 12、 15、 20;设置切换下一题是否自动播放单词发音、是否加入错词到生词本;设置默认是否播放背景音乐，游戏中也可以随时关闭/开启背景音乐;设置对战选择错误是否震动提醒等。

对功能边界和系统功能进行了完善。加入正在对战过程中、对战已结束、房间已满等非正常类型房间，做出相应的交互提示，然后跳转至首页;在对战过程中任意用户退出游戏或掉线，则结束本局游戏，进行对战结算;对战结束后，房主可以选择再来一局，当房主创建好再来一局的房间后，另外一个用户可以选择再来一局，加入继续对战;在对战过程中，选择错误的单词或使用提示卡选择的单词，自动加入用户生词本，用户可以在生词本中进行复习;加入倒计时机制，每一个单词的对战周期为10s，超时则判断为错选，对战模式完整流程如下图2所示。

3.3 词汇挑战模式

词汇挑战的核心为：获取随机的一个单词作为单选题题目文本，包含四个中文释义选项，其中一个为正确答案，选择错误则失败，选择正确再获取随机单词，循环下去。在对战中设计了挑战复活机制，在游戏过程中，如果选择错误，可以有两次复活机会。首次复活，通过分享小程序获得复活机会;第二次复活，通过观看一个15s之内的广告获得复活机会;当第三次选择错误，显示再来一局，从零开始记录分数。

挑战模式中设计了分数机制，每选择正确一个词，得分增加100分。当挑战失败的时候，如果挑战分数高于自己的历史最高分数，则修改历史最高分数为当前分数，用于排行榜排行，完整挑战流程如下图3所示。

3.4 其他功能

生词本，用户可以在生词本中查看在单词对战模式、词汇挑战模式中选择错误的单词。可以查看单词及单词释义、播放单词发音、删词生词，在设置中可以一键清空自己的所有生词数据。

学习打卡，当在单词对战模式中，当天对战局数超过5局且胜利局数超过2局，则打卡成功。可以在打卡页面查看当日进度，可以查看历史的打卡日历。

排行榜，包含词力值、词汇挑战分数、签到天数等排名信息;每类排行榜显示前20名的排名头像和昵称以及分数;显示自己当前类目下的排名以及分数。

其他，引入词力值机制：在单词对战模式、单词挑战模式中，每局对战都可以获得相应的词力值分数，作为用户的经验值;另外还有建议反馈、其他设置、打赏作者、友情链接等多个功能。

4 系统实现

4.1 单词数据入库

该系统的核心数据为单词，所以先把单词数据入库是项目的基本前提。使用Charles抓包软件，手机设置代理电脑IP，对市场上的单词App进行抓包获取接口信息。拿到数据接口后，使用apizza对接口进行测试分析，完善请求头和请求参数。测试通过后编码爬虫获取单词数据，保存到本地。

拿到单词数据后，使用Node.js编写脚本整理单词数据为符合自己的JSON数据文件。因为小程序云开发不支持文件批量导入，所以使用electron开发了一个数据文件批量导入工具，可在附录中打开github链接查看详情。

4.2 创建对战房间

对战房间是单词对战模式的基础，可以把创建房间分为触发创建房间事件、获取当前选择的单词书、获取单词对战每一局的词汇数量、从数据库pk_word集合读取随机单词、格式化获取的随机单词列表、创建房间（使用生成的单词列表、是否好友对战条件）、根据房间的roomId（主键）跳转至对战页等多个步骤流程组成，创建房间流程如图所示4。

4.3 房间数据监听

单词对战模式中，对room数据集合的监听是对战的核心要点，进入对战页面后，调用数据集合的WatchAPI对room集合中的当前房间记录进行监听，在当前房间记录数据发生变化的时候，将会调用watch函数的回调，执行相应的业务，详细流程如下图5。

4.4 好友对战的实现

有了前面创建好的对战房间，也建立好了对当前房间的数据监听，接下来就可以实现有趣的对战交互了。游戏会监听好友用户准备，更新room集合中的right.openid字段，触发watch，通知房主可以开始对战;房主点击开始对战，会更新room集合中的state字段为PK，watch回调通知双方开始对战，显示第一道题目，双方用户选择释义的时候，会把选择结果和得分更新至left/right中的grades和gradeSum字段，在watch的回调中对双方的选择结果进行显示;当对战到达最后一道题目，且双方都选择完毕，进入结算流程，将房间state更新至finish;如果在对战过程中，有任意用户离开对战，将修改房间state为leave;对战结束之后，房主可以选择再来一局，进行创建房间，更新上一个房间的nextRoomId字段，在watch回调中通知非房主用户可以加入新的房间，进行再来一局的对战，好友对战实现流程如下图6所示。

4.5 随机匹配对战的实现

随机匹配对战相对于好友对战的区别在于：好友对战是通过房主将房间链接（roomId）分享到微信好友/微信群，当用户点击分享卡片之后，会跳转至对战页面且房间Id为当前分享的房间roomId，用户进入房间之后就进行上述的监听操作和准备、开始对战等。然而随机匹配的实现原理为，当用户触发随机匹配操作之后，会先在数据库检索有没有符合自己所选择的单词书、目前房主在等待的房间，如果有则加入该房间，如果没有则创建新的随机匹配房间，等待其他用户进入。用户进入之后会自动触发准备操作，房主在watch中监听到有用户准备，然后自动触发开始对战操作，后续对战、结算、再来一局流程则和好友对战流程一致，随机匹配对战实现流程如下图7所示。

4.6 人机对战的实现

人机对战的核心思想为：房主用户端随机取一名人机用户，房主端触发人机的自动准备，房主端也自动开始对战，在对战过程中，房主端通过页面UI用户手动选词，人机将在2-5s或房主选词之后随机完成选词操作，正确率为75%，人机对战实现流程如下图8所示。

5 结束语

本课题的需求来源于生活，开发服务于在校学生或其他英语学习爱好者。采用Sketch绘制整套项目设计图，使用微信小程序设计开发，基于云开发快速产出了一个功能闭环项目，系统最终得以成功上线并进行运营，上线小程序二维码如下图9。系统运行效果如图10-图12。

参考文献：

[1] Zakas N C.JavaScript高級程序设计[M].李松峰，曹力，译.3版.北京：人民邮电出版社，2012.

[2] 阿斯顿·张你不知道的JavaScript[M].北京：人民邮电出版社，2019.

[3] Zakas N C.深入理解ES6[M].刘振涛，校.北京：电子工业出版社，2017.

[4] 阮一峰.ES6标准入门[M].3版.北京：电子工业出版社，2017.

[5] 雷磊.微信小程序开发入门与实践[M].北京：清华大学出版社，2017.

[6] 朴灵.深入浅出Node.js[M].北京：人民邮电出版社，2013.

[7] Loiane Groner.学习JavaScript数据结构与算法[M].吴双，邓钢，孙晓博，等译.北京：人民邮电出版社，2019.