網(wǎng)頁設計課程設計報告書(同名9952)

武漢理工大學華夏學院課程設計報告書課程名稱：網(wǎng)頁設計題目：俄羅斯方塊游戲系名：信息工程系專業(yè)班級：姓名：學號：指導教師:2016年1月14日

課程設計任務書課程名稱：網(wǎng)頁設計課程設計指導教師：蘇永紅班級名稱：軟件1131開課系、教研室：軟件與信息安全一、課程設計目的與任務網(wǎng)頁設計與制作課程設計是《網(wǎng)頁設計與制作》課程的后續(xù)實踐課程，旨在通過一周的實踐訓練，加深學生對網(wǎng)頁設計中的概念，原理和方法的理解，加強學生綜合運用HTML、CSS、JavaScript、asp網(wǎng)頁設計技術(shù)進行實際問題處理的能力，進一步提高學生進行分析問題和解決問題的能力，包含系統(tǒng)分析、系統(tǒng)設計、系統(tǒng)實現(xiàn)和系統(tǒng)測試的能力。學生將在指導老師的指導下，完成從需求分析，系統(tǒng)設計，編碼到測試的全過程。二、課程設計的內(nèi)容與基本要求1、課程設計題目俄羅斯方塊游戲的設計與實現(xiàn)2、課程設計內(nèi)容俄羅斯方塊游戲是一個單擊休閑小游戲。在俄羅斯方塊的游戲界面中，有一組正在“下落”的方塊(通常有4個，組成各種不同的形狀)，游戲玩家需要做的事情就是控制正在“下落”的方塊的移動，將這組方塊擺放到合適的位置。只要下面“某一行”全部充滿方塊，沒有空缺，那么這行就可以“消除”，上面的所有“方塊”會“整體掉下來”。對于HTML5、JavaScript學習者來說，學習開發(fā)這個小程序難度適中，而且能很好地培養(yǎng)學習者的學習樂趣。開發(fā)者需要從程序員的角度來看待玩家面對的游戲界面，游戲界面上的每個方塊(既可以涂上不同的顏色，也可以繪制不同圖片)在底層只要使用一個數(shù)值標識來代表即可，不同的方塊使用不同的數(shù)值標識。開發(fā)俄羅斯方塊游戲除了需要理解游戲界面的數(shù)據(jù)模型之外，開發(fā)者還需要理解為游戲添加監(jiān)聽方法，通過事件監(jiān)聽可以監(jiān)控玩家的按鍵動作，當玩家按下不同按鍵時，程序控制正在“下落”的方塊移動或旋轉(zhuǎn)。本程序稍微有點復雜的地方是，當方塊組合旋轉(zhuǎn)時，開發(fā)者需要計算每個方塊旋轉(zhuǎn)后的坐標。具體要求為：(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)控玩家的按鍵動作，當玩家按下不同按鍵時，程序控制正在“下落”的方塊移動或旋轉(zhuǎn)。此處使用LocalStorage來記錄游戲狀態(tài)。俄羅斯方塊 俄羅斯方塊游戲操作游戲環(huán)境顯示游戲操作游戲環(huán)境顯示右鍵右移左鍵左移下鍵加速下落上鍵變換形狀最高積分當前積分速度右鍵右移左鍵左移下鍵加速下落上鍵變換形狀最高積分當前積分速度圖1系統(tǒng)結(jié)構(gòu)圖4系統(tǒng)詳細設計與實現(xiàn)4.1游戲區(qū)模塊（創(chuàng)建游戲區(qū)、處理玩家操作、顯示操作結(jié)果）主界面采用canvas繪圖元素，該<canvas.../>的大小是由程序動態(tài)計算得到的。部分代碼如下所示：//定義一個創(chuàng)建canvas組件的函數(shù)varcreateCanvas=function(rows,cols,cellWidth,cellHeight){ tetris_canvas=document.createElement("canvas"); //設置canvas組件的高度、寬度 tetris_canvas.width=cols*cellWidth; tetris_canvas.height=rows*cellHeight; //設置canvas組件的邊框 tetris_canvas.style.border="1pxsolidblack"; //獲取canvas上的繪圖API tetris_ctx=tetris_canvas.getContext('2d'); //開始創(chuàng)建路徑 tetris_ctx.beginPath(); //繪制橫向網(wǎng)絡對應的路徑 for(vari=1;i<TETRIS_ROWS;i++) { tetris_ctx.moveTo(0,i*CELL_SIZE); tetris_ctx.lineTo(TETRIS_COLS*CELL_SIZE,i*CELL_SIZE); } //繪制豎向網(wǎng)絡對應的路徑 for(vari=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(); //設置筆觸顏色 tetris_ctx.strokeStyle="#aaa"; //設置線條粗細 tetris_ctx.lineWidth=0.3; //繪制線條 tetris_ctx.stroke();}開始開始游戲區(qū)流程圖如圖2所示：游戲開局游戲開局隨機選擇方塊類隨機選擇方塊類否是否到頂部？否是否到頂部？ 是方塊下落是方塊下落處理玩家操作處理玩家操作否是否到頂部？否是否到頂部？Gameover是Gameover是結(jié)束結(jié)束圖2游戲區(qū)流程圖4.2游戲控制模塊為了處理方塊的移動，程序要先給鍵盤綁定事件監(jiān)聽器，游戲時可通過按下鍵盤上的上、下、左、右鍵來控制方塊的移動，下面是程序為按鍵事件綁定監(jiān)聽器的代碼：window.onkeydown=function(evt){ switch(evt.keyCode) { //按下了“向下”箭頭 case40: if(!isPlaying) return; moveDown(); break; //按下了“向左”箭頭 case37: if(!isPlaying) return; moveLeft(); break; //按下了“向右”箭頭 case39: if(!isPlaying) return; moveRight(); break; //按下了“向上”箭頭 case38: if(!isPlaying) return; rotate(); break; }}游戲控制流程圖如圖3所示：開始開始頂端出現(xiàn)方塊頂端出現(xiàn)方塊否是否可下落？否是否可下落？是是上下右左否是否充滿游戲區(qū)？上下右左否是否充滿游戲區(qū)？ 否是否是是否能變形？下落加速是否能變形？下落加速否是否能移位？否是否能移位？游戲結(jié)束游戲結(jié)束是是是是左右移位變形左右移位變形圖3游戲控制流程圖5運行結(jié)果及結(jié)果分析5.1游戲打開界面，如圖4所示圖4游戲打開界面5.2游戲進行中界面游戲玩的過程中,根據(jù)當前所玩分數(shù)變換速度，當達到500分速度為2，分數(shù)達到2000分速度為3，后面變換類似，相關(guān)界面如圖5和圖6所示：圖5速度為2界面圖6速度為3界面5.3游戲失敗界面方塊填滿之后，游戲失敗結(jié)束，如圖7所示圖7游戲失敗界面6自我評價與總結(jié)本次課程設計開發(fā)的是基于HTML5的俄羅斯方塊，通過這幾天的開發(fā)，充分激發(fā)了我對網(wǎng)頁設計的學習熱情。這個游戲難度適中，對HTML5、JavaScript學習者來說是一個不錯的選擇，通過這次課程設計，我學會了單機游戲的界面分析與數(shù)據(jù)建模的能力，游戲玩家眼中看到的是游戲界面，而我們眼中看到的則是數(shù)據(jù)模型。本次課程設計提醒我還要多加學習幾何變換、數(shù)學計算能力。網(wǎng)頁設計需要堅持，堅持不斷的學習，因為設計網(wǎng)頁的軟件在不斷的更新，你不斷的學習不要掉入技術(shù)的陷阱，你的網(wǎng)頁設計技術(shù)一流，你對軟件的掌握程度已經(jīng)達到一定水平，但是你設計的網(wǎng)頁確不堪目睹，這是因為網(wǎng)頁設計是是介于平面設計和編程技術(shù)兩者之間的"邊緣科學."不僅涉及到美學,心理學,平面構(gòu)成,色彩搭配等平面設計的方面的知識,還涉及到HTML,Javascript,css,ASP,php等編程語言技術(shù)方面的知識.只有綜合運用多種知識,才能設計出視聽特效,動感十足,富于個性的web頁面,才能全面展現(xiàn)互聯(lián)網(wǎng)這一新型媒體的獨特魅力和多維空間的超強功能.注重實用，個人認為網(wǎng)頁設計應該注重實用性，因為它是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。7參考文獻［1］庫少平.《網(wǎng)頁設計基礎教程》.北京郵電大學出版社，北京2010年1月 設計過程中質(zhì)疑（或答辯