游戲在編程語(yǔ)言教學(xué)中的應(yīng)用

施瑋炯　劉廣鐘

[摘要]以“編程思想入門(mén)”為教學(xué)案例，闡述在編程語(yǔ)言教學(xué)中如何使用CodeCombat這一游戲化教學(xué)平臺(tái)培養(yǎng)學(xué)生的編程能力。旨在通過(guò)游戲讓學(xué)生能夠直觀(guān)地建立計(jì)算機(jī)編程思維，同時(shí)讓學(xué)生在游戲中學(xué)會(huì)JavaScript語(yǔ)言的基礎(chǔ)語(yǔ)法。通過(guò)游戲的方式，不但能提高學(xué)生的興趣，還能提升學(xué)生的實(shí)踐動(dòng)手能力和教學(xué)效果。

[關(guān)鍵詞] 教學(xué);計(jì)算機(jī)編程;JavaScript;CodeCombat;編程思維

[中圖分類(lèi)號(hào)]? G642?????? ?? ??????? [文獻(xiàn)標(biāo)志碼]? A???????? ????????????? [文章編號(hào)]? 2096-0603（2018）34-0284-02

一、引言

在日常生活中，計(jì)算機(jī)已經(jīng)成為人們不可缺少的一種工具?；ヂ?lián)網(wǎng)的應(yīng)用無(wú)處不在，使計(jì)算機(jī)的應(yīng)用更是廣泛深入到日常生活的方方面面。因此，現(xiàn)在計(jì)算機(jī)及相關(guān)專(zhuān)業(yè)普遍開(kāi)設(shè)了編程類(lèi)課程。這類(lèi)課程主要介紹了編程語(yǔ)言的語(yǔ)法、編程思維以及編程語(yǔ)言的應(yīng)用等內(nèi)容。培養(yǎng)學(xué)生編程思維貫穿整個(gè)教學(xué)過(guò)程，從語(yǔ)法教學(xué)開(kāi)始，就需要通過(guò)相關(guān)的練習(xí)讓學(xué)生逐步習(xí)慣編程思維。教授完語(yǔ)法后，還需要講解語(yǔ)言的日常應(yīng)用，讓學(xué)生能通過(guò)應(yīng)用語(yǔ)言更好地養(yǎng)成這種編程思維。

因此，編程思維的培養(yǎng)是編程類(lèi)課程最核心的一個(gè)組成部分。筆者在編程類(lèi)相關(guān)課程教學(xué)中發(fā)現(xiàn)培養(yǎng)編程思維存在諸多難點(diǎn)。它有別于其他計(jì)算機(jī)實(shí)踐類(lèi)課程，后者在課堂教學(xué)中可以通過(guò)大量練習(xí)達(dá)到融會(huì)貫通，然而，編程思維的培養(yǎng)涉及兩個(gè)方面，一是編程語(yǔ)言的學(xué)習(xí)，二是編程思維的形成。

然而，編程類(lèi)課程學(xué)習(xí)過(guò)程相對(duì)比較枯燥。教師在講解語(yǔ)法時(shí)，按章節(jié)講解相關(guān)語(yǔ)法，容易磨滅學(xué)生的學(xué)習(xí)熱情;此外，教師如果不講解語(yǔ)法直接傳授編程思維，又會(huì)導(dǎo)致學(xué)生基礎(chǔ)不扎實(shí)，教學(xué)效果難以保證。

二、游戲化編程教學(xué)

針對(duì)教學(xué)過(guò)程中出現(xiàn)的問(wèn)題，我引入了游戲化編程來(lái)教授編程類(lèi)課程。通過(guò)大量有趣的關(guān)卡讓學(xué)生在課程入門(mén)階段對(duì)語(yǔ)言的應(yīng)用有一個(gè)比較直觀(guān)的認(rèn)識(shí)。將基于游戲的學(xué)習(xí)方式與傳統(tǒng)學(xué)習(xí)方式相比較，區(qū)別顯而易見(jiàn)：游戲能幫助學(xué)生更好地記住知識(shí)、集中精力，獲得更大的成就感。

