1、武漢理 工大學(xué)華 夏學(xué)院武漢理 工大學(xué)華 夏學(xué)院課 程 設(shè) 計(jì) 報(bào) 告 書(shū)課 程 設(shè) 計(jì) 報(bào) 告 書(shū)課程名稱：課程名稱：網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)題題目目：俄羅斯方塊游戲系系名：名：信息工程系專業(yè)班級(jí)：專業(yè)班級(jí)：姓姓名名：學(xué)學(xué)號(hào)：號(hào)：指導(dǎo)教師指導(dǎo)教師:20162016年1 1月1414日課課 程程 設(shè)設(shè) 計(jì)計(jì) 任任 務(wù)務(wù) 書(shū)書(shū)課程名稱： 網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)指導(dǎo)教師： 蘇永紅班級(jí)名稱： 軟件 1131開(kāi)課系、教研室：軟件與信息安全一、課程設(shè)計(jì)目的與任務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)與制作課程的后續(xù)實(shí)踐課程，旨在通過(guò)一周的實(shí)踐訓(xùn)練，加深學(xué)生對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的概念，原理和方法的理解，加強(qiáng)學(xué)生綜合運(yùn)用 HTML、C

2、SS、JavaScript、asp 網(wǎng)頁(yè)設(shè)計(jì)技術(shù)進(jìn)行實(shí)際問(wèn)題處理的能力，進(jìn)一步提高學(xué)生進(jìn)行分析問(wèn)題和解決問(wèn)題的能力，包含系統(tǒng)分析、系統(tǒng)設(shè)計(jì)、系統(tǒng)實(shí)現(xiàn)和系統(tǒng)測(cè)試的能力。學(xué)生將在指導(dǎo)老師的指導(dǎo)下，完成從需求分析，系統(tǒng)設(shè)計(jì)，編碼到測(cè)試的全過(guò)程。二、課程設(shè)計(jì)的內(nèi)容與基本要求1、課程設(shè)計(jì)題目俄羅斯方塊游戲的設(shè)計(jì)與實(shí)現(xiàn)2、課程設(shè)計(jì)內(nèi)容俄羅斯方塊游戲是一個(gè)單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊(通常有4個(gè)，組成各種不同的形狀)，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動(dòng)，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒(méi)有空缺，那么這行就可以“消除”，上面的

3、所有“方塊”會(huì)“整體掉下來(lái)”。對(duì)于HTML5、JavaScript學(xué)習(xí)者來(lái)說(shuō)，學(xué)習(xí)開(kāi)發(fā)這個(gè)小程序難度適中，而且能很好地培養(yǎng)學(xué)習(xí)者的學(xué)習(xí)樂(lè)趣。 開(kāi)發(fā)者需要從程序員的角度來(lái)看待玩家面對(duì)的游戲界面， 游戲界面上的每個(gè)方塊(既可以涂上不同的顏色， 也可以繪制不同圖片)在底層只要使用一個(gè)數(shù)值標(biāo)識(shí)來(lái)代表即可，不同的方塊使用不同的數(shù)值標(biāo)識(shí)。開(kāi)發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外， 開(kāi)發(fā)者還需要理解為游戲添加監(jiān)聽(tīng)方法，通過(guò)事件監(jiān)聽(tīng)可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。本程序稍微有點(diǎn)復(fù)雜的地方是，當(dāng)方塊組合旋轉(zhuǎn)時(shí)，開(kāi)發(fā)者需要計(jì)算每個(gè)方塊旋轉(zhuǎn)后的坐標(biāo)。具

4、體要求為：(1) 開(kāi)發(fā)游戲界面。游戲界面大致分為兩個(gè)區(qū)域：速度、積分顯示區(qū)和主游戲界面區(qū)。(2) 建立游戲的狀態(tài)數(shù)據(jù)模型。對(duì)于游戲玩家而言，游戲界面上看到的“元素”千差萬(wàn)別、變化多端，但對(duì)于游戲開(kāi)發(fā)者而言，游戲界面上的元素在底層都是一些數(shù)據(jù)，只是不同數(shù)據(jù)所繪制的圖片存在差異而已， 因此， 建立游戲的狀態(tài)數(shù)據(jù)模型是實(shí)現(xiàn)游戲邏輯的重要步驟。(3) 實(shí)現(xiàn)游戲邏輯。定義了游戲狀態(tài)模型后，接下來(lái)程序需要處理方塊組合“掉落” ，還需要處理方塊組合“左移” 、 “右移” 、 “旋轉(zhuǎn)”等，通過(guò)事件監(jiān)聽(tīng)可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。此處使用 Local St

