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

秦經(jīng)賢

摘要：為了適應(yīng)信息技術(shù)新課程標(biāo)準(zhǔn)的要求，為教學(xué)搭建高效、科學(xué)的信息化平臺(tái)，基于HTML5+MYSQL，開發(fā)了一套游戲式在線教學(xué)系統(tǒng)。學(xué)生可以通過電腦、手機(jī)等多種終端訪問本操作系統(tǒng)。本系統(tǒng)使用Egret 作為開發(fā)工具，后臺(tái)數(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);游戲;跨平臺(tái)

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

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

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

架構(gòu)：

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

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

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

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

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

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

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

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

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

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

（二）交互性。大量采用了HTML5動(dòng)態(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)頁，后臺(tái)采用MY SQL中型數(shù)據(jù)庫。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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