郭磊 鞠宏軍

摘要：英語(yǔ)是當(dāng)代人的一個(gè)必備技能，一定量的詞匯積累是掌握英語(yǔ)的必要基礎(chǔ)。隨著互聯(lián)網(wǎng)的發(fā)展，單詞學(xué)習(xí)的方式也發(fā)生了巨大的變化，從單詞書到了應(yīng)用市場(chǎng)中各類單詞學(xué)習(xí)的App。通過(guò)一個(gè)趣味性的單詞軟件來(lái)學(xué)習(xí)英語(yǔ)，成了英語(yǔ)學(xué)習(xí)的巨大助力。該系統(tǒng)和其他單詞App形成了一個(gè)互補(bǔ)，設(shè)計(jì)了單詞對(duì)戰(zhàn)、單詞挑戰(zhàn)、生詞本、學(xué)習(xí)打卡、排行榜等多個(gè)功能，實(shí)現(xiàn)了單詞小游戲的學(xué)習(xí)閉環(huán)。

關(guān)鍵詞：?jiǎn)卧~游戲;微信小程序;小程序云開發(fā);JavaScript

中圖分類號(hào)：TP311.52? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：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 背景

英語(yǔ)在全世界的流行程度越來(lái)越大，是全世界使用人數(shù)最多的一門語(yǔ)言。詞匯的多少在一個(gè)方面上反映英語(yǔ)能力，是制約英語(yǔ)學(xué)習(xí)效率的一個(gè)主要因素。目前市場(chǎng)上已經(jīng)有了很多單詞學(xué)習(xí)App，但是都比較“重”，所以有了研發(fā)一個(gè)單詞學(xué)習(xí)輕應(yīng)用的想法，實(shí)現(xiàn)在碎片時(shí)間也能趣味化的進(jìn)行學(xué)習(xí)。使用微信小程序作為開發(fā)平臺(tái)，利用微信流量巨大的優(yōu)勢(shì)，可以在單詞學(xué)習(xí)過(guò)程中增添一定的好友互動(dòng)性，且應(yīng)用也比較輕量化、易開發(fā)。實(shí)現(xiàn)了單詞對(duì)戰(zhàn)、單詞挑戰(zhàn)兩種主要模式，單詞對(duì)戰(zhàn)又分為了好友對(duì)戰(zhàn)、隨機(jī)匹配對(duì)戰(zhàn)、人機(jī)對(duì)戰(zhàn)三種類別，線上項(xiàng)目體驗(yàn)，微信小程序搜索進(jìn)入“單詞天天斗”。

2 關(guān)鍵技術(shù)

2.1 微信小程序

微信小程序是一種不用下載就能使用的輕應(yīng)用，依賴于微信客戶端的運(yùn)行環(huán)境。至今，已經(jīng)形成了完善的開發(fā)者生態(tài)。本課題中使用微信小程序作為前端技術(shù)棧，開發(fā)用戶交互界面，實(shí)現(xiàn)了較好的用戶體驗(yàn)，設(shè)計(jì)開發(fā)了主頁(yè)、對(duì)戰(zhàn)頁(yè)、詞匯挑戰(zhàn)頁(yè)、對(duì)戰(zhàn)打卡頁(yè)、排行榜頁(yè)、設(shè)置頁(yè)等多個(gè)頁(yè)面。

2.2 微信小程序云開發(fā)

小程序云開發(fā)簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是不需要自己買或搭建服務(wù)器，系統(tǒng)開發(fā)完成之后，也不需要手動(dòng)配置和部署服務(wù)，也不需要自己在服務(wù)器上搭建數(shù)據(jù)庫(kù)，就可以實(shí)現(xiàn)前后端分離的架構(gòu)。前端或者客戶端通過(guò)調(diào)用封裝好的SDK中提供的云開發(fā)相關(guān)API，通過(guò)HTTP或其他網(wǎng)絡(luò)協(xié)議，直接獲取服務(wù)端數(shù)據(jù)。相比于之前的服務(wù)端自己部署代碼和維護(hù)服務(wù)器，時(shí)間成本、開發(fā)成本、維護(hù)成本各方面都有巨大優(yōu)勢(shì)。

云開發(fā)提供了幾大基礎(chǔ)能力支持：

