網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告書

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

2、力，包含系統(tǒng)分析、系統(tǒng)設(shè)計(jì)、系統(tǒng)實(shí)現(xiàn)和系統(tǒng)測試的能力。學(xué)生將在指導(dǎo)老師的指導(dǎo)下，完成從需求分析，系統(tǒng)設(shè)計(jì)，編碼到測試的全過程。二、課程設(shè)計(jì)的內(nèi)容與基本要求1、課程設(shè)計(jì)題目 俄羅斯方塊游戲的設(shè)計(jì)與實(shí)現(xiàn)2、課程設(shè)計(jì)內(nèi)容俄羅斯方塊游戲是一個(gè)單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊(通常有4個(gè)，組成各種不同的形狀)，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動(dòng)，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒有空缺，那么這行就可以“消除”，上面的所有“方塊”會(huì)“整體掉下來”。對(duì)于HTML5、JavaScript學(xué)習(xí)者來說，學(xué)習(xí)開發(fā)這個(gè)小程序難度適中，而且

3、能很好地培養(yǎng)學(xué)習(xí)者的學(xué)習(xí)樂趣。開發(fā)者需要從程序員的角度來看待玩家面對(duì)的游戲界面，游戲界面上的每個(gè)方塊(既可以涂上不同的顏色，也可以繪制不同圖片)在底層只要使用一個(gè)數(shù)值標(biāo)識(shí)來代表即可，不同的方塊使用不同的數(shù)值標(biāo)識(shí)。開發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外，開發(fā)者還需要理解為游戲添加監(jiān)聽方法，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。本程序稍微有點(diǎn)復(fù)雜的地方是，當(dāng)方塊組合旋轉(zhuǎn)時(shí)，開發(fā)者需要計(jì)算每個(gè)方塊旋轉(zhuǎn)后的坐標(biāo)。具體要求為：(1) 開發(fā)游戲界面。游戲界面大致分為兩個(gè)區(qū)域：速度、積分顯示區(qū)和主游戲界面區(qū)。(2) 建立游戲的狀態(tài)數(shù)據(jù)模

4、型。對(duì)于游戲玩家而言，游戲界面上看到的“元素”千差萬別、變化多端，但對(duì)于游戲開發(fā)者而言，游戲界面上的元素在底層都是一些數(shù)據(jù)，只是不同數(shù)據(jù)所繪制的圖片存在差異而已，因此，建立游戲的狀態(tài)數(shù)據(jù)模型是實(shí)現(xiàn)游戲邏輯的重要步驟。(3) 實(shí)現(xiàn)游戲邏輯。定義了游戲狀態(tài)模型后，接下來程序需要處理方塊組合“掉落”，還需要處理方塊組合“左移”、“右移”、“旋轉(zhuǎn)”等，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。此處使用Local Storage來記錄游戲狀態(tài)。(4) 初始化游戲狀態(tài)。在游戲過程中，程序使用了Local Storage來保存游戲狀態(tài)，包括游戲的當(dāng)前積分

5、、游戲速度、已有方塊的狀態(tài)等。為了正常使用Local Storage所記錄的游戲狀態(tài)，程序可以為window對(duì)象的onload事件綁定事件監(jiān)聽器，程序可以在windows裝載完成時(shí)通過Local Storage讀取這些數(shù)據(jù)，并把這些數(shù)據(jù)顯示出來。為了提高分析問題和解決實(shí)際問題的能力。每個(gè)人需要檢查游戲運(yùn)行結(jié)果，設(shè)計(jì)報(bào)告文檔，并提交紙質(zhì)版的課程報(bào)告和電子版的網(wǎng)站設(shè)計(jì)資料，包括：源程序，網(wǎng)站運(yùn)行效果截圖，電子版的資料以班為單位刻成光盤后由學(xué)習(xí)委員統(tǒng)一提交。 3、設(shè)計(jì)報(bào)告撰寫格式要求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)

6、的使用，可以截取少量代碼說明，并加上注釋，圖居中顯示，圖下方要有圖編號(hào)和圖名稱。5運(yùn)行結(jié)果及結(jié)果分析6 自我評(píng)價(jià)與總結(jié)7 參考文獻(xiàn)三、課程設(shè)計(jì)步驟及時(shí)間進(jìn)度和場地安排本課程設(shè)計(jì)將安排在第20周, 教育技術(shù)中心。具體安排如下：第一天 下發(fā)任務(wù)書，學(xué)生查閱資料第二、三天 系統(tǒng)設(shè)計(jì)和原型開發(fā)，系統(tǒng)功能實(shí)現(xiàn)第四天 書寫課程設(shè)計(jì)報(bào)告，系統(tǒng)調(diào)試 測試 打包和驗(yàn)收周次星期一星期二星期三星期四星期五第20周第3-6節(jié)第3-6節(jié)第3-6節(jié)第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ì)和開發(fā)效果以及課程設(shè)計(jì)報(bào)告書