同時(shí)，游戲是鼓勵(lì)交流、發(fā)現(xiàn)、試錯(cuò)的媒介。好的游戲能夠讓玩家學(xué)習(xí)到技能，游戲能促成“高效的奮斗”狀態(tài)——該狀態(tài)能激發(fā)積極性，把單調(diào)的學(xué)習(xí)過(guò)程變得生動(dòng)有趣。

此外，教師在教授游戲的基本操作后，學(xué)生在課下可以很方便地在個(gè)人電腦上繼續(xù)游玩，從而主動(dòng)探索知識(shí)點(diǎn)，深入了解編程語(yǔ)言的應(yīng)用。

（一）主流的游戲化編程教學(xué)平臺(tái)

游戲化編程教學(xué)平臺(tái)就是設(shè)計(jì)精良的教學(xué)平臺(tái)。在整個(gè)游戲過(guò)程中，每個(gè)關(guān)卡都經(jīng)過(guò)精心設(shè)計(jì)，從而包含一定的知識(shí)點(diǎn)。關(guān)卡與關(guān)卡之間的聯(lián)系就是知識(shí)點(diǎn)之間的過(guò)渡。學(xué)生闖過(guò)關(guān)卡，就意味著掌握了相對(duì)應(yīng)的知識(shí)點(diǎn)。

CodeCombat是一個(gè)讓學(xué)生通過(guò)玩游戲?qū)W習(xí)計(jì)算機(jī)科學(xué)的平臺(tái)。學(xué)生可以根據(jù)設(shè)計(jì)的游戲關(guān)卡一步步掌握編程知識(shí)。目前該平臺(tái)支持Python，Javascript，Jquery，Bootstrap，HTML5，CSS3。

同時(shí)，極客戰(zhàn)記的游戲編程課程尤其適用于學(xué)校教學(xué)的需求，任何一個(gè)無(wú)編程經(jīng)驗(yàn)的教師都可輕松授課。

常見(jiàn)的游戲化編程教學(xué)平臺(tái)有CodeCombat，Human Resource Machine，CodinGame，CodeFights，Code Hunt等。

Human Resource Machine游戲中玩家要作為一個(gè)公司的小職員，完成上司交給的一些任務(wù)，而完成任務(wù)的方法就是編寫(xiě)一個(gè)足以達(dá)到目標(biāo)的程序，并且按照程序中的條件進(jìn)行活動(dòng)。本作所采用的編程方式其實(shí)是一種相當(dāng)古老的方法，只是符合一般的計(jì)算機(jī)邏輯思維，想要用這款游戲?qū)W習(xí)專(zhuān)業(yè)編程似乎沒(méi)什么作用，不過(guò)沒(méi)有編程基礎(chǔ)的人玩起來(lái)應(yīng)該會(huì)感到不解和困惑。

CodinGame是一個(gè)游戲平臺(tái)，每一個(gè)練習(xí)背后的邏輯都與一個(gè)實(shí)際的游戲相連，讓你能夠獲得實(shí)時(shí)視覺(jué)反饋，在完成練習(xí)之后也能獲得實(shí)際的獎(jiǎng)勵(lì)。目前該平臺(tái)支持23種不同的編程語(yǔ)言，其中每一個(gè)游戲練習(xí)都可以選擇自己熟悉的語(yǔ)言。在CodinGame平臺(tái)，每一個(gè)練習(xí)都是基于瀏覽器的，會(huì)提供一個(gè)網(wǎng)絡(luò)集成開(kāi)發(fā)環(huán)境，不用刷新網(wǎng)頁(yè)就可以實(shí)時(shí)編譯代碼，并實(shí)時(shí)看到游戲的變化。

