基于H5+MYSQL的跨平臺游戲式教學(xué)系統(tǒng)的開發(fā)與研究

秦經(jīng)賢

摘要：為了適應(yīng)信息技術(shù)新課程標(biāo)準(zhǔn)的要求，為教學(xué)搭建高效、科學(xué)的信息化平臺，基于HTML5+MYSQL，開發(fā)了一套游戲式在線教學(xué)系統(tǒng)。學(xué)生可以通過電腦、手機(jī)等多種終端訪問本操作系統(tǒng)。本系統(tǒng)使用Egret 作為開發(fā)工具，后臺數(shù)據(jù)庫存在MYSQL （實(shí)用性好，安全性高），速度快，并發(fā)數(shù)高。開發(fā)本系統(tǒng)，利用了信息技術(shù)的先進(jìn)技術(shù)，與教學(xué)工作相結(jié)合，實(shí)現(xiàn)教學(xué)現(xiàn)代化，為師生提供全新的視野，在實(shí)際應(yīng)用中收到良好的效果。

關(guān)鍵詞：HTML5;教學(xué)系統(tǒng);游戲;跨平臺

隨著信息技術(shù)國家課程標(biāo)準(zhǔn)要求的不斷提高和國家對學(xué)校的不斷投入，校園的電腦等教學(xué)設(shè)備不斷更新，武裝到牙齒，而教學(xué)軟件也如雨后春筍般出現(xiàn)，但真正適合一線教師使用的教學(xué)系統(tǒng)并不多，特別是跨平臺，游戲式的教學(xué)系統(tǒng)更是鳳毛麟角。

本系統(tǒng)既考慮到多平臺多設(shè)備的使用，也為師生開發(fā)更有趣味性的教學(xué)系統(tǒng)，改變過去枯燥無味的教學(xué)方式，豐富教師的教學(xué)手段和方法，方便教師教學(xué)管理，激發(fā)學(xué)生的學(xué)習(xí)興趣，

一、游戲式教學(xué)系統(tǒng)的設(shè)計

架構(gòu)：

二、跨平臺游戲教學(xué)系統(tǒng)的優(yōu)勢

我們對學(xué)生進(jìn)行了調(diào)查，了解了他們對學(xué)習(xí)的需要

（一）學(xué)生更喜歡用游戲的方式來學(xué)習(xí)。

（二）學(xué)生更喜歡用移動設(shè)備來學(xué)習(xí)

（三）學(xué)生更喜歡交互式的學(xué)習(xí)方式

因此，我們認(rèn)為游戲式教學(xué)系統(tǒng)非常適合現(xiàn)代的學(xué)生，是師生教學(xué)的強(qiáng)有力的教學(xué)工具，

師生需要的是網(wǎng)絡(luò)化、游戲式、多平臺、分層次的教學(xué)系統(tǒng)。我們開發(fā)的系統(tǒng)既可在學(xué)生上課機(jī)房的電腦上訪問，也可以在學(xué)生下課后用手機(jī)訪問。

我們構(gòu)建的是大型的網(wǎng)絡(luò)教學(xué)平臺，內(nèi)容豐富、功能強(qiáng)大。學(xué)生可以通過系統(tǒng)訪問：“今日選題”、“章節(jié)模式”、“隨機(jī)模式”、“模擬考試”、“歷屆會考”、“小游戲”、“葵花寶典”等功能菜單，教師、學(xué)校管理層、家長也可以訪問系統(tǒng)進(jìn)行教學(xué)、管理、監(jiān)督、共建等工作。

三、本系統(tǒng)的優(yōu)勢有：

（一）趣味性。對學(xué)生進(jìn)行游戲心理測試，了解到學(xué)生到底為何厭學(xué)？為何沉迷于游戲？取游戲之長補(bǔ)教學(xué)之短，將教學(xué)與游戲結(jié)合起來，將教學(xué)要求的知識和技能改編為生動有趣的游戲，增加了可玩性，完美地解決了學(xué)生厭學(xué)的問題。

（二）交互性。大量采用了HTML5動態(tài)網(wǎng)頁的交互技術(shù)來解決教學(xué)中的重難點(diǎn)。用HTML5技術(shù)來解決PPT所無法達(dá)到的交互效果，以突破教學(xué)重難點(diǎn)。

