基于HTML5技術(shù)的移動教學(xué)游戲設(shè)計(jì)和開發(fā)

董娜

摘要：為了提高小學(xué)低年級學(xué)生數(shù)學(xué)口算和心算能力，先利用 HTML5 新增的 Canvas標(biāo)簽繪制游戲場景，通過 CSS3 實(shí)現(xiàn)游戲頁面樣式與布局，再使用JavaScript腳本實(shí)現(xiàn)游戲的主要邏輯，最后利用Local Storage在客戶端進(jìn)行本地存儲，設(shè)計(jì)開發(fā)出一款小學(xué)數(shù)學(xué)教學(xué)游戲并應(yīng)用于實(shí)際教學(xué)中。該游戲提升了學(xué)生的學(xué)習(xí)動能，也為移動游戲在教育領(lǐng)域的應(yīng)用研究提供實(shí)踐案例。

關(guān)鍵詞：教育游戲;HTML5技術(shù);移動教學(xué);數(shù)學(xué)游戲

中圖分類號：G434? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ? 文章編號：1009-3044（2019）02-0033-03

HTML5標(biāo)準(zhǔn)的制定是 HTML語言的一次重大改版，較之前版本提供了很多新的特性，隨著移動互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，使用HTML5開發(fā)的教育游戲?yàn)橛脩籼峁┝烁玫幕芋w驗(yàn)。使用瀏覽器內(nèi)嵌功能實(shí)現(xiàn)動畫和多媒體效果避免了安裝插件的風(fēng)險(xiǎn)，結(jié)構(gòu)化標(biāo)簽和新的表單控件提高了游戲運(yùn)行效率，CSS3技術(shù)豐富了游戲受眾的用戶體驗(yàn)，相對于Flash游戲而言，HTML5得到了絕大部分主流平臺和瀏覽器的支持，更穩(wěn)定、更低耗、更新維護(hù)也更加方便。由此可見，利用HTML5技術(shù)開發(fā)教育游戲不僅豐富了教育游戲的功能，也推動了自主游戲化學(xué)習(xí)方式的發(fā)展，為課堂教學(xué)提供了補(bǔ)充、拓展和延伸。

埃里克森的人格發(fā)展理論指出：在學(xué)齡期（6-12歲），學(xué)校應(yīng)培養(yǎng)兒童適應(yīng)社會，使兒童獲得未來生活所需的知識和技能[1]。中國著名教育家陳和琴先生說：“小孩子生來是好動的，是以游戲?yàn)樯?。”[2]在我國，小學(xué)低年級兒童在面對數(shù)學(xué)課堂的學(xué)習(xí)形式和書本內(nèi)容時，常會感到不適應(yīng)甚至導(dǎo)致焦慮不安。因此，該階段教學(xué)中應(yīng)考慮到游戲化學(xué)習(xí)方式，設(shè)計(jì)和開發(fā)一款小學(xué)低年級算術(shù)運(yùn)算游戲，讓兒童在玩中發(fā)現(xiàn)問題，解決問題，獲取數(shù)學(xué)知識，訓(xùn)練學(xué)習(xí)能力，通過簡單的游戲方式和貼近生活的游戲動畫實(shí)現(xiàn)算術(shù)運(yùn)算能力的提升。

目前，國內(nèi)的寶寶吧、61兒童網(wǎng)、兒童Flash網(wǎng)等學(xué)習(xí)網(wǎng)站已經(jīng)開發(fā)了基于 Flash技術(shù)的數(shù)學(xué)小游戲，通過交互，在有趣的畫面中實(shí)現(xiàn)數(shù)學(xué)教學(xué)，獲得了一些成效。但是，由于Flash開發(fā)的游戲在使用時必須安裝Flash插件，增加了Web端的能耗，在移動端，蘋果設(shè)備也不支持，導(dǎo)致了Web端和移動端學(xué)習(xí)體驗(yàn)不佳的現(xiàn)狀。在這樣的背景下，本文結(jié)合有統(tǒng)一的網(wǎng)絡(luò)標(biāo)準(zhǔn)，可跨平臺，多設(shè)備支持的HTML5技術(shù)，提出了利用 HTML5來設(shè)計(jì)和開發(fā)一款低年級數(shù)學(xué)游戲。