CodeFights是一家將練習(xí)編程的過(guò)程變?yōu)橛螒蜻^(guò)程的初創(chuàng)公司。目前，該公司已經(jīng)完成240萬(wàn)的種子資金，以發(fā)展實(shí)時(shí)社交游戲——在游戲中，碼農(nóng)既可以選擇人機(jī)對(duì)戰(zhàn)模式，也可以選擇挑戰(zhàn)其他玩家。CodeFights有JavaScript、Java、C++和Python編程挑戰(zhàn)游戲，用戶(hù)需要完成找出Bug的挑戰(zhàn)任務(wù)，勝利者就可以獲得相應(yīng)的徽章。

Code Hunt是Microsoft旗下新出的一款教育游戲，對(duì)大家感興趣的編碼基于瀏覽器的游戲。它供任何對(duì)編程有興趣的人學(xué)習(xí)代碼。該游戲呈現(xiàn)的方式并不是選擇答案的學(xué)習(xí)題，而是提供了一個(gè)可編輯的類(lèi)似編碼界面，并在右邊不斷跳出程序的運(yùn)行結(jié)果，測(cè)試運(yùn)行結(jié)果是否符合要求。

（二）教學(xué)思路

目前我校計(jì)算機(jī)相關(guān)專(zhuān)業(yè)網(wǎng)頁(yè)前段編程教學(xué)已形成一套較為完善的授課體系。我們?cè)诙昙?jí)上學(xué)期講授HTML和CSS知識(shí)，二年級(jí)下學(xué)期進(jìn)行JavaScript教學(xué)，在三年級(jí)上學(xué)期進(jìn)行項(xiàng)目實(shí)訓(xùn)。

三、編程思想入門(mén)案例

在具體的教學(xué)過(guò)程中，筆者以一個(gè)教學(xué)案例來(lái)說(shuō)明游戲化編程教學(xué)是如何融入計(jì)算機(jī)語(yǔ)言編程教學(xué)過(guò)程中的。

教學(xué)內(nèi)容為“編程思想入門(mén)”。整個(gè)教學(xué)過(guò)程分為3個(gè)階段，分別是引入階段、新授階段和實(shí)驗(yàn)階段。課程所使用的游戲化平臺(tái)是CodeCombat，因?yàn)樵撈脚_(tái)目前已經(jīng)在網(wǎng)易上線(xiàn)，即全程授課，無(wú)需授課教師自行搭建實(shí)驗(yàn)平臺(tái)，可以讓教師更投入地設(shè)計(jì)課程。

在CodeCombat中，教師可以建立自己的授課班級(jí)，在授課班級(jí)中可以觀(guān)察到學(xué)生的游戲進(jìn)度，從而對(duì)學(xué)生進(jìn)行有效的課堂輔導(dǎo)。

在引入階段，主要向?qū)W生介紹游戲化編程教學(xué)的由來(lái)，以及CodeCombat的背景和操作，從而使學(xué)生能在接下來(lái)的新授階段中更好地使用該平臺(tái)進(jìn)行學(xué)習(xí)。

在新授階段，先主要介紹所使用到的JavaScript語(yǔ)法，在此處，無(wú)需過(guò)多地灌輸語(yǔ)法知識(shí)，只需讓學(xué)生有感性的認(rèn)識(shí)即可。

在實(shí)驗(yàn)階段，則讓學(xué)生按照指定關(guān)卡進(jìn)行游戲，教師通過(guò)平臺(tái)的班級(jí)模塊，觀(guān)察學(xué)生的游戲進(jìn)度，從而找出學(xué)生共性與個(gè)性問(wèn)題進(jìn)行講解。通過(guò)教師講解，引導(dǎo)學(xué)生掌握編程思想。

（一）CodeCombat平臺(tái)與游戲化編程教學(xué)

使用傳統(tǒng)的方式來(lái)學(xué)習(xí)編程，這是一個(gè)比較難入門(mén)的過(guò)程。因?yàn)榫幊痰谋举|(zhì)是一種構(gòu)思如何使用電腦來(lái)解決問(wèn)題的思路。因此，學(xué)習(xí)編程就是要從人的思維模式轉(zhuǎn)變?yōu)闄C(jī)器的思維模式。