（三）網(wǎng)絡(luò)化。大膽使用互聯(lián)網(wǎng)技術(shù)應(yīng)用于教學(xué)軟件的研究和開發(fā)，用B/S架構(gòu)，前端用HTML5網(wǎng)頁，后臺采用MY SQL中型數(shù)據(jù)庫。

（四）跨平臺。除了PC端能訪問教學(xué)系統(tǒng)外，還解決了在手機(jī)上訪問的問題，解決了學(xué)生對碎片化時間利用及課堂邊界拓展的問題，打破了時空限制。

（五）大數(shù)據(jù)化。講授、提問、討論、練習(xí)、考試等教學(xué)全過程產(chǎn)生的一切數(shù)據(jù)均被系統(tǒng)詳細(xì)記錄下來，存儲到后臺MY SQL數(shù)據(jù)庫，并得到統(tǒng)計和分析，解決高效評價與自動輔導(dǎo)問題，用大數(shù)據(jù)有效地解決了學(xué)生過程性評價和總結(jié)性評價問題

（六）以學(xué)生為中心。每個學(xué)生都有一個教學(xué)游戲帳號，獨(dú)立登錄內(nèi)容豐富的教學(xué)系統(tǒng)，有與教材相關(guān)的各種素材、教學(xué)音視頻、教學(xué)游戲、模擬考試等，輕松地實(shí)現(xiàn)自主學(xué)習(xí)，小組探究等教學(xué)環(huán)節(jié)。

（七）具備數(shù)字化、多媒體化。我們采用了HTML5動畫，容量小，打開速度快，具有圖、文、聲、像并茂，有聲音、有視頻;除了基本的動畫之外，

在立足傳統(tǒng)研究方法的基礎(chǔ)上，大膽使用新技術(shù)，是將科技界的“互聯(lián)網(wǎng)+”與“大數(shù)據(jù)”概念和技術(shù)都引入到教學(xué)系統(tǒng)中來。 經(jīng)過測試，學(xué)生能輕松登錄本系統(tǒng)進(jìn)行在線學(xué)習(xí)，訪問課程相關(guān)的資料，進(jìn)行交互練習(xí)，進(jìn)行測試，既用于第一課堂，也用于第二課堂。

四、開發(fā)本系統(tǒng)的關(guān)鍵技術(shù)

HTML5是因特網(wǎng)的核心技術(shù)，是更為成熟的標(biāo)準(zhǔn)，廣泛應(yīng)用于網(wǎng)絡(luò)應(yīng)用的開發(fā)。用戶通過瀏覽器能從手機(jī)、PC電腦、筆記本電腦、平板電腦等終端跨平臺訪問云端的信息。

MySQL是最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一，在WEB中廣泛應(yīng)用。

HTML5可以跨平臺，一次開發(fā)，即可在不同的終端上運(yùn)行，不用重復(fù)寫代碼。功能強(qiáng)大，小巧靈活，流暢，清晰，用戶體驗(yàn)好，動畫更精美

（一）為了HTML5教學(xué)游戲開發(fā)，筆者選擇了Egret，以開發(fā)游戲的工具軟件來開發(fā)教學(xué)系統(tǒng)，有點(diǎn)大材小用，但高起點(diǎn)、高要求帶來的是良好效果。后臺數(shù)據(jù)采用了MY SQL關(guān)系數(shù)據(jù)庫管理系統(tǒng)，用來儲存和讀取教學(xué)游戲中產(chǎn)生的數(shù)據(jù)。

主界面有“今日選題”、“章節(jié)模式”、“隨機(jī)模式”、“模擬考試”、“歷屆會考”、“小游戲”等。

（二）后臺數(shù)據(jù)庫：我們選擇了MY SQL數(shù)據(jù)庫做為系統(tǒng)數(shù)據(jù)庫后臺、選擇了動態(tài)網(wǎng)頁為前臺、選擇了關(guān)系數(shù)據(jù)庫為數(shù)據(jù)模型、建立了學(xué)生信息息STUDENT、在線測試表、答案表、成績表等近30個教學(xué)相關(guān)數(shù)據(jù)表。