1 可行性分析

1.1技術(shù)可行性

HTML5技術(shù)能夠使用主流瀏覽器原生支持視頻、音頻、動畫與圖片等元素的交互，并具有跨平臺特性，不需要安裝插件，提高了安全性和穩(wěn)定性，因此使得教學(xué)游戲的設(shè)計(jì)開發(fā)和實(shí)際使用成為可能。使用HTML5設(shè)計(jì)教育游戲，在教學(xué)領(lǐng)域具有很大的實(shí)用價值。

1.2社會可行性

隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，網(wǎng)絡(luò)瀏覽器和移動終端在中國中小學(xué)生中越來越受歡迎。將教學(xué)應(yīng)用在移動設(shè)備上的學(xué)習(xí)方式已經(jīng)逐漸興起。小學(xué)數(shù)學(xué)游戲的需求熱情不斷高漲。同時，為了激發(fā)學(xué)生的學(xué)習(xí)興趣，提高他們的學(xué)習(xí)能力，老師與家長也期望能有一款與兒童心理發(fā)展和教學(xué)內(nèi)容相適應(yīng)的游戲，

1.3系統(tǒng)目的

對于小學(xué)（低段）學(xué)生而言，加減法運(yùn)算是數(shù)學(xué)學(xué)習(xí)重點(diǎn)，需要通過不斷的練習(xí)才能熟練。該款游戲使用兒童熟悉的超市付賬和收銀場景，在收銀臺處進(jìn)行加減法運(yùn)算練習(xí)，訓(xùn)練數(shù)學(xué)口算、心算能力，達(dá)到快速準(zhǔn)確計(jì)算的水平，具有較強(qiáng)趣味性和實(shí)用性，是對課堂加減法運(yùn)算教學(xué)的有益補(bǔ)充。

1.4系統(tǒng)結(jié)構(gòu)

游戲有四個功能模塊，如圖1所示：初始模塊，游戲模塊，結(jié)束模塊，獎勵模塊。初始模塊主要是玩家了解游戲規(guī)則，選擇角色并進(jìn)入游戲;游戲模塊主要用于玩家對指定的物品進(jìn)行加減法運(yùn)算，在規(guī)定時間內(nèi)計(jì)算出正確數(shù)字，通過單擊模擬數(shù)字鍵盤實(shí)現(xiàn)數(shù)字輸入;結(jié)束模塊主要用于記錄每個關(guān)卡計(jì)算的結(jié)果和總成績;獎勵模塊主要根據(jù)成績提供不同的關(guān)卡徽章獎勵和總獎杯獎勵。

2系統(tǒng)總體設(shè)計(jì)方案

游戲采用HTML5進(jìn)行頁面顯示和組件渲染，使用 JavaScript進(jìn)行動畫交互與業(yè)務(wù)邏輯處理，采用 jquery技術(shù)進(jìn)行頁面動畫效果的實(shí)現(xiàn)，css3技術(shù)進(jìn)行樣式管理，JSON技術(shù)進(jìn)行數(shù)據(jù)格式定義，Local Storage進(jìn)行數(shù)據(jù)管理等，綜合以上技術(shù)完成本游戲的設(shè)計(jì)和開發(fā)。

2.1分層體系結(jié)構(gòu)

游戲的用戶界面可以部署在Web瀏覽器和Android手機(jī)上。若選擇“顧客”角色，則根據(jù)商品價格進(jìn)行加法運(yùn)算，若選擇“收銀員”角色，則根據(jù)商品價格進(jìn)行減法運(yùn)算，最終通過數(shù)據(jù)庫進(jìn)行成績匯總，如圖2所示。

2.2主要處理流程

整個游戲過程如圖3所示，大致分為：頁面加載、用戶選擇角色、進(jìn)入相應(yīng)場景、用戶根據(jù)商品價格進(jìn)行加減法運(yùn)算，結(jié)算后程序根據(jù)正確率進(jìn)行獎勵，在游戲結(jié)束時，向用戶提供三個出口，即“下一關(guān)”，“重玩”，“退出游戲”。

3游戲各功能設(shè)計(jì)

