武漢理工大學(xué)華夏學(xué)院課程設(shè)計報告書課程名稱網(wǎng)頁設(shè)計題目俄羅斯方塊游戲系名信息工程系專業(yè)班級姓名學(xué)號指導(dǎo)教師2016年1月14日課程設(shè)計任務(wù)書課程名稱網(wǎng)頁設(shè)計課程設(shè)計指導(dǎo)教師蘇永紅班級名稱軟件1131開課系、教研室軟件與信息安全一、課程設(shè)計目的與任務(wù)網(wǎng)頁設(shè)計與制作課程設(shè)計是網(wǎng)頁設(shè)計與制作課程的后續(xù)實踐課程，旨在通過一周的實踐訓(xùn)練，加深學(xué)生對網(wǎng)頁設(shè)計中的概念，原理和方法的理解，加強學(xué)生綜合運用HTML、CSS、JAVASCRIPT、ASP網(wǎng)頁設(shè)計技術(shù)進行實際問題處理的能力，進一步提高學(xué)生進行分析問題和解決問題的能力，包含系統(tǒng)分析、系統(tǒng)設(shè)計、系統(tǒng)實現(xiàn)和系統(tǒng)測試的能力。學(xué)生將在指導(dǎo)老師的指導(dǎo)下，完成從需求分析，系統(tǒng)設(shè)計，編碼到測試的全過程。二、課程設(shè)計的內(nèi)容與基本要求1、課程設(shè)計題目俄羅斯方塊游戲的設(shè)計與實現(xiàn)2、課程設(shè)計內(nèi)容俄羅斯方塊游戲是一個單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊通常有4個，組成各種不同的形狀，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒有空缺，那么這行就可以“消除”，上面的所有“方塊”會“整體掉下來”。對于HTML5、JAVASCRIPT學(xué)習(xí)者來說，學(xué)習(xí)開發(fā)這個小程序難度適中，而且能很好地培養(yǎng)學(xué)習(xí)者的學(xué)習(xí)樂趣。開發(fā)者需要從程序員的角度來看待玩家面對的游戲界面，游戲界面上的每個方塊既可以涂上不同的顏色，也可以繪制不同圖片在底層只要使用一個數(shù)值標(biāo)識來代表即可，不同的方塊使用不同的數(shù)值標(biāo)識。開發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外，開發(fā)者還需要理解為游戲添加監(jiān)聽方法，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動作，當(dāng)玩家按下不同按鍵時，程序控制正在“下落”的方塊移動或旋轉(zhuǎn)。本程序稍微有點復(fù)雜的地方是，當(dāng)方塊組合旋轉(zhuǎn)時，開發(fā)者需要計算每個方塊旋轉(zhuǎn)后的坐標(biāo)。具體要求為1開發(fā)游戲界面。游戲界面大致分為兩個區(qū)域速度、積分顯示區(qū)和主游戲界面區(qū)。2建立游戲的狀態(tài)數(shù)據(jù)模型。對于游戲玩家而言，游戲界面上看到的“元素”千差萬別、變化多端，但對于游戲開發(fā)者而言，游戲界面上的元素在底層都是一些數(shù)據(jù)，只是不同數(shù)據(jù)所繪制的圖片存在差異而已，因此，建立游戲的狀態(tài)數(shù)據(jù)模型是實現(xiàn)游戲邏輯的重要步驟。3實現(xiàn)游戲邏輯。定義了游戲狀態(tài)模型后，接下來程序需要處理方塊組合“掉落”，還需要處理方塊組合“左移”、“右移”、“旋轉(zhuǎn)”等，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動作，當(dāng)玩家按下不同按鍵時，程序控制正在“下落”的方塊移動或旋轉(zhuǎn)。此處使用LOCALSTORAGE來記錄游戲狀態(tài)。4初始化游戲狀態(tài)。在游戲過程中，程序使用了LOCALSTORAGE來保存游戲狀態(tài)，包括游戲的當(dāng)前積分、游戲速度、已有方塊的狀態(tài)等。為了正常使用LOCALSTORAGE所記錄的游戲狀態(tài)，程序可以為WINDOW對象的ONLOAD事件綁定事件監(jiān)聽器，程序可以在WINDOWS裝載完成時通過LOCALSTORAGE讀取這些數(shù)據(jù)，并把這些數(shù)據(jù)顯示出來。為了提高分析問題和解決實際問題的能力。每個人需要檢查游戲運行結(jié)果，設(shè)計報告文檔，并提交紙質(zhì)版的課程報告和電子版的網(wǎng)站設(shè)計資料，包括源程序，網(wǎng)站運行效果截圖，電子版的資料以班為單位刻成光盤后由學(xué)習(xí)委員統(tǒng)一提交。3、設(shè)計報告撰寫格式要求1設(shè)計題目與要求2設(shè)計思想3系統(tǒng)結(jié)構(gòu)4系統(tǒng)詳細設(shè)計與實現(xiàn)，內(nèi)容包括各個模塊的設(shè)計，模塊的算法流程圖，相關(guān)知識點的使用，可以截取少量代碼說明，并加上注釋，圖居中顯示，圖下方要有圖編號和圖名稱。5運行結(jié)果及結(jié)果分析6自我評價與總結(jié)7參考文獻三、課程設(shè)計步驟及時間進度和場地安排本課程設(shè)計將安排在第20周,教育技術(shù)中心。具體安排如下第一天下發(fā)任務(wù)書，學(xué)生查閱資料第二、三天系統(tǒng)設(shè)計和原型開發(fā)，系統(tǒng)功能實現(xiàn)第四天書寫課程設(shè)計報告，系統(tǒng)調(diào)試測試打包和驗收周次星期一星期二星期三星期四星期五第20周第36節(jié)第36節(jié)第36節(jié)第36節(jié)地點現(xiàn)教212現(xiàn)教212現(xiàn)教212現(xiàn)教212四、課程設(shè)計考核及評分標(biāo)準(zhǔn)課程設(shè)計考核將綜合考慮學(xué)生考勤和參與度，系統(tǒng)設(shè)計方案正確性，系統(tǒng)設(shè)計和開發(fā)效果以及課程設(shè)計報告書的質(zhì)量。具體評分標(biāo)準(zhǔn)如下設(shè)置六個評分點（1）設(shè)計方案正確，具有可行性、創(chuàng)新性；25分（2）系統(tǒng)開發(fā)效果較好；25分（3）態(tài)度認真、刻苦鉆研、遵守紀(jì)律；10分（4）設(shè)計報告規(guī)范、課程設(shè)計報告質(zhì)量高、參考文獻充分20分（5）課程設(shè)計答辯概念清晰，內(nèi)容正確10分（6）課程設(shè)計期間的課堂考勤、答疑與統(tǒng)籌考慮。10分按上述六項分別記分后求和，總分按五級記分法記載最后成績。優(yōu)秀（10090分），良好（8089分），中等（7079分），及格（6069分），不及格（059分）1設(shè)計題目與要求11設(shè)計題目課設(shè)題目俄羅斯方塊游戲的設(shè)計與實現(xiàn)12設(shè)計要求1開發(fā)游戲界面。游戲界面大致分為兩個區(qū)域速度、積分顯示區(qū)和主游戲界面區(qū)。2建立游戲的狀態(tài)數(shù)據(jù)模型。對于游戲玩家而言，游戲界面上看到的“元素”千差萬別、變化多端，但對于游戲開發(fā)者而言，游戲界面上的元素在底層都是一些數(shù)據(jù)，只是不同數(shù)據(jù)所繪制的圖片存在差異而已，因此，建立游戲的狀態(tài)數(shù)據(jù)模型是實現(xiàn)游戲邏輯的重要步驟。3實現(xiàn)游戲邏輯。定義了游戲狀態(tài)模型后，接下來程序需要處理方塊組合“掉落”，還需要處理方塊組合“左移”、“右移”、“旋轉(zhuǎn)”等，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動作，當(dāng)玩家按下不同按鍵時，程序控制正在“下落”的方塊移動或旋轉(zhuǎn)。此處使用LOCALSTORAGE來記錄游戲狀態(tài)。4初始化游戲狀態(tài)。在游戲過程中，程序使用了LOCALSTORAGE來保存游戲狀態(tài)，包括游戲的當(dāng)前積分、游戲速度、已有方塊的狀態(tài)等。為了正常使用LOCALSTORAGE所記錄的游戲狀態(tài)，程序可以為WINDOW對象的ONLOAD事件綁定事件監(jiān)聽器，程序可以在WINDOWS裝載完成時通過LOCALSTORAGE讀取這些數(shù)據(jù)，并把這些數(shù)據(jù)顯示出來。2設(shè)計思想俄羅斯方塊游戲是一個單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊通常有4個，組成各種不同的形狀，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒有空缺，那么這行就可以“消除”，上面的所有“方塊”會“整體掉下來”。開發(fā)者需要從程序員的角度來看待玩家面對的游戲界面，游戲界面上的每個方塊既可以涂上不同的顏色，也可以繪制不同圖片在底層只要使用一個數(shù)值標(biāo)識來代表即可，不同的方塊使用不同的數(shù)值標(biāo)識。開發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外，開發(fā)者還需要理解為游戲添加監(jiān)聽方法，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動作，當(dāng)玩家按下不同按鍵時，程序控制正在“下落”的方塊移動或旋轉(zhuǎn)。本程序稍微有點復(fù)雜的地方是，當(dāng)方塊組合旋轉(zhuǎn)時，開發(fā)者需要計算每個方塊旋轉(zhuǎn)后的坐標(biāo)。3系統(tǒng)結(jié)構(gòu)系統(tǒng)結(jié)構(gòu)圖如圖1所示圖1系統(tǒng)結(jié)構(gòu)圖4系統(tǒng)詳細設(shè)計與實現(xiàn)41游戲區(qū)模塊（創(chuàng)建游戲區(qū)、處理玩家操作、顯示操作結(jié)果）主界面采用CANVAS繪圖元素，該的大小是由程序動態(tài)計算得到的。部分代碼如下所示/定義一個創(chuàng)建CANVAS組件的函數(shù)VARCREATECANVASFUNCTIONROWS,COLS,CELLWIDTH,CELLHEIGHTTETRIS_CANVASDOCUMENTCREATEELEMENT“CANVAS“/設(shè)置CANVAS組件的高度、寬度TETRIS_CANVASWIDTHCOLSCELLWIDTHTETRIS_CANVASHEIGHTROWSCELLHEIGHT/設(shè)置CANVAS組件的邊框TETRIS_CANVASSTYLEBORDER“1PXSOLIDBLACK“/獲取CANVAS上的繪圖APITETRIS_CTXTETRIS_CANVASGETCONTEXT2D/開始創(chuàng)建路徑TETRIS_CTXBEGINPATH/繪制橫向網(wǎng)絡(luò)對應(yīng)的路徑FORVARI1ITETRIS_ROWSITETRIS_CTXMOVETO0,ICELL_SIZETETRIS_CTXLINETOTETRIS_COLSCELL_SIZE,ICELL_SIZE俄羅斯方塊游戲環(huán)境顯示速度當(dāng)前積分最高積分游戲操作上鍵變換形狀下鍵加速下落左鍵左移右鍵右移/繪制豎向網(wǎng)絡(luò)對應(yīng)的路徑FORVARI1ITETRIS_COLSITETRIS_CTXMOVETOICELL_SIZE,0TETRIS_CTXLINETOICELL_SIZE,TETRIS_ROWSCELL_SIZETETRIS_CTXCLOSEPATH/設(shè)置筆觸顏色TETRIS_CTXSTROKESTYLE“AAA“/設(shè)置線條粗細TETRIS_CTXLINEWIDTH03/繪制線條TETRIS_CTXSTROKE游戲區(qū)流程圖如圖2所示開始游戲開局隨機選擇方塊類是否到頂部方塊下落處理玩家操作是否到頂部GAMEOVER是是否否圖2游戲區(qū)流程圖42游戲控制模塊為了處理方塊的移動，程序要先給鍵盤綁定事件監(jiān)聽器，游戲時可通過按下鍵盤上的上、下、左、右鍵來控制方塊的移動，下面是程序為按鍵事件綁定監(jiān)聽器的代碼WINDOWONKEYDOWNFUNCTIONEVTSWITCHEVTKEYCODE/按下了“向下”箭頭CASE40IFISPLAYINGRETURNMOVEDOWNBREAK/按下了“向左”箭頭CASE37IFISPLAYINGRETURNMOVELEFTBREAK/按下了“向右”箭頭CASE39IFISPLAYINGRETURNMOVERIGHTBREAK/按下了“向上”箭頭CASE38IFISPLAYINGRETURNROTATEBREAK結(jié)束游戲控制流程圖如圖3所示圖3游戲控制流程圖開始頂端出現(xiàn)方塊是否可下落上下左右是否能變形變形下落加速是否能移位左右移位是否充滿游戲區(qū)游戲結(jié)束是是是是否否否否5運行結(jié)果及結(jié)果分析51游戲打開界面，如圖4所示圖4游戲打開界面52游戲進行中界面游戲玩的過程中,根據(jù)當(dāng)前所玩分?jǐn)?shù)變換速度，當(dāng)達到500分速度為2，分?jǐn)?shù)達到2000分速度為3，后面變換類似，相關(guān)界面如圖5和圖6所示圖5速度為2界面圖6速度為3界面53游戲失敗界面方塊填滿之后，游戲失敗結(jié)束，如圖7所示圖7游戲失敗界面6自我評價與總結(jié)本次課程設(shè)計開發(fā)的是基于HTML5的俄羅斯方塊，通過這幾天的開發(fā)，充分激發(fā)了我對網(wǎng)頁設(shè)計的學(xué)習(xí)熱情。這個游戲難度適中，對HTML5、JAVASCRIPT學(xué)習(xí)者來說是一個不錯的選擇，通過這次課程設(shè)計，我學(xué)會了單機游戲的界面分析與數(shù)據(jù)建模的能力，游戲玩家眼中看到的是游戲界面，而我們眼中看到的則是數(shù)據(jù)模型。本次課程設(shè)計提醒我還要多加學(xué)習(xí)幾何變換、數(shù)學(xué)計算能力。網(wǎng)頁設(shè)計需要堅持，堅持不斷的學(xué)習(xí)，因為設(shè)計網(wǎng)頁的軟件在不斷的更新，你不斷的學(xué)習(xí)不要掉入技術(shù)的陷阱，你的網(wǎng)頁設(shè)計技術(shù)一流，你對軟件的掌握程度已經(jīng)達到一定水平，但是你設(shè)計的網(wǎng)頁確不堪目睹，這是因為網(wǎng)頁設(shè)計是是介于平面設(shè)計和編程技術(shù)兩者之間的“邊緣科學(xué)“不僅涉及到美學(xué),心理學(xué),平面構(gòu)成,色彩搭配等平面設(shè)計的方面的知識,還涉及到HTML,JAVASCRIPT,CSS,ASP,PHP等編程語言技術(shù)方面的知識只有綜合運用多種知識,才能設(shè)計出視聽特效