基于OBE 理念的“JavaScript”課程設(shè)計

張紅紅，王桂芝

（1.河南牧業(yè)經(jīng)濟學(xué)院 信息工程學(xué)院，河南 鄭州 450044；2.上海大學(xué) 計算機工程與科學(xué)學(xué)院，上海 200444）

0 引言

百年大計,教育為本。 當(dāng)今社會是一個創(chuàng)新的社會,如何培養(yǎng)具有創(chuàng)新能力的人才,是新時代背景下教育所面臨的一個巨大的挑戰(zhàn)［1］。 OBE 是一種基于產(chǎn)出的教育模式和理念,這種教育理念對培養(yǎng)學(xué)生的專業(yè)知識、能力和素質(zhì)有巨大的促進(jìn)作用［2］。 OBE 教育模式最早出現(xiàn)在美國和加拿大,很快便推廣到世界各國的教育改革中。 教育部于2019 年10 月30 日發(fā)布了《關(guān)于一流本科課程建設(shè)的實施意見》,其中明確提出,要確立學(xué)生中心、產(chǎn)出導(dǎo)向、持續(xù)改進(jìn)的理念,提升課程的高階性,突出課程的創(chuàng)新性,增加課程的挑戰(zhàn)度［3］。 OBE 教育理念是基于成果導(dǎo)向的,與過去關(guān)注學(xué)生學(xué)什么、怎么學(xué)的教育理念不同,OBE 更關(guān)注以學(xué)生為中心,學(xué)生學(xué)到了什么。 具體而言,OBE 包括以下幾個方面:一是學(xué)生的學(xué)習(xí)成果是什么；二是學(xué)生為什么要取得這些學(xué)習(xí)成果；三是怎么幫助學(xué)生取得這些學(xué)習(xí)成果；四是怎么判斷學(xué)生是否取得這些學(xué)習(xí)成果。

當(dāng)今社會是一個信息社會,隨著信息技術(shù)的不斷發(fā)展,云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)正在深入普通大眾的工作、學(xué)習(xí)和生活。 所有的這些都離不開網(wǎng)絡(luò)的發(fā)展,作為Web 前端的重要技術(shù), JavaScript 首屈一指。JavaScript 是一種高級腳本語言,有很多優(yōu)勢,如事件驅(qū)動、基于對象、實現(xiàn)計算機自動處理流程、與網(wǎng)頁相結(jié)合等,是一種可以承載計算思維培養(yǎng)的編程語言［4］。所以,“JavaScript”課程不僅是計算機及相關(guān)理工科專業(yè)的核心課程,也成為很多文科生的計算機通識課程?；贠BE 理念的“JavaScript”課程設(shè)計對培養(yǎng)計算思維和創(chuàng)新能力有著舉足輕重的作用。

1 課程教學(xué)新理念

1.1 課程教學(xué)現(xiàn)狀

現(xiàn)階段的“JavaScript”課程教學(xué)以教師的教為中心,教師選擇教材,然后按教材備課,通過理論講授教材的每一個知識點,之后按照知識點設(shè)計上機小練習(xí),最后通過期末考試考查學(xué)生的掌握情況。 學(xué)生對于這種教學(xué)模式積極性不高、參與性不高,從而導(dǎo)致課堂氣氛不活躍、教學(xué)效果不如意等［5］。 眾所周知,興趣是最好的老師,之所以如今的“JavaScript”課程教學(xué)效果不好,是因為沒有激發(fā)學(xué)生的學(xué)習(xí)興趣。 如何才能更有效地引導(dǎo)學(xué)生的學(xué)習(xí)興趣,這就需要在教學(xué)的方方面面下功夫。 改變教學(xué)理念、改革教學(xué)模式、改進(jìn)教學(xué)方法、改換考核方式等,以此促進(jìn)教學(xué)效果。

1.2 OBE 教學(xué)新理念