1）云數(shù)據(jù)庫(kù)，實(shí)現(xiàn)無(wú)須自建數(shù)據(jù)庫(kù)就可以擁有一個(gè)既可在小程序端直接讀寫操作，又能在云函數(shù)中進(jìn)行CURD的 JSON 數(shù)據(jù)庫(kù)，基于MongoDB;

2）云函數(shù)，實(shí)現(xiàn)無(wú)須自建或購(gòu)買服務(wù)器就可以在云端執(zhí)行代碼，且含有微信私有協(xié)議鑒權(quán)，開發(fā)者只用編寫自身業(yè)務(wù)邏輯代碼;

3）云存儲(chǔ)，實(shí)現(xiàn)無(wú)須自建存儲(chǔ)和 CDN服務(wù)，就可以在小程序端直接上傳文件或下載云端文件，在小程序云開發(fā)控制臺(tái)可以可視化管理文件;

4）云調(diào)用，原生的微信服務(wù)集成，基于云函數(shù)無(wú)須鑒權(quán)使用小程序開放接口的能力，包括服務(wù)端調(diào)用、獲取開放數(shù)據(jù)、發(fā)送訂閱消息等能力。

2.3 其他

本項(xiàng)目使用git作為代碼版本管理工具，使用github托管代碼;使用Node.js開發(fā)部分?jǐn)?shù)據(jù)整理腳本，序列化爬蟲數(shù)據(jù);使用Python開發(fā)爬蟲腳本，獲取單詞數(shù)據(jù);使用Electron開發(fā)設(shè)計(jì)了一個(gè)云開發(fā)數(shù)據(jù)庫(kù)批量導(dǎo)入工具;使用ESlint校驗(yàn)格式化JavaScript代碼;使用Sketch設(shè)計(jì)整套小程序UI頁(yè)面及交互。

3 需求分析

3.1 系統(tǒng)整體功能

系統(tǒng)包含詞匯書：四級(jí)核心詞、四級(jí)大綱詞、六級(jí)核心詞、六級(jí)大綱詞、考研真題核心詞、考研大綱詞、小學(xué)必備詞、中考大綱詞、高考大綱詞、雅思大綱詞、商務(wù)詞匯。下方將統(tǒng)稱為“系統(tǒng)詞匯”，系統(tǒng)整體功能結(jié)構(gòu)如圖1所示。

3.2 單詞對(duì)戰(zhàn)模式

單詞對(duì)戰(zhàn)的游戲核心為：隨機(jī)生成一定數(shù)量的單詞列表的單選題類型題目，題目文本為該單詞，有4個(gè)隨機(jī)中文釋義的選項(xiàng)，其中僅有一個(gè)為正確釋義，雙方用戶一起選擇釋義，正確率高且速度快的用戶獲得對(duì)戰(zhàn)勝利。單詞對(duì)戰(zhàn)游戲分為好友對(duì)戰(zhàn)、隨機(jī)匹配、人機(jī)對(duì)戰(zhàn)三種對(duì)戰(zhàn)的形式，均通過(guò)上述游戲核心的方式進(jìn)行對(duì)戰(zhàn)。

用戶還可以自定義設(shè)置對(duì)戰(zhàn)中的部分功能。設(shè)置需要學(xué)習(xí)的系統(tǒng)詞匯類別;設(shè)置每一局對(duì)戰(zhàn)的單詞數(shù)目為以下任意一種：8、 10（默認(rèn)）、 12、 15、 20;設(shè)置切換下一題是否自動(dòng)播放單詞發(fā)音、是否加入錯(cuò)詞到生詞本;設(shè)置默認(rèn)是否播放背景音樂(lè)，游戲中也可以隨時(shí)關(guān)閉/開啟背景音樂(lè);設(shè)置對(duì)戰(zhàn)選擇錯(cuò)誤是否震動(dòng)提醒等。