（三）收集了各種教學(xué)數(shù)據(jù)，用教學(xué)系統(tǒng)軟件自動采集課堂學(xué)生練習(xí)和考試數(shù)據(jù)，建立了完善的數(shù)據(jù)庫和數(shù)據(jù)表。編寫了大量動態(tài)網(wǎng)頁代碼。根據(jù)游戲場景草案，制作了各種游戲場景;根據(jù)動畫腳本用動畫制作工具軟件制作出教學(xué)動畫;并形成任務(wù)模式、游戲模式等交互模式。形成了游戲式教學(xué)系統(tǒng)集成軟件。

（四）根據(jù)教學(xué)游戲過程中產(chǎn)生的各種數(shù)據(jù)，建立自主學(xué)習(xí)數(shù)據(jù)庫。使教學(xué)數(shù)據(jù)庫結(jié)構(gòu)既包含自主學(xué)習(xí)過程中的一切知識、技能、資源的數(shù)據(jù)，同時也包含學(xué)生最喜歡的游戲元素，即自主學(xué)習(xí)過程中生成的數(shù)據(jù)，如經(jīng)驗(yàn)值、等級、金幣。

（五）利用當(dāng)前流行的HTML5腳本語言和MY SQL數(shù)據(jù)庫，進(jìn)行游戲教學(xué)數(shù)據(jù)庫程序開發(fā)，將各種自主過程中的知識點(diǎn)，技能，改編為游戲，并進(jìn)行集成，在學(xué)生自主學(xué)習(xí)過程中，實(shí)時采集數(shù)據(jù)，并將數(shù)據(jù)實(shí)時寫入數(shù)據(jù)庫，并能進(jìn)行學(xué)習(xí)評價。

（六）將開發(fā)好的游戲式教學(xué)系統(tǒng)安裝到計算機(jī)網(wǎng)絡(luò)教室，供學(xué)生進(jìn)行軟件測試、學(xué)生試用，觀察使用過程中產(chǎn)生什么錯誤，及時根據(jù)學(xué)生反饋回來的報告進(jìn)行功能的修正和改進(jìn)。

（七）我們將軟件投入運(yùn)行，在課堂教學(xué)中廣泛使用，總結(jié)成果并加以推廣，加大覆蓋面。結(jié)合實(shí)際，查驗(yàn)效果，并進(jìn)行成果匯報展。將評價結(jié)果輸出，供學(xué)生、老師、班主任、校領(lǐng)導(dǎo)、家長實(shí)時監(jiān)控。

（八）將動漫式教學(xué)系統(tǒng)接入公網(wǎng)，使學(xué)生無論在學(xué)校，還是在家庭，都能進(jìn)行自主學(xué)習(xí)，并能得到正確的評價和系統(tǒng)的自動輔導(dǎo)。

總之，我們的設(shè)計理念大膽而細(xì)致，敢于在教學(xué)系統(tǒng)中采用游戲方式，技術(shù)上也大膽使用“互聯(lián)網(wǎng)+”與“大數(shù)據(jù)”等新技術(shù)，并真正開發(fā)出能用，好用的既受學(xué)生歡迎，又在教學(xué)實(shí)踐取得優(yōu)異成績的游戲式教學(xué)系統(tǒng)軟件，為新時代教育教學(xué)的新要求提供了嶄新的先進(jìn)的教學(xué)手段。

參考文獻(xiàn)：

[1]馮科融，王和興.HTML5網(wǎng)頁游戲分析[J].電腦編程技巧與維護(hù)，2012.24：71-72

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

[3]韓敏.淺談網(wǎng)頁制作新技術(shù)HTML5[J].福建電腦，2018.9：106-107

[4]臧金梅，基于HTML5的簡單拼圖游戲的設(shè)計和實(shí)現(xiàn)[J].信息技術(shù)與信息化，2017.12：22-24

（本文為福建省教育信息技術(shù)研究課題項(xiàng)目，項(xiàng)目名稱：基于H5+MYSQL的跨平臺游戲式教學(xué)系統(tǒng)的開發(fā)與研究，項(xiàng)目編號FJDJ1803）