7、的質(zhì)量。具體評(píng)分標(biāo)準(zhǔn)如下：設(shè)置六個(gè)評(píng)分點(diǎn)（1）設(shè)計(jì)方案正確，具有可行性、創(chuàng)新性； 25分（2）系統(tǒng)開發(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í)記分法記載最后成績。優(yōu)秀（10090分），良好（8089分），中等（7079分），及格（6069分），不及格（059分）1設(shè)計(jì)題目與要求 1.1設(shè)計(jì)題目課設(shè)題目：俄羅斯方塊游戲的設(shè)計(jì)與實(shí)現(xiàn)1.2設(shè)計(jì)要求(1) 開發(fā)游戲界面。游戲界面大致分為

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

9、程序使用了Local Storage來保存游戲狀態(tài)，包括游戲的當(dāng)前積分、游戲速度、已有方塊的狀態(tài)等。為了正常使用Local Storage所記錄的游戲狀態(tài)，程序可以為window對(duì)象的onload事件綁定事件監(jiān)聽器，程序可以在windows裝載完成時(shí)通過Local Storage讀取這些數(shù)據(jù)，并把這些數(shù)據(jù)顯示出來。2 設(shè)計(jì)思想俄羅斯方塊游戲是一個(gè)單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊(通常有4個(gè)，組成各種不同的形狀)，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動(dòng)，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒有空缺，那么這行就可以“消除”，上

10、面的所有“方塊”會(huì)“整體掉下來”。開發(fā)者需要從程序員的角度來看待玩家面對(duì)的游戲界面，游戲界面上的每個(gè)方塊(既可以涂上不同的顏色，也可以繪制不同圖片)在底層只要使用一個(gè)數(shù)值標(biāo)識(shí)來代表即可，不同的方塊使用不同的數(shù)值標(biāo)識(shí)。開發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外，開發(fā)者還需要理解為游戲添加監(jiān)聽方法，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動(dòng)作，當(dāng)玩家按下不同按鍵時(shí)，程序控制正在“下落”的方塊移動(dòng)或旋轉(zhuǎn)。本程序稍微有點(diǎn)復(fù)雜的地方是，當(dāng)方塊組合旋轉(zhuǎn)時(shí)，開發(fā)者需要計(jì)算每個(gè)方塊旋轉(zhuǎn)后的坐標(biāo)。3系統(tǒng)結(jié)構(gòu) 系統(tǒng)結(jié)構(gòu)圖如圖1所示：俄羅斯方塊游戲操作游戲環(huán)境顯示右鍵右移左鍵左移下鍵加速下落上鍵變換形狀最高積分當(dāng)前

11、積分速度 圖1 系統(tǒng)結(jié)構(gòu)圖4 系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.1游戲區(qū)模塊（創(chuàng)建游戲區(qū)、處理玩家操作、顯示操作結(jié)果） 主界面采用canvas繪圖元素，該的大小是由程序動(dòng)態(tài)計(jì)算得到的。部分代碼如下所示：/ 定義一個(gè)創(chuàng)建canvas組件的函數(shù)var createCanvas = function(rows , cols , cellWidth, cellHeight)tetris_canvas = document.createElement(canvas);/ 設(shè)置canvas組件的高度、寬度tetris_canvas.width = cols * cellWidth;tetris_canvas.heig

12、ht = rows * cellHeight;/ 設(shè)置canvas組件的邊框tetris_canvas.style.border = 1px solid black;/ 獲取canvas上的繪圖APItetris_ctx = tetris_canvas.getContext(2d);/ 開始創(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_SIZ

13、E , i * CELL_SIZE);/ 繪制豎向網(wǎng)絡(luò)對(duì)應(yīng)的路徑for (var i = 1 ; i TETRIS_COLS ; i+)tetris_ctx.moveTo(i * CELL_SIZE , 0);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所

14、示： 游戲開局 隨機(jī)選擇方塊類否是否到頂部？是 方塊下落處理玩家操作否是否到頂部？Game over是 結(jié)束 圖2 游戲區(qū)流程圖 4.2游戲控制模塊 為了處理方塊的移動(dòng)，程序要先給鍵盤綁定事件監(jiān)聽器，游戲時(shí)可通過按下鍵盤上的上、下、左、右鍵來控制方塊的移動(dòng)，下面是程序?yàn)榘存I事件綁定監(jiān)聽器的代碼：window.onkeydown = function(evt)switch(evt.keyCode)/ 按下了“向下”箭頭case 40:if(!isPlaying)return;moveDown();break;/ 按下了“向左”箭頭case 37:if(!isPlaying)return;move

15、Left();break;/ 按下了“向右”箭頭case 39:if(!isPlaying)return;moveRight();break;/ 按下了“向上”箭頭case 38:if(!isPlaying)return;rotate();break;游戲控制流程圖如圖3所示：開始 頂端出現(xiàn)方塊否是否可下落？是上下右左否是否充滿游戲區(qū)？否是是否能變形？下落加速否是否能移位？ 游戲結(jié)束是是左右移位 變形 圖 3 游戲控制流程圖5運(yùn)行結(jié)果及結(jié)果分析 5.1游戲打開界面，如圖4所示圖4 游戲打開界面5.2游戲進(jìn)行中界面游戲玩的過程中,根據(jù)當(dāng)前所玩分?jǐn)?shù)變換速度，當(dāng)達(dá)到500分速度為2，分?jǐn)?shù)達(dá)到2000

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