OBE 教學(xué)新理念是成果導(dǎo)向型的,以學(xué)生的學(xué)為中心,聚焦于學(xué)生學(xué)習(xí)的成果。 學(xué)生的學(xué)習(xí)要取得什么樣成果,達(dá)到什么樣的能力,要預(yù)先設(shè)計好。 這樣,一方面更貼近社會和業(yè)界對人才的需求,另一方面使學(xué)生的學(xué)習(xí)目標(biāo)更加明確,從而激發(fā)他們的學(xué)習(xí)興趣。在OBE 教學(xué)理念下,所有的教學(xué)過程和課程設(shè)計都要圍繞學(xué)習(xí)效果來進(jìn)行。 與以往統(tǒng)一考核的一刀切模式不同,OBE 教學(xué)新理念強調(diào)個性化評價,與因材施教相對應(yīng),也要因材施考。 新教學(xué)理念提倡以生為本,就是以學(xué)生為中心,能夠激發(fā)學(xué)生學(xué)習(xí)的主動性,有利于培養(yǎng)他們的創(chuàng)新精神。

2 課程設(shè)計新思路

2.1 學(xué)習(xí)成果設(shè)計

把基于產(chǎn)出的OBE 教學(xué)理念引入“JavaScript”課程,首先要明確學(xué)習(xí)的成果。 “JavaScript”課程的學(xué)習(xí)成果包括知識目標(biāo)和能力目標(biāo)。 其中知識目標(biāo)包括“JavaScript”程序設(shè)計的所有知識點:如變量、運算符、分支、循環(huán)、數(shù)組、函數(shù)、事件等；能力目標(biāo)包括具有一定的計算思維、規(guī)范化的編程習(xí)慣、思考解決問題的能力以及團隊合作意識等。 學(xué)習(xí)成果不僅僅停留在知識點的掌握上,更重要的是理解和應(yīng)用所學(xué)知識以解決現(xiàn)實中的問題。

2.2 教學(xué)方法設(shè)計

為了達(dá)到上述的學(xué)習(xí)成果,采用項目驅(qū)動式教學(xué)法,把知識點分散融入不同的項目。 這樣既可以避免瑣碎知識點學(xué)習(xí)的枯燥,又可以培養(yǎng)學(xué)生的編程思維,以更好地滿足社會的需求。 當(dāng)今社會,由于信息技術(shù)的飛速發(fā)展,電腦、平板、手機等電子產(chǎn)品無處不在,現(xiàn)在的學(xué)生從小就在這樣的環(huán)境中成長,沒有學(xué)生不接觸電子產(chǎn)品。 他們通過電子產(chǎn)品更快地了解各種資訊,學(xué)習(xí)各種知識。 當(dāng)然也進(jìn)行各種娛樂,其中游戲是第一位的,游戲?qū)θ擞绕涫乔嗄陮W(xué)生有著極大的吸引力。 鑒于此,我們在項目教學(xué)中引入游戲案例,這樣可以更好地激發(fā)學(xué)生學(xué)習(xí)的興趣,進(jìn)而提升教學(xué)效果。

3 課程設(shè)計新內(nèi)容

針對游戲案例,課程設(shè)計的內(nèi)容包括游戲顯示、游戲控制、游戲動畫、游戲邏輯和游戲綜合等幾個方面。

3.1 游戲顯示版塊

在游戲顯示版塊中,課程主要設(shè)計添加顯示元素和顯示元素的屬性兩個子版塊。 游戲案例采用制作賽車游戲界面,該案例可以劃分為創(chuàng)建應(yīng)用、創(chuàng)建圖片、創(chuàng)建文本3 個步驟。

(1)創(chuàng)建應(yīng)用,就是創(chuàng)建一個游戲的窗口,包括創(chuàng)建游戲窗口(應(yīng)用)、把窗口顯示到瀏覽器頁面。 例如,通過var app ＝new PIXI.Application (500,800)語句即可創(chuàng)建一個寬500 像素、高800 像素的一個游戲窗口,App 為 應(yīng) 用 程 序 的 名 字； 通 過 document. body.appendChild (app.view)語句即可把上述應(yīng)用窗口顯示到瀏覽器頁面上。

(2)創(chuàng)建圖片,包括創(chuàng)建一個圖片,并把它顯示到應(yīng)用程序的舞臺上。 例如,通過var car ＝ new PIXI.Sprite.fromImage(“圖片所在地址”)語句即可創(chuàng)建一個圖片car； 通過app.stage.addChild(car)語句即可將名字為car 的圖片顯示到舞臺上。