5、orage來(lái)記錄游戲狀態(tài)。(4) 初始化游戲狀態(tài)。在游戲過(guò)程中，程序使用了 Local Storage 來(lái)保存游戲狀態(tài)，包括游戲的當(dāng)前積分、游戲速度、已有方塊的狀態(tài)等。為了正常使用 Local Storage 所記錄的游戲狀態(tài)，程序可以為 window 對(duì)象的 onload 事件綁定事件監(jiān)聽(tīng)器，程序可以在 windows 裝載完成時(shí)通過(guò) Local Storage 讀取這些數(shù)據(jù)，并把這些數(shù)據(jù)顯示出來(lái)。為了提高分析問(wèn)題和解決實(shí)際問(wèn)題的能力。每個(gè)人需要檢查游戲運(yùn)行結(jié)果，設(shè)計(jì)報(bào)告文檔，并提交紙質(zhì)版的課程報(bào)告和電子版的網(wǎng)站設(shè)計(jì)資料，包括：源程序，網(wǎng)站運(yùn)行效果截圖，電子版的資料以班為單位刻成光盤(pán)后由學(xué)習(xí)

6、委員統(tǒng)一提交。3、設(shè)計(jì)報(bào)告撰寫(xiě)格式要求1 設(shè)計(jì)題目與要求2 設(shè)計(jì)思想3 系統(tǒng)結(jié)構(gòu)4 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)，內(nèi)容包括各個(gè)模塊的設(shè)計(jì)，模塊的算法流程圖，相關(guān)知識(shí)點(diǎn)的使用，可以截取少量代碼說(shuō)明，并加上注釋，圖居中顯示，圖下方要有圖編號(hào)和圖名稱。5 運(yùn)行結(jié)果及結(jié)果分析6 自我評(píng)價(jià)與總結(jié)7 參考文獻(xiàn)三、課程設(shè)計(jì)步驟及時(shí)間進(jìn)度和場(chǎng)地安排本課程設(shè)計(jì)將安排在第 20 周, 教育技術(shù)中心。具體安排如下：第一天下發(fā)任務(wù)書(shū)，學(xué)生查閱資料第二、三天 系統(tǒng)設(shè)計(jì)和原型開(kāi)發(fā)，系統(tǒng)功能實(shí)現(xiàn)第四天書(shū)寫(xiě)課程設(shè)計(jì)報(bào)告，系統(tǒng)調(diào)試 測(cè)試 打包和驗(yàn)收周次星期一星期二星期三星期四星期五第 20 周第 3-6 節(jié)第 3-6 節(jié)第 3-6 節(jié)第

7、 3-6 節(jié)地點(diǎn)現(xiàn)教 212現(xiàn)教 212現(xiàn)教 212現(xiàn)教 212四、課程設(shè)計(jì)考核及評(píng)分標(biāo)準(zhǔn)課程設(shè)計(jì)考核將綜合考慮學(xué)生考勤和參與度， 系統(tǒng)設(shè)計(jì)方案正確性， 系統(tǒng)設(shè)計(jì)和開(kāi)發(fā)效果以及課程設(shè)計(jì)報(bào)告書(shū)的質(zhì)量。具體評(píng)分標(biāo)準(zhǔn)如下：設(shè)置六個(gè)評(píng)分點(diǎn)（1）設(shè)計(jì)方案正確，具有可行性、創(chuàng)新性；25 分（2）系統(tǒng)開(kāi)發(fā)效果較好；25 分（3）態(tài)度認(rèn)真、刻苦鉆研、遵守紀(jì)律；10 分（4）設(shè)計(jì)報(bào)告規(guī)范、課程設(shè)計(jì)報(bào)告質(zhì)量高、參考文獻(xiàn)充分20 分（5）課程設(shè)計(jì)答辯概念清晰，內(nèi)容正確10 分（6）課程設(shè)計(jì)期間的課堂考勤、答疑與統(tǒng)籌考慮。10 分按上述六項(xiàng)分別記分后求和，總分按五級(jí)記分法記載最后成績(jī)。優(yōu)秀（10090分），良好（80

8、89分），中等（7079分），及格（6069分），不及格（059 分）1 1 設(shè)計(jì)題目與要求設(shè)計(jì)題目與要求1.11.1 設(shè)計(jì)題目設(shè)計(jì)題目課設(shè)題目：俄羅斯方塊游戲的設(shè)計(jì)與實(shí)現(xiàn)1.2 設(shè)計(jì)要求設(shè)計(jì)要求(1) 開(kāi)發(fā)游戲界面。游戲界面大致分為兩個(gè)區(qū)域：速度、積分顯示區(qū)和主游戲界面區(qū)。(2) 建立游戲的狀態(tài)數(shù)據(jù)模型。對(duì)于游戲玩家而言，游戲界面上看到的“元素”千差萬(wàn)別、變化多端，但對(duì)于游戲開(kāi)發(fā)者而言，游戲界面上的元素在底層都是一些數(shù)據(jù)，只是不同數(shù)據(jù)所繪制的圖片存在差異而已， 因此， 建立游戲的狀態(tài)數(shù)據(jù)模型是實(shí)現(xiàn)游戲邏輯的重要步驟。(3) 實(shí)現(xiàn)游戲邏輯。定義了游戲狀態(tài)模型后，接下來(lái)程序需要處理方塊組合“掉落