對(duì)功能邊界和系統(tǒng)功能進(jìn)行了完善。加入正在對(duì)戰(zhàn)過(guò)程中、對(duì)戰(zhàn)已結(jié)束、房間已滿等非正常類型房間，做出相應(yīng)的交互提示，然后跳轉(zhuǎn)至首頁(yè);在對(duì)戰(zhàn)過(guò)程中任意用戶退出游戲或掉線，則結(jié)束本局游戲，進(jìn)行對(duì)戰(zhàn)結(jié)算;對(duì)戰(zhàn)結(jié)束后，房主可以選擇再來(lái)一局，當(dāng)房主創(chuàng)建好再來(lái)一局的房間后，另外一個(gè)用戶可以選擇再來(lái)一局，加入繼續(xù)對(duì)戰(zhàn);在對(duì)戰(zhàn)過(guò)程中，選擇錯(cuò)誤的單詞或使用提示卡選擇的單詞，自動(dòng)加入用戶生詞本，用戶可以在生詞本中進(jìn)行復(fù)習(xí);加入倒計(jì)時(shí)機(jī)制，每一個(gè)單詞的對(duì)戰(zhàn)周期為10s，超時(shí)則判斷為錯(cuò)選，對(duì)戰(zhàn)模式完整流程如下圖2所示。

3.3 詞匯挑戰(zhàn)模式

詞匯挑戰(zhàn)的核心為：獲取隨機(jī)的一個(gè)單詞作為單選題題目文本，包含四個(gè)中文釋義選項(xiàng)，其中一個(gè)為正確答案，選擇錯(cuò)誤則失敗，選擇正確再獲取隨機(jī)單詞，循環(huán)下去。在對(duì)戰(zhàn)中設(shè)計(jì)了挑戰(zhàn)復(fù)活機(jī)制，在游戲過(guò)程中，如果選擇錯(cuò)誤，可以有兩次復(fù)活機(jī)會(huì)。首次復(fù)活，通過(guò)分享小程序獲得復(fù)活機(jī)會(huì);第二次復(fù)活，通過(guò)觀看一個(gè)15s之內(nèi)的廣告獲得復(fù)活機(jī)會(huì);當(dāng)?shù)谌芜x擇錯(cuò)誤，顯示再來(lái)一局，從零開始記錄分?jǐn)?shù)。

挑戰(zhàn)模式中設(shè)計(jì)了分?jǐn)?shù)機(jī)制，每選擇正確一個(gè)詞，得分增加100分。當(dāng)挑戰(zhàn)失敗的時(shí)候，如果挑戰(zhàn)分?jǐn)?shù)高于自己的歷史最高分?jǐn)?shù)，則修改歷史最高分?jǐn)?shù)為當(dāng)前分?jǐn)?shù)，用于排行榜排行，完整挑戰(zhàn)流程如下圖3所示。

3.4 其他功能

生詞本，用戶可以在生詞本中查看在單詞對(duì)戰(zhàn)模式、詞匯挑戰(zhàn)模式中選擇錯(cuò)誤的單詞。可以查看單詞及單詞釋義、播放單詞發(fā)音、刪詞生詞，在設(shè)置中可以一鍵清空自己的所有生詞數(shù)據(jù)。

學(xué)習(xí)打卡，當(dāng)在單詞對(duì)戰(zhàn)模式中，當(dāng)天對(duì)戰(zhàn)局?jǐn)?shù)超過(guò)5局且勝利局?jǐn)?shù)超過(guò)2局，則打卡成功?？梢栽诖蚩?yè)面查看當(dāng)日進(jìn)度，可以查看歷史的打卡日歷。

排行榜，包含詞力值、詞匯挑戰(zhàn)分?jǐn)?shù)、簽到天數(shù)等排名信息;每類排行榜顯示前20名的排名頭像和昵稱以及分?jǐn)?shù);顯示自己當(dāng)前類目下的排名以及分?jǐn)?shù)。

其他，引入詞力值機(jī)制：在單詞對(duì)戰(zhàn)模式、單詞挑戰(zhàn)模式中，每局對(duì)戰(zhàn)都可以獲得相應(yīng)的詞力值分?jǐn)?shù)，作為用戶的經(jīng)驗(yàn)值;另外還有建議反饋、其他設(shè)置、打賞作者、友情鏈接等多個(gè)功能。

4 系統(tǒng)實(shí)現(xiàn)

4.1 單詞數(shù)據(jù)入庫(kù)

