張紅紅,王桂芝
(1.河南牧業(yè)經(jīng)濟(jì)學(xué)院 信息工程學(xué)院,河南 鄭州 450044;2.上海大學(xué) 計(jì)算機(jī)工程與科學(xué)學(xué)院,上海 200444)
百年大計(jì),教育為本。 當(dāng)今社會(huì)是一個(gè)創(chuàng)新的社會(huì),如何培養(yǎng)具有創(chuàng)新能力的人才,是新時(shí)代背景下教育所面臨的一個(gè)巨大的挑戰(zhàn)[1]。 OBE 是一種基于產(chǎn)出的教育模式和理念,這種教育理念對(duì)培養(yǎng)學(xué)生的專業(yè)知識(shí)、能力和素質(zhì)有巨大的促進(jìn)作用[2]。 OBE 教育模式最早出現(xiàn)在美國(guó)和加拿大,很快便推廣到世界各國(guó)的教育改革中。 教育部于2019 年10 月30 日發(fā)布了《關(guān)于一流本科課程建設(shè)的實(shí)施意見(jiàn)》,其中明確提出,要確立學(xué)生中心、產(chǎn)出導(dǎo)向、持續(xù)改進(jìn)的理念,提升課程的高階性,突出課程的創(chuàng)新性,增加課程的挑戰(zhàn)度[3]。 OBE 教育理念是基于成果導(dǎo)向的,與過(guò)去關(guān)注學(xué)生學(xué)什么、怎么學(xué)的教育理念不同,OBE 更關(guān)注以學(xué)生為中心,學(xué)生學(xué)到了什么。 具體而言,OBE 包括以下幾個(gè)方面:一是學(xué)生的學(xué)習(xí)成果是什么;二是學(xué)生為什么要取得這些學(xué)習(xí)成果;三是怎么幫助學(xué)生取得這些學(xué)習(xí)成果;四是怎么判斷學(xué)生是否取得這些學(xué)習(xí)成果。
當(dāng)今社會(huì)是一個(gè)信息社會(huì),隨著信息技術(shù)的不斷發(fā)展,云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)正在深入普通大眾的工作、學(xué)習(xí)和生活。 所有的這些都離不開(kāi)網(wǎng)絡(luò)的發(fā)展,作為Web 前端的重要技術(shù), JavaScript 首屈一指。JavaScript 是一種高級(jí)腳本語(yǔ)言,有很多優(yōu)勢(shì),如事件驅(qū)動(dòng)、基于對(duì)象、實(shí)現(xiàn)計(jì)算機(jī)自動(dòng)處理流程、與網(wǎng)頁(yè)相結(jié)合等,是一種可以承載計(jì)算思維培養(yǎng)的編程語(yǔ)言[4]。所以,“JavaScript”課程不僅是計(jì)算機(jī)及相關(guān)理工科專業(yè)的核心課程,也成為很多文科生的計(jì)算機(jī)通識(shí)課程?;贠BE 理念的“JavaScript”課程設(shè)計(jì)對(duì)培養(yǎng)計(jì)算思維和創(chuàng)新能力有著舉足輕重的作用。
現(xiàn)階段的“JavaScript”課程教學(xué)以教師的教為中心,教師選擇教材,然后按教材備課,通過(guò)理論講授教材的每一個(gè)知識(shí)點(diǎn),之后按照知識(shí)點(diǎn)設(shè)計(jì)上機(jī)小練習(xí),最后通過(guò)期末考試考查學(xué)生的掌握情況。 學(xué)生對(duì)于這種教學(xué)模式積極性不高、參與性不高,從而導(dǎo)致課堂氣氛不活躍、教學(xué)效果不如意等[5]。 眾所周知,興趣是最好的老師,之所以如今的“JavaScript”課程教學(xué)效果不好,是因?yàn)闆](méi)有激發(fā)學(xué)生的學(xué)習(xí)興趣。 如何才能更有效地引導(dǎo)學(xué)生的學(xué)習(xí)興趣,這就需要在教學(xué)的方方面面下功夫。 改變教學(xué)理念、改革教學(xué)模式、改進(jìn)教學(xué)方法、改換考核方式等,以此促進(jìn)教學(xué)效果。
OBE 教學(xué)新理念是成果導(dǎo)向型的,以學(xué)生的學(xué)為中心,聚焦于學(xué)生學(xué)習(xí)的成果。 學(xué)生的學(xué)習(xí)要取得什么樣成果,達(dá)到什么樣的能力,要預(yù)先設(shè)計(jì)好。 這樣,一方面更貼近社會(huì)和業(yè)界對(duì)人才的需求,另一方面使學(xué)生的學(xué)習(xí)目標(biāo)更加明確,從而激發(fā)他們的學(xué)習(xí)興趣。在OBE 教學(xué)理念下,所有的教學(xué)過(guò)程和課程設(shè)計(jì)都要圍繞學(xué)習(xí)效果來(lái)進(jìn)行。 與以往統(tǒng)一考核的一刀切模式不同,OBE 教學(xué)新理念強(qiáng)調(diào)個(gè)性化評(píng)價(jià),與因材施教相對(duì)應(yīng),也要因材施考。 新教學(xué)理念提倡以生為本,就是以學(xué)生為中心,能夠激發(fā)學(xué)生學(xué)習(xí)的主動(dòng)性,有利于培養(yǎng)他們的創(chuàng)新精神。
把基于產(chǎn)出的OBE 教學(xué)理念引入“JavaScript”課程,首先要明確學(xué)習(xí)的成果。 “JavaScript”課程的學(xué)習(xí)成果包括知識(shí)目標(biāo)和能力目標(biāo)。 其中知識(shí)目標(biāo)包括“JavaScript”程序設(shè)計(jì)的所有知識(shí)點(diǎn):如變量、運(yùn)算符、分支、循環(huán)、數(shù)組、函數(shù)、事件等;能力目標(biāo)包括具有一定的計(jì)算思維、規(guī)范化的編程習(xí)慣、思考解決問(wèn)題的能力以及團(tuán)隊(duì)合作意識(shí)等。 學(xué)習(xí)成果不僅僅停留在知識(shí)點(diǎn)的掌握上,更重要的是理解和應(yīng)用所學(xué)知識(shí)以解決現(xiàn)實(shí)中的問(wèn)題。
為了達(dá)到上述的學(xué)習(xí)成果,采用項(xiàng)目驅(qū)動(dòng)式教學(xué)法,把知識(shí)點(diǎn)分散融入不同的項(xiàng)目。 這樣既可以避免瑣碎知識(shí)點(diǎn)學(xué)習(xí)的枯燥,又可以培養(yǎng)學(xué)生的編程思維,以更好地滿足社會(huì)的需求。 當(dāng)今社會(huì),由于信息技術(shù)的飛速發(fā)展,電腦、平板、手機(jī)等電子產(chǎn)品無(wú)處不在,現(xiàn)在的學(xué)生從小就在這樣的環(huán)境中成長(zhǎng),沒(méi)有學(xué)生不接觸電子產(chǎn)品。 他們通過(guò)電子產(chǎn)品更快地了解各種資訊,學(xué)習(xí)各種知識(shí)。 當(dāng)然也進(jìn)行各種娛樂(lè),其中游戲是第一位的,游戲?qū)θ擞绕涫乔嗄陮W(xué)生有著極大的吸引力。 鑒于此,我們?cè)陧?xiàng)目教學(xué)中引入游戲案例,這樣可以更好地激發(fā)學(xué)生學(xué)習(xí)的興趣,進(jìn)而提升教學(xué)效果。
針對(duì)游戲案例,課程設(shè)計(jì)的內(nèi)容包括游戲顯示、游戲控制、游戲動(dòng)畫(huà)、游戲邏輯和游戲綜合等幾個(gè)方面。
在游戲顯示版塊中,課程主要設(shè)計(jì)添加顯示元素和顯示元素的屬性兩個(gè)子版塊。 游戲案例采用制作賽車游戲界面,該案例可以劃分為創(chuàng)建應(yīng)用、創(chuàng)建圖片、創(chuàng)建文本3 個(gè)步驟。
(1)創(chuàng)建應(yīng)用,就是創(chuàng)建一個(gè)游戲的窗口,包括創(chuàng)建游戲窗口(應(yīng)用)、把窗口顯示到瀏覽器頁(yè)面。 例如,通過(guò)var app =new PIXI.Application (500,800)語(yǔ)句即可創(chuàng)建一個(gè)寬500 像素、高800 像素的一個(gè)游戲窗口,App 為 應(yīng) 用 程 序 的 名 字; 通 過(guò) document. body.appendChild (app.view)語(yǔ)句即可把上述應(yīng)用窗口顯示到瀏覽器頁(yè)面上。
(2)創(chuàng)建圖片,包括創(chuàng)建一個(gè)圖片,并把它顯示到應(yīng)用程序的舞臺(tái)上。 例如,通過(guò)var car = new PIXI.Sprite.fromImage(“圖片所在地址”)語(yǔ)句即可創(chuàng)建一個(gè)圖片car; 通過(guò)app.stage.addChild(car)語(yǔ)句即可將名字為car 的圖片顯示到舞臺(tái)上。
(3)創(chuàng)建文本,包括創(chuàng)建一個(gè)文本,設(shè)置文本的位置、內(nèi)容、顏色等,并把文本顯示到應(yīng)用程序的舞臺(tái)上。例如,通過(guò)var defen =new PIXI.Text(“得分:0”)語(yǔ)句即可創(chuàng)建一個(gè)文本,內(nèi)容為“得分:0”。 設(shè)置文本的位置可通過(guò)水平(x)、垂直(y)兩個(gè)方向來(lái)設(shè)置,如defen.x =150 語(yǔ)句的作用是把defen 文本的水平位置設(shè)在相對(duì)于舞臺(tái)左側(cè)的150 像素處。 語(yǔ)句defen.text =“得分:100”可以修改文本顯示的內(nèi)容;語(yǔ)句defen.style.fill=0xffffff 設(shè)定文本的字體顏色為白色。 app.stage.addChild(defen)語(yǔ)句把名字為defen 的文本顯示到舞臺(tái)上。
在上述案例的設(shè)計(jì)過(guò)程中,把變量和顯示元素的知識(shí)點(diǎn)涵蓋其中。 變量是指可以改變的量,通過(guò)var 定義的名字稱為變量,如上述的app,car,defen 等就是變量。 變量可以理解為計(jì)算機(jī)內(nèi)存的一個(gè)存儲(chǔ)空間,存儲(chǔ)程序中用到的數(shù)據(jù)。 顯示元素的常見(jiàn)屬性及含義如表1 所示。
表1 顯示元素的常見(jiàn)屬性
在游戲控制版塊中,課程主要設(shè)計(jì)鼠標(biāo)控制事件和鼠標(biāo)跟隨事件兩個(gè)子版塊。 游戲案例采用植物大戰(zhàn)僵尸之收陽(yáng)光、恐龍快打、斗地主之手牌選擇、大魚(yú)吃小魚(yú)、反恐重?fù)舻取?這些案例可以劃分為鼠標(biāo)控制和鼠標(biāo)跟隨兩個(gè)類別。
3.2.1 鼠標(biāo)控制
植物大戰(zhàn)僵尸之收陽(yáng)光的游戲案例設(shè)計(jì)為鼠標(biāo)控制的點(diǎn)擊事件,當(dāng)鼠標(biāo)點(diǎn)擊草地上的陽(yáng)光(圖片)時(shí),陽(yáng)光消失,這里用隱藏陽(yáng)光圖片來(lái)實(shí)現(xiàn)。
恐龍快打的游戲案例設(shè)計(jì)為鼠標(biāo)控制方向事件,當(dāng)鼠標(biāo)點(diǎn)擊上、下、左、右4 個(gè)方向的按鈕圖標(biāo)時(shí),控制人物向?qū)?yīng)的方向移動(dòng)。
斗地主之手牌選擇游戲案例設(shè)計(jì)為鼠標(biāo)改變位置事件,當(dāng)鼠標(biāo)點(diǎn)擊某張紙牌時(shí),紙牌的位置發(fā)生改變形成出牌的效果。 這里可以加上鼠標(biāo)的變形效果,當(dāng)鼠標(biāo)移入紙牌圖片時(shí),鼠標(biāo)變成小手狀。 可以通過(guò)把圖片的buttonMode 屬性設(shè)置為true 來(lái)實(shí)現(xiàn)該功能。
3.2.2 鼠標(biāo)跟隨
大魚(yú)吃小魚(yú)游戲案例設(shè)計(jì)為鼠標(biāo)跟隨事件,控制大魚(yú)跟隨鼠標(biāo)移動(dòng),可用event.data.getLocalPosition(app.stage)語(yǔ)句來(lái)獲得鼠標(biāo)的當(dāng)前位置從而進(jìn)行鼠標(biāo)跟隨。
反恐重?fù)粲螒虬咐瑯釉O(shè)計(jì)為鼠標(biāo)跟隨事件,控制準(zhǔn)星(圖片)跟隨鼠標(biāo)移動(dòng),另外,可以在游戲界面的左下角處顯示準(zhǔn)星的x 和y 坐標(biāo)。 瞄準(zhǔn)后射擊目標(biāo)可以用點(diǎn)擊鼠標(biāo)左鍵實(shí)現(xiàn),為了增加射擊效果,可以在射擊處添加彈痕效果,最簡(jiǎn)單的做法是在鼠標(biāo)點(diǎn)擊處添加一張彈痕圖片。
在上述案例的設(shè)計(jì)過(guò)程中,把鼠標(biāo)常用事件知識(shí)點(diǎn)涵蓋其中。 鼠標(biāo)常用事件如表2 所示。
表2 鼠標(biāo)常用事件
在游戲動(dòng)畫(huà)版塊中,課程主要設(shè)計(jì)位置判斷、動(dòng)畫(huà)實(shí)現(xiàn)和函數(shù)優(yōu)化3 個(gè)子版塊。 游戲案例采用打磚塊之橫桿移動(dòng)、植物大戰(zhàn)僵尸之發(fā)射子彈和僵尸消失、小球動(dòng)畫(huà)等。
3.3.1 位置判斷
打磚塊之橫桿移動(dòng)的游戲案例設(shè)計(jì)為增加了位置判斷的動(dòng)畫(huà)。 通過(guò)鼠標(biāo)事件mousemove 添加橫桿控制,跟隨鼠標(biāo)左右移動(dòng),通過(guò)位置判斷控制橫桿左右移動(dòng)時(shí),不出游戲界面的范圍。 采用判斷橫桿的橫坐標(biāo)x是否在屏幕范圍,如果小于屏幕的左邊界,則將橫桿固定在屏幕的左邊界上,同理,如果x 大于屏幕的右邊界,則將橫桿固定在屏幕的右邊界上。
3.3.2 動(dòng)畫(huà)實(shí)現(xiàn)
植物大戰(zhàn)僵尸之發(fā)射子彈的游戲案例設(shè)計(jì)為子彈動(dòng)畫(huà),子彈隨著時(shí)間的增加向右移動(dòng),超出屏幕邊界時(shí),移回原來(lái)的位置,以此達(dá)到連續(xù)發(fā)射子彈的效果。采用幀頻函數(shù)app.ticker.add(animate)添加動(dòng)畫(huà),通過(guò)函數(shù)function animate(){}實(shí)現(xiàn)具體的動(dòng)畫(huà)效果,比如bullet.x+=10 語(yǔ)句使子彈每次向右移動(dòng)10 個(gè)像素。
植物大戰(zhàn)僵尸之僵尸消失的游戲案例設(shè)計(jì)為顯示元素旋轉(zhuǎn)、縮放、位置變換動(dòng)畫(huà)。 同樣采用幀頻函數(shù)實(shí)現(xiàn)動(dòng)畫(huà)效果,如zombie.rotation+=0.2 表示將僵尸每次順時(shí)針旋轉(zhuǎn)0.2 弧度;語(yǔ)句zombie.scale.x-=0.01 和zombie.scale.y-=0.01 表示每次將僵尸縮小0.01 比例;語(yǔ)句zombie.x+=0.1 和zombie.y-=0.1 表示每次將僵尸向右上移動(dòng)0.1 像素。
3.3.3 函數(shù)優(yōu)化
小球動(dòng)畫(huà)的游戲案例設(shè)計(jì)為函數(shù)優(yōu)化的動(dòng)畫(huà),要求為上、下、左、右4 個(gè)小球?qū)崿F(xiàn)不同的動(dòng)畫(huà)效果。 例如要求上面小球?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í),可以把每個(gè)小球的動(dòng)畫(huà)單獨(dú)放在一個(gè)函數(shù)中,再在幀頻函數(shù)中逐個(gè)調(diào)用各個(gè)小球的動(dòng)畫(huà)函數(shù),以此還達(dá)到函數(shù)優(yōu)化的目的,使程序結(jié)構(gòu)更加清晰,增加程序的可讀性。
在上述案例的設(shè)計(jì)過(guò)程中,把幀頻函數(shù)的知識(shí)點(diǎn)涵蓋其中。 幀頻函數(shù)是PIXI.Application()提供的功能,用于實(shí)現(xiàn)補(bǔ)間動(dòng)畫(huà)的效果。 幀頻函數(shù)添加后,由系統(tǒng)自動(dòng)調(diào)用,每秒鐘調(diào)用60 次。 另外,函數(shù)優(yōu)化不僅適用于幀頻函數(shù),也適用于程序的任意位置和任意功能。 此外,上述案例的設(shè)計(jì)還涵蓋了用于判斷的分支結(jié)構(gòu)、各類邏輯運(yùn)算符等知識(shí)點(diǎn)。
在游戲邏輯版塊中,課程主要設(shè)計(jì)變量邏輯、碰撞判斷和兩個(gè)子版塊。 游戲案例采用游戲暫停/繼續(xù)、游戲倒計(jì)時(shí)、打磚塊等。
3.4.1 變量邏輯
游戲暫停/繼續(xù)的案例設(shè)計(jì)為變量邏輯,游戲中有暫停和繼續(xù)兩個(gè)圖標(biāo)按鈕,但不能同時(shí)顯示。 游戲運(yùn)行時(shí)顯示暫停按鈕,游戲暫停時(shí)顯示繼續(xù)按鈕。 為了標(biāo)示游戲是否在運(yùn)行,可以設(shè)置一個(gè)布爾變量isRun,游戲運(yùn)行時(shí)設(shè)置為true,否則設(shè)置為false。 這樣在幀頻函數(shù)中增加對(duì)該變量的判斷,當(dāng)isRun 變量為true 時(shí),運(yùn)行幀頻動(dòng)畫(huà)繼續(xù)游戲即可。
游戲倒計(jì)時(shí)的案例同樣設(shè)計(jì)為變量邏輯,設(shè)置一個(gè)數(shù)值變量countdown 進(jìn)行游戲的倒計(jì)時(shí)計(jì)數(shù),如初始值設(shè)置為6,可以把該倒計(jì)時(shí)的數(shù)值顯示在游戲界面上。 鼠標(biāo)點(diǎn)擊一次,倒計(jì)時(shí)減1。 當(dāng)countdown 為0 時(shí),游戲結(jié)束。 注意倒計(jì)時(shí)減1 的操作前提要判斷倒計(jì)時(shí)是否大于0,否則倒計(jì)時(shí)會(huì)一直向下減。
3.4.2 碰撞判斷
打磚塊的游戲案例設(shè)計(jì)為碰撞判斷邏輯,游戲界面頂端擺放了若干等死的磚塊,下面有一小球,在界面上運(yùn)動(dòng),碰到邊界則反彈,碰到磚塊則磚塊消失、小球反彈。
游戲中的碰撞指的是游戲中的兩個(gè)圖片元素有交集。 為了方便判斷,把每個(gè)元素看作一個(gè)假想圓,這個(gè)假想圓類似于數(shù)學(xué)中多邊形的外接圓。 假設(shè)兩個(gè)元素分別為A 和B,其假想圓的半徑分別為rA和rB,當(dāng)A 和B 的中心點(diǎn)的距離小于它們的半徑之和rA+rB,我們就認(rèn)為A 和B 發(fā)生了碰撞。 半徑rA和rB可以通過(guò)圖片的大小獲得,如何求得A 和B 的中心點(diǎn)的距離呢? 可以通過(guò)數(shù)學(xué)中的勾股定理來(lái)計(jì)算:直角三角形兩條直角邊的平方和等于斜邊的平方。 假設(shè)A 和B 的中心點(diǎn)坐標(biāo)分別為(xA,yA)和(xB,yB),如果有(xA-xB)×(xAxB)+ (yA-yB)×(yA-yB) <(rA+rB)×(rA+rB),則可判斷A 和B 碰撞。
在上述案例的設(shè)計(jì)過(guò)程中,把隨機(jī)數(shù)、變量類型轉(zhuǎn)換、對(duì)象類型、循環(huán)結(jié)構(gòu)、數(shù)組等知識(shí)點(diǎn)涵蓋其中。Math.random()可以獲得0 到1 之間的隨機(jī)小數(shù),Math.random() * (大-小) +小可以獲得指定范圍(小,大)內(nèi)的隨機(jī)小數(shù)。 利用隨機(jī)數(shù)可以實(shí)現(xiàn)游戲中的很多隨機(jī)功能,比如在隨機(jī)位置放置隨機(jī)對(duì)象,并讓對(duì)象以隨機(jī)速度隨機(jī)移動(dòng)等。 采用變量計(jì)數(shù)來(lái)控制幀頻函數(shù)的調(diào)用頻率,可以實(shí)現(xiàn)每秒發(fā)射幾顆子彈等功能。 另外在檢測(cè)多組元素碰撞時(shí),需要對(duì)A 組的每一個(gè)元素與B 組的每一個(gè)元素進(jìn)行碰撞檢測(cè)。
在游戲綜合版塊,設(shè)計(jì)飛機(jī)大戰(zhàn)游戲案例對(duì)整個(gè)課程所學(xué)內(nèi)容進(jìn)行綜合練習(xí)與測(cè)試。
3.5.1 游戲元素
在游戲窗口中,添加如下的游戲元素:背景圖片、云彩、主飛機(jī)、左右僚機(jī)、加速牌、血條、得分值、敵機(jī)組、敵機(jī)子彈、開(kāi)始按鈕、暫停按鈕、結(jié)束按鈕等。 其中主飛機(jī)采用逐幀動(dòng)畫(huà), 可用語(yǔ)句 PIXI. extras.AnimatedSprite. fromImages 實(shí)現(xiàn),要求鼠標(biāo)跟隨。 左右僚機(jī)添加時(shí)直接固定在主飛機(jī)左右兩側(cè)的固定位置,與主飛機(jī)一起執(zhí)行鼠標(biāo)跟隨效果。 主飛機(jī)的子彈每擊中一架敵機(jī),得分值增加200;主飛機(jī)每次被敵機(jī)子彈擊中,血條減少0.05%。 游戲開(kāi)始顯示開(kāi)始按鈕,開(kāi)始游戲后顯示暫停按鈕,游戲結(jié)束(血條為0)時(shí)顯示結(jié)束按鈕,可以用布爾變量isStart 表示游戲是否開(kāi)始。
3.5.2 游戲動(dòng)畫(huà)
用幀頻函數(shù)實(shí)現(xiàn)游戲動(dòng)畫(huà),由于游戲邏輯復(fù)雜,這里采用函數(shù)優(yōu)化,代碼如下:
下面只需要對(duì)每個(gè)元素的動(dòng)畫(huà)進(jìn)行編程即可,這種函數(shù)優(yōu)化的分治策略適合于任何復(fù)雜邏輯的編程,而且方便小組成員合作完成。 游戲制作完成后,界面如圖1 所示。
OBE 教育模式是目前教育教學(xué)改革的重要方向,JavaScript 是Web 前端的主要技術(shù),本文針對(duì)傳統(tǒng)“JavaScript”課程教學(xué)的不足,提出了基于OBE 教育理念的課程設(shè)計(jì),通過(guò)游戲案例的成果導(dǎo)向教學(xué)設(shè)計(jì),激發(fā)學(xué)習(xí)興趣,培養(yǎng)計(jì)算思維,增強(qiáng)編程能力,促進(jìn)合作意識(shí),提升創(chuàng)新精神。