(3)創(chuàng)建文本,包括創(chuàng)建一個文本,設(shè)置文本的位置、內(nèi)容、顏色等,并把文本顯示到應(yīng)用程序的舞臺上。例如,通過var defen ＝new PIXI.Text(“得分:0”)語句即可創(chuàng)建一個文本,內(nèi)容為“得分:0”。 設(shè)置文本的位置可通過水平(x)、垂直(y)兩個方向來設(shè)置,如defen.x ＝150 語句的作用是把defen 文本的水平位置設(shè)在相對于舞臺左側(cè)的150 像素處。 語句defen.text ＝“得分:100”可以修改文本顯示的內(nèi)容；語句defen.style.fill＝0xffffff 設(shè)定文本的字體顏色為白色。 app.stage.addChild(defen)語句把名字為defen 的文本顯示到舞臺上。

在上述案例的設(shè)計過程中,把變量和顯示元素的知識點涵蓋其中。 變量是指可以改變的量,通過var 定義的名字稱為變量,如上述的app,car,defen 等就是變量。 變量可以理解為計算機內(nèi)存的一個存儲空間,存儲程序中用到的數(shù)據(jù)。 顯示元素的常見屬性及含義如表1 所示。

表1 顯示元素的常見屬性

3.2 游戲控制版塊

在游戲控制版塊中,課程主要設(shè)計鼠標(biāo)控制事件和鼠標(biāo)跟隨事件兩個子版塊。 游戲案例采用植物大戰(zhàn)僵尸之收陽光、恐龍快打、斗地主之手牌選擇、大魚吃小魚、反恐重?fù)舻取?這些案例可以劃分為鼠標(biāo)控制和鼠標(biāo)跟隨兩個類別。

3.2.1 鼠標(biāo)控制

植物大戰(zhàn)僵尸之收陽光的游戲案例設(shè)計為鼠標(biāo)控制的點擊事件,當(dāng)鼠標(biāo)點擊草地上的陽光(圖片)時,陽光消失,這里用隱藏陽光圖片來實現(xiàn)。

恐龍快打的游戲案例設(shè)計為鼠標(biāo)控制方向事件,當(dāng)鼠標(biāo)點擊上、下、左、右4 個方向的按鈕圖標(biāo)時,控制人物向?qū)?yīng)的方向移動。

斗地主之手牌選擇游戲案例設(shè)計為鼠標(biāo)改變位置事件,當(dāng)鼠標(biāo)點擊某張紙牌時,紙牌的位置發(fā)生改變形成出牌的效果。 這里可以加上鼠標(biāo)的變形效果,當(dāng)鼠標(biāo)移入紙牌圖片時,鼠標(biāo)變成小手狀。 可以通過把圖片的buttonMode 屬性設(shè)置為true 來實現(xiàn)該功能。

3.2.2 鼠標(biāo)跟隨

大魚吃小魚游戲案例設(shè)計為鼠標(biāo)跟隨事件,控制大魚跟隨鼠標(biāo)移動,可用event.data.getLocalPosition(app.stage)語句來獲得鼠標(biāo)的當(dāng)前位置從而進(jìn)行鼠標(biāo)跟隨。

反恐重?fù)粲螒虬咐瑯釉O(shè)計為鼠標(biāo)跟隨事件,控制準(zhǔn)星(圖片)跟隨鼠標(biāo)移動,另外,可以在游戲界面的左下角處顯示準(zhǔn)星的x 和y 坐標(biāo)。 瞄準(zhǔn)后射擊目標(biāo)可以用點擊鼠標(biāo)左鍵實現(xiàn),為了增加射擊效果,可以在射擊處添加彈痕效果,最簡單的做法是在鼠標(biāo)點擊處添加一張彈痕圖片。

在上述案例的設(shè)計過程中,把鼠標(biāo)常用事件知識點涵蓋其中。 鼠標(biāo)常用事件如表2 所示。

表2 鼠標(biāo)常用事件

3.3 游戲動畫版塊

在游戲動畫版塊中,課程主要設(shè)計位置判斷、動畫實現(xiàn)和函數(shù)優(yōu)化3 個子版塊。 游戲案例采用打磚塊之橫桿移動、植物大戰(zhàn)僵尸之發(fā)射子彈和僵尸消失、小球動畫等。

3.3.1 位置判斷

