施瑋炯　劉廣鐘

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

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

[中圖分類號(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)用無處不在，使計(jì)算機(jī)的應(yīng)用更是廣泛深入到日常生活的方方面面。因此，現(xiàn)在計(jì)算機(jī)及相關(guān)專業(yè)普遍開設(shè)了編程類課程。這類課程主要介紹了編程語言的語法、編程思維以及編程語言的應(yīng)用等內(nèi)容。培養(yǎng)學(xué)生編程思維貫穿整個(gè)教學(xué)過程，從語法教學(xué)開始，就需要通過相關(guān)的練習(xí)讓學(xué)生逐步習(xí)慣編程思維。教授完語法后，還需要講解語言的日常應(yīng)用，讓學(xué)生能通過應(yīng)用語言更好地養(yǎng)成這種編程思維。

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

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

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

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

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

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

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

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

CodeCombat是一個(gè)讓學(xué)生通過玩游戲?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è)無編程經(jīng)驗(yàn)的教師都可輕松授課。

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

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

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

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

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

（二）教學(xué)思路

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

三、編程思想入門案例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語

在近年的JAVASCRIPT編程教學(xué)中，筆者發(fā)現(xiàn)學(xué)生對(duì)傳統(tǒng)的先教授語法，再講授應(yīng)用場景，最后結(jié)合面向?qū)ο笏枷雭砭幊痰慕虒W(xué)順序產(chǎn)生了普遍的抵觸心理。歸其原因主要是因?yàn)檫@樣的講授順序枯燥，且不貼合學(xué)生的生活。于是，我引進(jìn)了CodeCombat講授JavaScript編程課程，通過生動(dòng)的畫面、有趣的關(guān)卡吸引學(xué)生去嘗試。讓學(xué)生在嘗試中收獲編程的思想。從而解決了編程入門難，學(xué)生學(xué)起來枯燥的問題。這樣，提高了學(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.

◎編輯 馮永霞