該系統(tǒng)的核心數(shù)據(jù)為單詞，所以先把單詞數(shù)據(jù)入庫(kù)是項(xiàng)目的基本前提。使用Charles抓包軟件，手機(jī)設(shè)置代理電腦IP，對(duì)市場(chǎng)上的單詞App進(jìn)行抓包獲取接口信息。拿到數(shù)據(jù)接口后，使用apizza對(duì)接口進(jìn)行測(cè)試分析，完善請(qǐng)求頭和請(qǐng)求參數(shù)。測(cè)試通過(guò)后編碼爬蟲獲取單詞數(shù)據(jù)，保存到本地。

拿到單詞數(shù)據(jù)后，使用Node.js編寫腳本整理單詞數(shù)據(jù)為符合自己的JSON數(shù)據(jù)文件。因?yàn)樾〕绦蛟崎_發(fā)不支持文件批量導(dǎo)入，所以使用electron開發(fā)了一個(gè)數(shù)據(jù)文件批量導(dǎo)入工具，可在附錄中打開github鏈接查看詳情。

4.2 創(chuàng)建對(duì)戰(zhàn)房間

對(duì)戰(zhàn)房間是單詞對(duì)戰(zhàn)模式的基礎(chǔ)，可以把創(chuàng)建房間分為觸發(fā)創(chuàng)建房間事件、獲取當(dāng)前選擇的單詞書、獲取單詞對(duì)戰(zhàn)每一局的詞匯數(shù)量、從數(shù)據(jù)庫(kù)pk_word集合讀取隨機(jī)單詞、格式化獲取的隨機(jī)單詞列表、創(chuàng)建房間（使用生成的單詞列表、是否好友對(duì)戰(zhàn)條件）、根據(jù)房間的roomId（主鍵）跳轉(zhuǎn)至對(duì)戰(zhàn)頁(yè)等多個(gè)步驟流程組成，創(chuàng)建房間流程如圖所示4。

4.3 房間數(shù)據(jù)監(jiān)聽

單詞對(duì)戰(zhàn)模式中，對(duì)room數(shù)據(jù)集合的監(jiān)聽是對(duì)戰(zhàn)的核心要點(diǎn)，進(jìn)入對(duì)戰(zhàn)頁(yè)面后，調(diào)用數(shù)據(jù)集合的WatchAPI對(duì)room集合中的當(dāng)前房間記錄進(jìn)行監(jiān)聽，在當(dāng)前房間記錄數(shù)據(jù)發(fā)生變化的時(shí)候，將會(huì)調(diào)用watch函數(shù)的回調(diào)，執(zhí)行相應(yīng)的業(yè)務(wù)，詳細(xì)流程如下圖5。

4.4 好友對(duì)戰(zhàn)的實(shí)現(xiàn)

有了前面創(chuàng)建好的對(duì)戰(zhàn)房間，也建立好了對(duì)當(dāng)前房間的數(shù)據(jù)監(jiān)聽，接下來(lái)就可以實(shí)現(xiàn)有趣的對(duì)戰(zhàn)交互了。游戲會(huì)監(jiān)聽好友用戶準(zhǔn)備，更新room集合中的right.openid字段，觸發(fā)watch，通知房主可以開始對(duì)戰(zhàn);房主點(diǎn)擊開始對(duì)戰(zhàn)，會(huì)更新room集合中的state字段為PK，watch回調(diào)通知雙方開始對(duì)戰(zhàn)，顯示第一道題目，雙方用戶選擇釋義的時(shí)候，會(huì)把選擇結(jié)果和得分更新至left/right中的grades和gradeSum字段，在watch的回調(diào)中對(duì)雙方的選擇結(jié)果進(jìn)行顯示;當(dāng)對(duì)戰(zhàn)到達(dá)最后一道題目，且雙方都選擇完畢，進(jìn)入結(jié)算流程，將房間state更新至finish;如果在對(duì)戰(zhàn)過(guò)程中，有任意用戶離開對(duì)戰(zhàn)，將修改房間state為leave;對(duì)戰(zhàn)結(jié)束之后，房主可以選擇再來(lái)一局，進(jìn)行創(chuàng)建房間，更新上一個(gè)房間的nextRoomId字段，在watch回調(diào)中通知非房主用戶可以加入新的房間，進(jìn)行再來(lái)一局的對(duì)戰(zhàn)，好友對(duì)戰(zhàn)實(shí)現(xiàn)流程如下圖6所示。