但現(xiàn)在這種入門(mén)難的情況有所好轉(zhuǎn)，因?yàn)榭梢酝ㄟ^(guò)一種新的方式學(xué)習(xí)編程思想，那就是游戲化編程教學(xué)。

游戲化編程教學(xué)就是將編程知識(shí)融入一款游戲平臺(tái)中，使用關(guān)卡將知識(shí)進(jìn)行串聯(lián)，從而達(dá)到寓教于樂(lè)的作用。

在CodeCombat中，我們將通過(guò)闖過(guò)一系列的關(guān)卡完成學(xué)習(xí)目標(biāo)。在這些關(guān)卡中，學(xué)生需要思考，然后使用編程語(yǔ)言完成關(guān)卡指定的任務(wù)。

（二）JavaScript中的對(duì)象以及對(duì)象的方法

JavaScript是一種面向?qū)ο蟮恼Z(yǔ)言。在JavaScript中，我們把對(duì)象所具備的功能稱(chēng)之為對(duì)象的方法。如下為對(duì)象hero的UML圖。

在JavaScript中，通過(guò)使用對(duì)象來(lái)封裝數(shù)據(jù)。封裝，即隱藏對(duì)象的屬性和實(shí)現(xiàn)細(xì)節(jié)，將抽象得到的數(shù)據(jù)和方法相結(jié)合，形成一個(gè)有機(jī)整體，僅對(duì)外公開(kāi)接口。

在JavaScript中，對(duì)象的方法為：對(duì)象名.方法（）。例如，讓游戲中的英雄向上移動(dòng)，就可以hero.MoveUp（）;來(lái)下達(dá)命令。其中，hero對(duì)象就代表了游戲中所選中的英雄。

（三）使用JavaScript通過(guò)關(guān)卡

在學(xué)習(xí)了如何使用JavaScript操作對(duì)象后，接下來(lái)的實(shí)驗(yàn)階段，就該使用該語(yǔ)法進(jìn)行通關(guān)了。在通關(guān)的過(guò)程中，最重要的是合理安排英雄的路線(xiàn)。然后再使用JavaScript來(lái)操作英雄完成關(guān)卡任務(wù)。

四、結(jié)語(yǔ)

在近年的JAVASCRIPT編程教學(xué)中，筆者發(fā)現(xiàn)學(xué)生對(duì)傳統(tǒng)的先教授語(yǔ)法，再講授應(yīng)用場(chǎng)景，最后結(jié)合面向?qū)ο笏枷雭?lái)編程的教學(xué)順序產(chǎn)生了普遍的抵觸心理。歸其原因主要是因?yàn)檫@樣的講授順序枯燥，且不貼合學(xué)生的生活。于是，我引進(jìn)了CodeCombat講授JavaScript編程課程，通過(guò)生動(dòng)的畫(huà)面、有趣的關(guān)卡吸引學(xué)生去嘗試。讓學(xué)生在嘗試中收獲編程的思想。從而解決了編程入門(mén)難，學(xué)生學(xué)起來(lái)枯燥的問(wèn)題。這樣，提高了學(xué)生的學(xué)習(xí)興趣，同時(shí)也為后繼課程打下良好基礎(chǔ)。

參考文獻(xiàn)：

[1][美]Nicholas C.Zakas.JavaScript高級(jí)程序設(shè)計(jì)[M].人民郵電出版社，2012.

[2][美]David Flanagan.JavaScript權(quán)威指南[M].機(jī)械工業(yè)出版社，2007.

[3][美]Addy Osmani.JavaScript設(shè)計(jì)模式[M].人民郵電出版社，2013.

[4]劉廣鐘，高峻，劉旻，等.報(bào)文分析技術(shù)在計(jì)算機(jī)網(wǎng)絡(luò)教學(xué)中的應(yīng)用[J].計(jì)算機(jī)教育，2014（1）：76-80.

◎編輯 馮永霞