基于OBE 理念的“JavaScript”課程設計

張紅紅，王桂芝

（1.河南牧業經濟學院 信息工程學院，河南 鄭州 450044；2.上海大學 計算機工程與科學學院，上海 200444）

0 引言

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

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

1 課程教學新理念

1.1 課程教學現狀

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

1.2 OBE 教學新理念

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

2 課程設計新思路

2.1 學習成果設計

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

2.2 教學方法設計

為了達到上述的學習成果,采用項目驅動式教學法,把知識點分散融入不同的項目。 這樣既可以避免瑣碎知識點學習的枯燥,又可以培養學生的編程思維,以更好地滿足社會的需求。 當今社會,由于信息技術的飛速發展,電腦、平板、手機等電子產品無處不在,現在的學生從小就在這樣的環境中成長,沒有學生不接觸電子產品。 他們通過電子產品更快地了解各種資訊,學習各種知識。 當然也進行各種娛樂,其中游戲是第一位的,游戲對人尤其是青年學生有著極大的吸引力。 鑒于此,我們在項目教學中引入游戲案例,這樣可以更好地激發學生學習的興趣,進而提升教學效果。

3 課程設計新內容

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

3.1 游戲顯示版塊

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

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

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

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

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

表1 顯示元素的常見屬性

3.2 游戲控制版塊

在游戲控制版塊中,課程主要設計鼠標控制事件和鼠標跟隨事件兩個子版塊。 游戲案例采用植物大戰僵尸之收陽光、恐龍快打、斗地主之手牌選擇、大魚吃小魚、反恐重擊等。 這些案例可以劃分為鼠標控制和鼠標跟隨兩個類別。

3.2.1 鼠標控制

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

恐龍快打的游戲案例設計為鼠標控制方向事件,當鼠標點擊上、下、左、右4 個方向的按鈕圖標時,控制人物向對應的方向移動。

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

3.2.2 鼠標跟隨

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

反恐重擊游戲案例同樣設計為鼠標跟隨事件,控制準星(圖片)跟隨鼠標移動,另外,可以在游戲界面的左下角處顯示準星的x 和y 坐標。 瞄準后射擊目標可以用點擊鼠標左鍵實現,為了增加射擊效果,可以在射擊處添加彈痕效果,最簡單的做法是在鼠標點擊處添加一張彈痕圖片。

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

表2 鼠標常用事件

3.3 游戲動畫版塊

在游戲動畫版塊中,課程主要設計位置判斷、動畫實現和函數優化3 個子版塊。 游戲案例采用打磚塊之橫桿移動、植物大戰僵尸之發射子彈和僵尸消失、小球動畫等。

3.3.1 位置判斷

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

3.3.2 動畫實現

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

植物大戰僵尸之僵尸消失的游戲案例設計為顯示元素旋轉、縮放、位置變換動畫。 同樣采用幀頻函數實現動畫效果,如zombie.rotation+＝0.2 表示將僵尸每次順時針旋轉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 函數優化

小球動畫的游戲案例設計為函數優化的動畫,要求為上、下、左、右4 個小球實現不同的動畫效果。 例如要求上面小球實現大小變化、下面小球實現顯示隱藏切換(調整圖片的透明度)、左邊小球實現旋轉效果、右邊小球實現翻轉效果(調整x 方向的縮放比例)。 此時,可以把每個小球的動畫單獨放在一個函數中,再在幀頻函數中逐個調用各個小球的動畫函數,以此還達到函數優化的目的,使程序結構更加清晰,增加程序的可讀性。

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

3.4 游戲邏輯版塊

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

3.4.1 變量邏輯

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

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

3.4.2 碰撞判斷

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

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

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

3.5 游戲綜合版塊

在游戲綜合版塊,設計飛機大戰游戲案例對整個課程所學內容進行綜合練習與測試。

3.5.1 游戲元素

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

3.5.2 游戲動畫

用幀頻函數實現游戲動畫,由于游戲邏輯復雜,這里采用函數優化,代碼如下:

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

4 結語

OBE 教育模式是目前教育教學改革的重要方向,JavaScript 是Web 前端的主要技術,本文針對傳統“JavaScript”課程教學的不足,提出了基于OBE 教育理念的課程設計,通過游戲案例的成果導向教學設計,激發學習興趣,培養計算思維,增強編程能力,促進合作意識,提升創新精神。