基于微信小程序的單詞游戲的設計與實現

郭磊 鞠宏軍

摘要：英語是當代人的一個必備技能，一定量的詞匯積累是掌握英語的必要基礎。隨著互聯網的發展，單詞學習的方式也發生了巨大的變化，從單詞書到了應用市場中各類單詞學習的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.

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

[9] 梁灝.Vue.js實戰[M].北京：清華大學出版社，2017.

【通聯編輯：謝媛媛】