使用DOM（文檔對象模型）來操作HTML中的元素，以實(shí)現(xiàn)豐富的人機(jī)交互。使用AJAX技術(shù)實(shí)時更新頁面數(shù)據(jù)，為玩家提供流暢的用戶體驗(yàn)。使用 Canvas 標(biāo)簽繪制圖形、制作動畫和嵌入音頻，MySQL進(jìn)行游戲中數(shù)據(jù)的管理。

3.1界面設(shè)計(jì)

優(yōu)秀的教育游戲產(chǎn)品界面布局應(yīng)能營造出良好的學(xué)習(xí)氛圍，給予兒童愉悅的學(xué)習(xí)心情，從而激發(fā)其學(xué)習(xí)興趣，提高其認(rèn)知水平，實(shí)現(xiàn)教育目標(biāo)。由于小學(xué)低年級兒童普遍耐心不足，因此，該游戲的啟動界面需在第一時間吸引他們并介紹出游戲的規(guī)則，實(shí)現(xiàn)快速進(jìn)入游戲的功能。游戲啟動界面設(shè)計(jì)如圖4所示。

兒童游戲界面的圖標(biāo)應(yīng)根據(jù)兒童身心發(fā)展的特點(diǎn)進(jìn)行設(shè)計(jì)[3]。在點(diǎn)擊操作上，兒童尤其是低年齡段兒童的準(zhǔn)確性往往不高，這就要求每個操作界面上的圖標(biāo)數(shù)量盡量控制在5個以內(nèi)[4]，以保證使用體驗(yàn)。由于兒童的耐心有限，游戲界面文字設(shè)計(jì)上應(yīng)使用較大字號和標(biāo)題性文字，降低閱讀難度。整個游戲界面的顏色設(shè)計(jì)應(yīng)保持風(fēng)格的一致性，每個界面的主色不應(yīng)超過兩個。該款游戲的游戲界面充分尊重小學(xué)低年級學(xué)生的心理特點(diǎn)，游戲主界面的可控圖標(biāo)為3組，放置在屏幕底端，使用空白區(qū)域進(jìn)行間隔，易于觀察和操作。界面整體色調(diào)為暖色調(diào)，以橘黃色為主，卡通人物形象有趣，涉及文字區(qū)域?yàn)椤笆浙y臺”“關(guān)卡信息”“答題時間”和商品價格，文字簡練并且字號較大，識別度高，易于兒童快速獲取和理解。

3.2動畫設(shè)計(jì)

該游戲中的動畫主要分為功能動畫和強(qiáng)調(diào)動畫。功能性動畫主要用來進(jìn)行游戲控制，比如計(jì)時器和彈出提示框;強(qiáng)調(diào)性動畫主要用來強(qiáng)調(diào)場景中的關(guān)鍵元素，從而使玩家能夠快速注意到游戲關(guān)鍵信息，比如角色閃動動畫和計(jì)價商品動畫。動畫效果全部由函數(shù)實(shí)現(xiàn)，程序中的函數(shù)結(jié)構(gòu)如圖5所示。

3.3交互設(shè)計(jì)

算術(shù)運(yùn)算技能的練習(xí)貫穿整個小學(xué)數(shù)學(xué)教學(xué)。該游戲的交互強(qiáng)化了過程體驗(yàn)，通過兒童喜聞樂見的超市購物和收銀場景營造出一個有趣的算術(shù)運(yùn)算環(huán)境，互動設(shè)計(jì)思路主要體現(xiàn)在以下幾個方面。

3.3.1角色扮演使玩家身臨其境

設(shè)計(jì)了顧客和收銀員兩個角色，進(jìn)入角色即選擇不同運(yùn)算方法進(jìn)行計(jì)算。兒童在角色扮演中，熟悉社會角色，語言、記憶、想象、邏輯推理及創(chuàng)新能力均得到加強(qiáng)。

3.3.2及時反饋幫助玩家獲得成就

在游戲反饋中，設(shè)計(jì)了倒計(jì)時器和關(guān)卡信息，幫助玩家迅速了解當(dāng)前狀況，及時反饋本關(guān)所剩時間和關(guān)卡對錯得分信息，讓玩家一目了然，在有限的時間內(nèi)完成挑戰(zhàn)任務(wù)，反饋、挑戰(zhàn)與技能匹配，讓玩家在適度緊張的關(guān)卡中答對更多的題目，獲取更高的分?jǐn)?shù)，獲得更大的成就感。