打磚塊之橫桿移動的游戲案例設(shè)計為增加了位置判斷的動畫。 通過鼠標(biāo)事件mousemove 添加橫桿控制,跟隨鼠標(biāo)左右移動,通過位置判斷控制橫桿左右移動時,不出游戲界面的范圍。 采用判斷橫桿的橫坐標(biāo)x是否在屏幕范圍,如果小于屏幕的左邊界,則將橫桿固定在屏幕的左邊界上,同理,如果x 大于屏幕的右邊界,則將橫桿固定在屏幕的右邊界上。

3.3.2 動畫實現(xiàn)

植物大戰(zhàn)僵尸之發(fā)射子彈的游戲案例設(shè)計為子彈動畫,子彈隨著時間的增加向右移動,超出屏幕邊界時,移回原來的位置,以此達(dá)到連續(xù)發(fā)射子彈的效果。采用幀頻函數(shù)app.ticker.add(animate)添加動畫,通過函數(shù)function animate()｛｝實現(xiàn)具體的動畫效果,比如bullet.x+＝10 語句使子彈每次向右移動10 個像素。

植物大戰(zhàn)僵尸之僵尸消失的游戲案例設(shè)計為顯示元素旋轉(zhuǎn)、縮放、位置變換動畫。 同樣采用幀頻函數(shù)實現(xiàn)動畫效果,如zombie.rotation+＝0.2 表示將僵尸每次順時針旋轉(zhuǎn)0.2 弧度；語句zombie.scale.x-＝0.01 和zombie.scale.y-＝0.01 表示每次將僵尸縮小0.01 比例；語句zombie.x+＝0.1 和zombie.y-＝0.1 表示每次將僵尸向右上移動0.1 像素。

3.3.3 函數(shù)優(yōu)化

小球動畫的游戲案例設(shè)計為函數(shù)優(yōu)化的動畫,要求為上、下、左、右4 個小球?qū)崿F(xiàn)不同的動畫效果。 例如要求上面小球?qū)崿F(xiàn)大小變化、下面小球?qū)崿F(xiàn)顯示隱藏切換(調(diào)整圖片的透明度)、左邊小球?qū)崿F(xiàn)旋轉(zhuǎn)效果、右邊小球?qū)崿F(xiàn)翻轉(zhuǎn)效果(調(diào)整x 方向的縮放比例)。 此時,可以把每個小球的動畫單獨放在一個函數(shù)中,再在幀頻函數(shù)中逐個調(diào)用各個小球的動畫函數(shù),以此還達(dá)到函數(shù)優(yōu)化的目的,使程序結(jié)構(gòu)更加清晰,增加程序的可讀性。

在上述案例的設(shè)計過程中,把幀頻函數(shù)的知識點涵蓋其中。 幀頻函數(shù)是PIXI.Application()提供的功能,用于實現(xiàn)補間動畫的效果。 幀頻函數(shù)添加后,由系統(tǒng)自動調(diào)用,每秒鐘調(diào)用60 次。 另外,函數(shù)優(yōu)化不僅適用于幀頻函數(shù),也適用于程序的任意位置和任意功能。 此外,上述案例的設(shè)計還涵蓋了用于判斷的分支結(jié)構(gòu)、各類邏輯運算符等知識點。

3.4 游戲邏輯版塊

在游戲邏輯版塊中,課程主要設(shè)計變量邏輯、碰撞判斷和兩個子版塊。 游戲案例采用游戲暫停/繼續(xù)、游戲倒計時、打磚塊等。

3.4.1 變量邏輯

游戲暫停/繼續(xù)的案例設(shè)計為變量邏輯,游戲中有暫停和繼續(xù)兩個圖標(biāo)按鈕,但不能同時顯示。 游戲運行時顯示暫停按鈕,游戲暫停時顯示繼續(xù)按鈕。 為了標(biāo)示游戲是否在運行,可以設(shè)置一個布爾變量isRun,游戲運行時設(shè)置為true,否則設(shè)置為false。 這樣在幀頻函數(shù)中增加對該變量的判斷,當(dāng)isRun 變量為true 時,運行幀頻動畫繼續(xù)游戲即可。

游戲倒計時的案例同樣設(shè)計為變量邏輯,設(shè)置一個數(shù)值變量countdown 進(jìn)行游戲的倒計時計數(shù),如初始值設(shè)置為6,可以把該倒計時的數(shù)值顯示在游戲界面上。 鼠標(biāo)點擊一次,倒計時減1。 當(dāng)countdown 為0 時,游戲結(jié)束。 注意倒計時減1 的操作前提要判斷倒計時是否大于0,否則倒計時會一直向下減。

