第12章 網(wǎng)頁(yè)版2048小游戲 教學(xué)設(shè)計(jì)

第3章面向?qū)ο螅ㄉ希禞avaScript前端開(kāi)發(fā)案例教程》教學(xué)設(shè)計(jì)課程名稱：JavaScript前端開(kāi)發(fā)案例教程授課年級(jí)：年級(jí)授課學(xué)期：學(xué)年第一學(xué)期教師姓名：某某老師年月日課題名稱第12章網(wǎng)頁(yè)版2048小游戲計(jì)劃學(xué)時(shí)3學(xué)時(shí)內(nèi)容分析2048是一款比較流行的數(shù)字游戲，它是GabrieleCirulli為了好玩，根據(jù)已有的數(shù)字游戲玩法開(kāi)發(fā)而成的一款新的數(shù)字游戲，并將其開(kāi)源版本放到Github上后意外走紅。隨后2048出現(xiàn)了各種衍生版，如2048六邊形、挑戰(zhàn)2048、漢服2048等。接下來(lái)，在全面學(xué)習(xí)了JavaScript和jQuery以后，請(qǐng)利用DOM操作、動(dòng)畫(huà)特效、鍵盤事件、鼠標(biāo)事件等結(jié)合HTML與CSS實(shí)現(xiàn)網(wǎng)頁(yè)版的2048小游戲。教學(xué)目標(biāo)及基本要求掌握DOM，能夠?qū)υ剡M(jìn)行操作掌握事件處理，完成不同功能的開(kāi)發(fā)掌握動(dòng)畫(huà)特效，改善游戲的體驗(yàn)度教學(xué)重點(diǎn)控制游戲數(shù)值、實(shí)現(xiàn)單元格移動(dòng)、判斷勝利和失敗教學(xué)難點(diǎn)實(shí)現(xiàn)單元格移動(dòng)教學(xué)方式教學(xué)采用教師課堂講授為主概念性知識(shí)點(diǎn)：提出為什么，將抽象具體化，配合教學(xué)PPT、圖例輔助講解。功能性知識(shí)點(diǎn)：提需求，并上機(jī)演示如何應(yīng)用，重點(diǎn)內(nèi)容總結(jié)運(yùn)行原理。綜合實(shí)戰(zhàn)操作：分析整體的設(shè)計(jì)思路和步驟，對(duì)具體操作進(jìn)行上機(jī)演練。教學(xué)過(guò)程第一學(xué)時(shí)（設(shè)計(jì)游戲界面、控制游戲數(shù)值）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）演示Ajax技術(shù)在互聯(lián)網(wǎng)中的應(yīng)用，引出本次要學(xué)習(xí)的課程。Ajax技術(shù)與服務(wù)器密切相關(guān)，在學(xué)習(xí)Ajax前需要先了解服務(wù)器相關(guān)的知識(shí)。（3）明確學(xué)習(xí)方向。構(gòu)建網(wǎng)頁(yè)游戲布局。初始化游戲界面。自動(dòng)生成空棋盤格。創(chuàng)建棋盤數(shù)組。為棋盤生成隨機(jī)數(shù)字單元格。在頁(yè)面中顯示數(shù)字單元格。二、知識(shí)講解設(shè)計(jì)游戲界面編寫(xiě)HTML頁(yè)面，準(zhǔn)備游戲分?jǐn)?shù)、棋盤背景、棋盤格的基本結(jié)構(gòu)和樣式。封裝Game2048()函數(shù)實(shí)現(xiàn)游戲功能，分析函數(shù)的參數(shù)如何進(jìn)行設(shè)定。實(shí)現(xiàn)游戲的class前綴、單元格數(shù)量、單元格大小、單元格距離的可定制性。分析程序架構(gòu)，引出頁(yè)面代碼和數(shù)據(jù)代碼相分離的設(shè)計(jì)思想。利用JavaScript初始化游戲界面，通過(guò)View構(gòu)造函數(shù)專門自動(dòng)生成棋盤背景和棋盤格，根據(jù)參數(shù)來(lái)控制單元格的顯示效果。自動(dòng)生成棋盤格，分析每個(gè)棋盤格的顯示位置如何計(jì)算。在View中編寫(xiě)init()方法實(shí)現(xiàn)自動(dòng)生成效果。控制游戲數(shù)值編寫(xiě)B(tài)oard構(gòu)造函數(shù)處理單元格中的數(shù)值。將單元格抽象成二維數(shù)組，外層數(shù)值表示行，內(nèi)層數(shù)值表示列。在Board中編寫(xiě)init()方法實(shí)現(xiàn)二維數(shù)組的初始化。編寫(xiě)generate()方法實(shí)現(xiàn)在二維數(shù)組的隨機(jī)位置生成隨機(jī)數(shù)字單元格。引出事件的設(shè)計(jì)思想，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，觸發(fā)事件，控制頁(yè)面變化。在View中編寫(xiě)addNum()方法，實(shí)現(xiàn)在頁(yè)面中顯示數(shù)字單元格。為不同的數(shù)字單元格設(shè)置不同的樣式。實(shí)現(xiàn)在棋盤格中增加單元格時(shí)，以展開(kāi)的動(dòng)畫(huà)效果進(jìn)行顯示。三、知識(shí)鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）使用博學(xué)谷系統(tǒng)下發(fā)課后作業(yè)。第二學(xué)時(shí)（實(shí)現(xiàn)單元格移動(dòng)、設(shè)置游戲分?jǐn)?shù)、判斷勝利和失敗、重新開(kāi)始游戲）一、回顧上節(jié)課內(nèi)容（1）對(duì)上節(jié)課布置的作業(yè)以及學(xué)生提出的問(wèn)題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。單元格數(shù)組元素移動(dòng)。以動(dòng)畫(huà)效果移動(dòng)頁(yè)面中的單元格。通過(guò)鍵盤控制單元格移動(dòng)。設(shè)置游戲分?jǐn)?shù)。判斷游戲是否獲勝。判斷游戲是否失敗。完善游戲結(jié)束頁(yè)面。重新開(kāi)始游戲。二、知識(shí)講解實(shí)現(xiàn)單元格移動(dòng)分析游戲的移動(dòng)規(guī)則，以左移進(jìn)行演示。思考具體算法如何實(shí)現(xiàn)。在Board中增加moveLeft()方法，實(shí)現(xiàn)二維數(shù)組中的數(shù)字左移操作。將每一行的單元格按照指定需求進(jìn)行遍歷。分析比較的情況，不同情況采取不同的處理方式。實(shí)現(xiàn)單元格的移動(dòng)效果。通過(guò)控制臺(tái)查看移動(dòng)結(jié)果，在每次進(jìn)行移動(dòng)操作時(shí)，觸發(fā)onMove()事件，控制頁(yè)面中的單元格進(jìn)行移動(dòng)。記錄整個(gè)移動(dòng)操作是否發(fā)生過(guò)移動(dòng)，以確定是否需要生成新的單元格，以動(dòng)畫(huà)效果移動(dòng)單元格，控制頁(yè)面中的指定位置的單元格進(jìn)行移動(dòng)或合并操作。并注意設(shè)置動(dòng)畫(huà)的時(shí)間，以及解決動(dòng)畫(huà)效果重疊的問(wèn)題。實(shí)現(xiàn)通過(guò)鍵盤移動(dòng)單元格，當(dāng)按下鍵盤中的指定方向鍵時(shí)，調(diào)用對(duì)應(yīng)的方法實(shí)現(xiàn)單元格移動(dòng)。在左移動(dòng)完成后，繼續(xù)實(shí)現(xiàn)右移、上移、下移的效果。設(shè)置游戲分?jǐn)?shù)分析游戲分?jǐn)?shù)計(jì)算規(guī)則。在onMove()事件中控制游戲的分?jǐn)?shù)變化。在View中增加updateScore()方法，控制頁(yè)面中的分?jǐn)?shù)顯示。判斷勝利和失敗分析游戲勝利條件。通過(guò)變量winNum保存游戲的勝利條件數(shù)值，并通過(guò)變量isGameOver控制游戲是否已經(jīng)結(jié)束。若游戲已經(jīng)結(jié)束，則在鍵盤事件中不再進(jìn)行單元格的移動(dòng)操作。在onMove()事件中判斷游戲的結(jié)果，若合并出了指定數(shù)字的單元格，則表示游戲獲勝了。分析游戲失敗條件。在Board中編寫(xiě)canMove()方法，判斷當(dāng)前是否還可以繼續(xù)移動(dòng)。對(duì)二維數(shù)組進(jìn)行遍歷，若既不能合并又不能移動(dòng)，則表示游戲失敗了。完善游戲結(jié)束頁(yè)面，在游戲勝利或失敗時(shí)，顯示游戲結(jié)果。重新開(kāi)始游戲?yàn)榱朔奖阍谟螒蚴r(shí)重新開(kāi)始游戲，在View中增加cleanNum()方法，實(shí)現(xiàn)清空頁(yè)面中所有數(shù)字單元格。調(diào)整代碼結(jié)構(gòu)，將游戲初始化相關(guān)的代碼封裝到start()函數(shù)中，從而使代碼更好的復(fù)用。當(dāng)進(jìn)行重新開(kāi)始游戲操作時(shí)，通過(guò)調(diào)用start()函數(shù)重新開(kāi)始游戲。三、知識(shí)鞏固（