9、” ，還需要處理方塊組合“左移” 、 “右移” 、 “旋轉(zhuǎn)”等，通過(guò)事件監(jiān)聽(tīng)可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。此處使用 Local Storage來(lái)記錄游戲狀態(tài)。(4) 初始化游戲狀態(tài)。在游戲過(guò)程中，程序使用了 Local Storage 來(lái)保存游戲狀態(tài)，包括游戲的當(dāng)前積分、游戲速度、已有方塊的狀態(tài)等。為了正常使用 Local Storage 所記錄的游戲狀態(tài)，程序可以為 window 對(duì)象的 onload 事件綁定事件監(jiān)聽(tīng)器，程序可以在 windows 裝載完成時(shí)通過(guò) Local Storage 讀取這些數(shù)據(jù)，并把這些數(shù)據(jù)顯示出來(lái)。2 2 設(shè)

10、計(jì)思想設(shè)計(jì)思想俄羅斯方塊游戲是一個(gè)單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊(通常有4個(gè)，組成各種不同的形狀)，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動(dòng)，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒(méi)有空缺，那么這行就可以“消除”，上面的所有“方塊”會(huì)“整體掉下來(lái)”。開(kāi)發(fā)者需要從程序員的角度來(lái)看待玩家面對(duì)的游戲界面，游戲界面上的每個(gè)方塊(既可以涂上不同的顏色，也可以繪制不同圖片)在底層只要使用一個(gè)數(shù)值標(biāo)識(shí)來(lái)代表即可，不同的方塊使用不同的數(shù)值標(biāo)識(shí)。開(kāi)發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外， 開(kāi)發(fā)者還需要理解為游戲添加監(jiān)聽(tīng)方法，通過(guò)事

11、件監(jiān)聽(tīng)可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。本程序稍微有點(diǎn)復(fù)雜的地方是，當(dāng)方塊組合旋轉(zhuǎn)時(shí)，開(kāi)發(fā)者需要計(jì)算每個(gè)方塊旋轉(zhuǎn)后的坐標(biāo)。3 3 系統(tǒng)結(jié)構(gòu)系統(tǒng)結(jié)構(gòu)系統(tǒng)結(jié)構(gòu)圖如圖 1 所示：圖 1系統(tǒng)結(jié)構(gòu)圖4 4 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.14.1 游戲區(qū)模塊（創(chuàng)建游戲區(qū)、處理玩家操作、顯示操作結(jié)果）游戲區(qū)模塊（創(chuàng)建游戲區(qū)、處理玩家操作、顯示操作結(jié)果）主界面采用 canvas 繪圖元素，該的大小是由程序動(dòng)態(tài)計(jì)算得到的。部分代碼如下所示：/ 定義一個(gè)創(chuàng)建 canvas 組件的函數(shù)var createCanvas = function(rows , c

12、ols , cellWidth, cellHeight)tetris_canvas = document.createElement(canvas);/ 設(shè)置 canvas 組件的高度、寬度tetris_canvas.width = cols * cellWidth;tetris_canvas.height = rows * cellHeight;/ 設(shè)置 canvas 組件的邊框tetris_canvas.style.border = 1px solid black;/ 獲取 canvas 上的繪圖 APItetris_ctx = tetris_canvas.getContext(2d);/

13、 開(kāi)始創(chuàng)建路徑tetris_ctx.beginPath();/ 繪制橫向網(wǎng)絡(luò)對(duì)應(yīng)的路徑for (var i = 1 ; i TETRIS_ROWS ; i+)tetris_ctx.moveTo(0 , i * CELL_SIZE);tetris_ctx.lineTo(TETRIS_COLS * CELL_SIZE , i * CELL_SIZE);/ 繪制豎向網(wǎng)絡(luò)對(duì)應(yīng)的路徑for (var i = 1 ; i TETRIS_COLS ; i+)tetris_ctx.moveTo(i * CELL_SIZE , 0);俄羅斯方塊游戲環(huán)境顯示速度當(dāng)前積分最高積分游戲操作上鍵變換形狀下鍵加速下落左鍵

