基于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.