3.3.3獎勵激發(fā)玩家熱情

層次性獎勵設(shè)置使玩家在完成不同關(guān)卡任務(wù)后收獲獎勵勛章，這是該款游戲交互體驗(yàn)中重要的一部分，它不僅增強(qiáng)了玩家對游戲的黏度，而且還給予他們心理上的滿足感，挑戰(zhàn)更高難度[5]，在完成三關(guān)后，可獲取獎杯，激發(fā)玩家再次進(jìn)行游戲的熱情。

3.3.4超輕提示保持游戲流暢

頻現(xiàn)且無需操作的反饋信息，使用超輕提示進(jìn)行交互，比如簡單閃爍提示或較少文字提示。盡量避免由于提示導(dǎo)致弱化玩家游戲沉浸感的情況，保持游戲流暢度。

4 實(shí)例應(yīng)用

以下子模塊介紹了基于HTML5和前端技術(shù)開發(fā)的小學(xué)數(shù)學(xué)游戲案例，以“瘋狂超市”游戲的三個模塊為例。

4.1初始模塊

對游戲規(guī)則進(jìn)行說明，根據(jù)提示，玩家選擇“顧客”或者“收銀員”角色進(jìn)入游戲，游戲共三關(guān)，如圖6所示：

角色載入功能關(guān)鍵代碼，如圖7所示，selectRole函數(shù)用于玩家選擇角色后載入相應(yīng)游戲場景。

4.2游戲模塊

進(jìn)入角色場景后，進(jìn)行游戲，下面以“顧客”角色為例，顧客根據(jù)購買商品進(jìn)行價格計(jì)算，如圖8所示，所買商品為隨機(jī)出現(xiàn)的“飲料”，總價為6元，選擇模擬鍵盤中的數(shù)字，進(jìn)行加法填空運(yùn)算，輸入數(shù)字過程中可以撤銷，完成后點(diǎn)擊“結(jié)算”按鈕進(jìn)行結(jié)算，答題正誤將及時在關(guān)卡牌上顯示，答案錯誤將彈出提示框，如圖9所示，每關(guān)共10題，要求60秒內(nèi)完成，界面右下角的倒數(shù)計(jì)時器將提示剩余時間。

4.3結(jié)束模塊

每個級別完成后，系統(tǒng)將根據(jù)分?jǐn)?shù)選擇獎勵獎牌。勛章選擇功能的關(guān)鍵代碼如圖10所示，整個游戲完成后，系統(tǒng)根據(jù)總成績給予獎杯獎勵，并呈現(xiàn)出最近十個玩家的總成績排名。

5結(jié)束語

小學(xué)數(shù)學(xué)口算和心算能力，不僅是小學(xué)生必須掌握的數(shù)學(xué)能力，也是一種必備的生活技能，該能力的獲得，需要大量的課外練習(xí)。本文中基于HTML5結(jié)合前端技術(shù)進(jìn)行設(shè)計(jì)和開發(fā)的游戲面向小學(xué)低年級學(xué)生，用于提高數(shù)學(xué)加減法運(yùn)算能力。游戲界面友好、交互靈活，易于在Web端和移動端運(yùn)行且可跨平臺。這些性能為小學(xué)教育游戲在教育應(yīng)用實(shí)踐中的開發(fā)和應(yīng)用提供了積極的教學(xué)意義和廣闊的應(yīng)用空間。

參考文獻(xiàn)：

[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] 張芮.兒童教育類游戲卡通形象及界面設(shè)計(jì)初探[J].設(shè)計(jì)，2017（2）：137-139.

[3] 劉彪，陳衛(wèi)東.電子游戲?qū)和睦戆l(fā)展影響的實(shí)證研究[J].蘇州科技學(xué)院學(xué)報(bào)，2012（2）：79-83.

[4] 孫湛.兒童益智游戲類APP 交互界面設(shè)計(jì)研究[J] .遵義師范學(xué)院學(xué)報(bào)，2015，17（1）：150.

[5] 鄭金條.激勵機(jī)制在游戲中的運(yùn)用與思考[J] .程序員，2012（11）：85-87.