4.5 隨機(jī)匹配對(duì)戰(zhàn)的實(shí)現(xiàn)

隨機(jī)匹配對(duì)戰(zhàn)相對(duì)于好友對(duì)戰(zhàn)的區(qū)別在于：好友對(duì)戰(zhàn)是通過(guò)房主將房間鏈接（roomId）分享到微信好友/微信群，當(dāng)用戶點(diǎn)擊分享卡片之后，會(huì)跳轉(zhuǎn)至對(duì)戰(zhàn)頁(yè)面且房間Id為當(dāng)前分享的房間roomId，用戶進(jìn)入房間之后就進(jìn)行上述的監(jiān)聽操作和準(zhǔn)備、開始對(duì)戰(zhàn)等。然而隨機(jī)匹配的實(shí)現(xiàn)原理為，當(dāng)用戶觸發(fā)隨機(jī)匹配操作之后，會(huì)先在數(shù)據(jù)庫(kù)檢索有沒(méi)有符合自己所選擇的單詞書、目前房主在等待的房間，如果有則加入該房間，如果沒(méi)有則創(chuàng)建新的隨機(jī)匹配房間，等待其他用戶進(jìn)入。用戶進(jìn)入之后會(huì)自動(dòng)觸發(fā)準(zhǔn)備操作，房主在watch中監(jiān)聽到有用戶準(zhǔn)備，然后自動(dòng)觸發(fā)開始對(duì)戰(zhàn)操作，后續(xù)對(duì)戰(zhàn)、結(jié)算、再來(lái)一局流程則和好友對(duì)戰(zhàn)流程一致，隨機(jī)匹配對(duì)戰(zhàn)實(shí)現(xiàn)流程如下圖7所示。

4.6 人機(jī)對(duì)戰(zhàn)的實(shí)現(xiàn)

人機(jī)對(duì)戰(zhàn)的核心思想為：房主用戶端隨機(jī)取一名人機(jī)用戶，房主端觸發(fā)人機(jī)的自動(dòng)準(zhǔn)備，房主端也自動(dòng)開始對(duì)戰(zhàn)，在對(duì)戰(zhàn)過(guò)程中，房主端通過(guò)頁(yè)面UI用戶手動(dòng)選詞，人機(jī)將在2-5s或房主選詞之后隨機(jī)完成選詞操作，正確率為75%，人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)流程如下圖8所示。

5 結(jié)束語(yǔ)

本課題的需求來(lái)源于生活，開發(fā)服務(wù)于在校學(xué)生或其他英語(yǔ)學(xué)習(xí)愛(ài)好者。采用Sketch繪制整套項(xiàng)目設(shè)計(jì)圖，使用微信小程序設(shè)計(jì)開發(fā)，基于云開發(fā)快速產(chǎn)出了一個(gè)功能閉環(huán)項(xiàng)目，系統(tǒng)最終得以成功上線并進(jìn)行運(yùn)營(yíng)，上線小程序二維碼如下圖9。系統(tǒng)運(yùn)行效果如圖10-圖12。

參考文獻(xiàn)：

[1] Zakas N C.JavaScript高級(jí)程序設(shè)計(jì)[M].李松峰，曹力，譯.3版.北京：人民郵電出版社，2012.

[2] 阿斯頓·張 你不知道的JavaScript[M].北京：人民郵電出版社，2019.

[3] Zakas N C.深入理解ES6[M].劉振濤，校.北京：電子工業(yè)出版社，2017.

[4] 阮一峰.ES6標(biāo)準(zhǔn)入門[M].3版.北京：電子工業(yè)出版社，2017.

[5] 雷磊.微信小程序開發(fā)入門與實(shí)踐[M].北京：清華大學(xué)出版社，2017.

[6] 樸靈.深入淺出Node.js[M].北京：人民郵電出版社，2013.

[7] Loiane Groner.學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法[M].吳雙，鄧鋼，孫曉博，等譯.北京：人民郵電出版社，2019.

[8] 劉博文.深入淺出Vue.js[M].北京：人民郵電出版社，2019.

[9] 梁灝.Vue.js實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社，2017.

【通聯(lián)編輯：謝媛媛】