3.4.2 碰撞判斷

打磚塊的游戲案例設(shè)計為碰撞判斷邏輯,游戲界面頂端擺放了若干等死的磚塊,下面有一小球,在界面上運動,碰到邊界則反彈,碰到磚塊則磚塊消失、小球反彈。

游戲中的碰撞指的是游戲中的兩個圖片元素有交集。 為了方便判斷,把每個元素看作一個假想圓,這個假想圓類似于數(shù)學(xué)中多邊形的外接圓。 假設(shè)兩個元素分別為A 和B,其假想圓的半徑分別為rA和rB,當(dāng)A 和B 的中心點的距離小于它們的半徑之和rA+rB,我們就認(rèn)為A 和B 發(fā)生了碰撞。 半徑rA和rB可以通過圖片的大小獲得,如何求得A 和B 的中心點的距離呢？ 可以通過數(shù)學(xué)中的勾股定理來計算:直角三角形兩條直角邊的平方和等于斜邊的平方。 假設(shè)A 和B 的中心點坐標(biāo)分別為(xA,yA)和(xB,yB),如果有(xA-xB)×(xAxB)+ (yA-yB)×(yA-yB) ＜(rA+rB)×(rA+rB),則可判斷A 和B 碰撞。

在上述案例的設(shè)計過程中,把隨機數(shù)、變量類型轉(zhuǎn)換、對象類型、循環(huán)結(jié)構(gòu)、數(shù)組等知識點涵蓋其中。Math.random()可以獲得0 到1 之間的隨機小數(shù),Math.random() * (大-小) +小可以獲得指定范圍(小,大)內(nèi)的隨機小數(shù)。 利用隨機數(shù)可以實現(xiàn)游戲中的很多隨機功能,比如在隨機位置放置隨機對象,并讓對象以隨機速度隨機移動等。 采用變量計數(shù)來控制幀頻函數(shù)的調(diào)用頻率,可以實現(xiàn)每秒發(fā)射幾顆子彈等功能。 另外在檢測多組元素碰撞時,需要對A 組的每一個元素與B 組的每一個元素進(jìn)行碰撞檢測。

3.5 游戲綜合版塊

在游戲綜合版塊,設(shè)計飛機大戰(zhàn)游戲案例對整個課程所學(xué)內(nèi)容進(jìn)行綜合練習(xí)與測試。

3.5.1 游戲元素

在游戲窗口中,添加如下的游戲元素:背景圖片、云彩、主飛機、左右僚機、加速牌、血條、得分值、敵機組、敵機子彈、開始按鈕、暫停按鈕、結(jié)束按鈕等。 其中主飛機采用逐幀動畫, 可用語句 PIXI. extras.AnimatedSprite. fromImages 實現(xiàn),要求鼠標(biāo)跟隨。 左右僚機添加時直接固定在主飛機左右兩側(cè)的固定位置,與主飛機一起執(zhí)行鼠標(biāo)跟隨效果。 主飛機的子彈每擊中一架敵機,得分值增加200；主飛機每次被敵機子彈擊中,血條減少0.05%。 游戲開始顯示開始按鈕,開始游戲后顯示暫停按鈕,游戲結(jié)束(血條為0)時顯示結(jié)束按鈕,可以用布爾變量isStart 表示游戲是否開始。

3.5.2 游戲動畫

用幀頻函數(shù)實現(xiàn)游戲動畫,由于游戲邏輯復(fù)雜,這里采用函數(shù)優(yōu)化,代碼如下:

下面只需要對每個元素的動畫進(jìn)行編程即可,這種函數(shù)優(yōu)化的分治策略適合于任何復(fù)雜邏輯的編程,而且方便小組成員合作完成。 游戲制作完成后,界面如圖1 所示。

4 結(jié)語

OBE 教育模式是目前教育教學(xué)改革的重要方向,JavaScript 是Web 前端的主要技術(shù),本文針對傳統(tǒng)“JavaScript”課程教學(xué)的不足,提出了基于OBE 教育理念的課程設(shè)計,通過游戲案例的成果導(dǎo)向教學(xué)設(shè)計,激發(fā)學(xué)習(xí)興趣,培養(yǎng)計算思維,增強編程能力,促進(jìn)合作意識,提升創(chuàng)新精神。