14、左移右鍵右移tetris_ctx.lineTo(i * CELL_SIZE , TETRIS_ROWS * CELL_SIZE);tetris_ctx.closePath();/ 設(shè)置筆觸顏色tetris_ctx.strokeStyle = #aaa;/ 設(shè)置線條粗細(xì)tetris_ctx.lineWidth = 0.3;/ 繪制線條tetris_ctx.stroke();游戲區(qū)流程圖如圖 2 所示：圖 2游戲區(qū)流程圖開(kāi)始游戲開(kāi)局隨機(jī)選擇方塊類是否到頂部？方塊下落處理玩家操作是否到頂部？Game over結(jié)束是是否否4.24.2 游戲控制模塊游戲控制模塊為了處理方塊的移動(dòng)， 程序要先給鍵盤(pán)綁定事

15、件監(jiān)聽(tīng)器， 游戲時(shí)可通過(guò)按下鍵盤(pán)上的上、下、左、右鍵來(lái)控制方塊的移動(dòng)，下面是程序?yàn)榘存I事件綁定監(jiān)聽(tīng)器的代碼：window.onkeydown = function(evt)switch(evt.keyCode)/ 按下了“向下”箭頭case 40:if(!isPlaying)return;moveDown();break;/ 按下了“向左”箭頭case 37:if(!isPlaying)return;moveLeft();break;/ 按下了“向右”箭頭case 39:if(!isPlaying)return;moveRight();break;/ 按下了“向上”箭頭case 38:if(!

16、isPlaying)return;rotate();break;游戲控制流程圖如圖 3 所示：圖 3 游戲控制流程圖開(kāi)始頂端出現(xiàn)方塊是否可下落？上下左右是否能變形？變形下落加速是否能移位？左右移位是 否充 滿游戲區(qū)？游戲結(jié)束是是是是否否否否5 5 運(yùn)行結(jié)果及結(jié)果分析運(yùn)行結(jié)果及結(jié)果分析5.15.1 游戲打開(kāi)界面，如圖游戲打開(kāi)界面，如圖 4 4 所示所示圖 4 游戲打開(kāi)界面5.25.2 游戲進(jìn)行中界面游戲進(jìn)行中界面游戲玩的過(guò)程中,根據(jù)當(dāng)前所玩分?jǐn)?shù)變換速度，當(dāng)達(dá)到 500 分速度為 2，分?jǐn)?shù)達(dá)到 2000分速度為 3，后面變換類似，相關(guān)界面如圖 5 和圖 6 所示：圖 5 速度為 2 界面圖 6速度

17、為 3 界面5.35.3 游戲失敗界面游戲失敗界面方塊填滿之后，游戲失敗結(jié)束，如圖 7 所示圖 7 游戲失敗界面6 6 自我評(píng)價(jià)與總結(jié)自我評(píng)價(jià)與總結(jié)本次課程設(shè)計(jì)開(kāi)發(fā)的是基于 HTML5 的俄羅斯方塊，通過(guò)這幾天的開(kāi)發(fā)，充分激發(fā)了我對(duì)網(wǎng)頁(yè)設(shè)計(jì)的學(xué)習(xí)熱情。這個(gè)游戲難度適中，對(duì) HTML5、JavaScript 學(xué)習(xí)者來(lái)說(shuō)是一個(gè)不錯(cuò)的選擇，通過(guò)這次課程設(shè)計(jì)，我學(xué)會(huì)了單機(jī)游戲的界面分析與數(shù)據(jù)建模的能力，游戲玩家眼中看到的是游戲界面， 而我們眼中看到的則是數(shù)據(jù)模型。 本次課程設(shè)計(jì)提醒我還要多加學(xué)習(xí)幾何變換、數(shù)學(xué)計(jì)算能力。網(wǎng)頁(yè)設(shè)計(jì)需要堅(jiān)持，堅(jiān)持不斷的學(xué)習(xí)，因?yàn)樵O(shè)計(jì)網(wǎng)頁(yè)的軟件在不斷的更新，你不斷的學(xué)習(xí)不要掉入技術(shù)的陷阱，你的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)一流，你對(duì)軟件的掌握程度已經(jīng)達(dá)到一定水平，但是你設(shè)計(jì)的網(wǎng)頁(yè)確不堪目睹， 這是因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)是是介于平面設(shè)計(jì)和編程技術(shù)兩者之間的邊緣科學(xué).不僅涉及到美學(xué),心理學(xué),平面構(gòu)成,色彩搭配等平面設(shè)計(jì)的方面的知識(shí),還涉及到HTML,Javascript,css,ASP,php 等編程語(yǔ)言技術(shù)方面的知識(shí).只有綜合運(yùn)用多種知識(shí),才能設(shè)計(jì)出視聽(tīng)特效,動(dòng)