版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、html5提供的canvas接口很強(qiáng)大.通過簡(jiǎn)單的繪制做了一個(gè)簡(jiǎn)版的俄羅斯方塊。主要訓(xùn)練自身的OOP和數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)。canvas的接口上面寫的很豐富。寫的過程中,參考了很多網(wǎng)上的例子,最后覺得左洸博客的比較容易好懂。主要分為數(shù)據(jù)模型,游戲控制模型和工具函數(shù)。一數(shù)據(jù)模型首先考慮的問題就是方塊到底是什么?繪制方塊,就是canvas里繪制矩形,至少需要知道矩形的起點(diǎn),寬度和高度。因此,只要確定方塊的坐標(biāo)點(diǎn),就能根據(jù)寬度高度繪制圖 形。通常,俄羅斯方塊有幾種TLS|等,每個(gè)形狀都有一個(gè)屬于自己的坐標(biāo)系。 TOC o 1-5 h z -101因此,所有圖形的數(shù)據(jù)結(jié)構(gòu)為:/*數(shù)據(jù)模型*/4/各種形狀的編號(hào)
2、,0代表沒有形狀noShape=0;zShape=1;sShape=2;lineShape=3;tShape=4;squareShape=5;lShape=6;131415161718192021222324shapesData= :1:0,0 ,: 0,0,: 0,0 ,: 0,0 ,1:0,-1 :,: 0,0,: -1,0 ,:-1,1 :,1:0,-1 :,: 0,0,: 1,0 ,:1,1 :,1:0,-1 :,: 0,0,: 0,1 :,:0,2 ,1:-1,0 ,: 0,0,: 1,0 ,:0,1 :,0,1,0,0,0,0,0,1,0,0,0, 0 , -1, -1 , 1,
3、-1 ,1 0 0111,-1 :,-1 :,mirroredLShape = 7;;形狀最終要畫到畫布上,在畫布上還需要建立一個(gè)全局坐標(biāo)系,即(row, col)的坐標(biāo)系,與canvas的映射一直,則自身坐標(biāo)系的x為全局坐標(biāo)系的col需要一個(gè)簡(jiǎn)單的轉(zhuǎn)換。例如自身坐標(biāo)系為1,0,1,1全局坐標(biāo)系為:12row: -1 + row,3col: 0 + col4, 5row: 0 + row,6col: 0 + col7, 8row: 0 + row,9col: 2 + col10, 11row: 1 + row,12col: 1 + col13(轉(zhuǎn)換之后,還有變形,變形的原理是先相對(duì)自身的坐標(biāo)系
4、中原點(diǎn)移動(dòng),然后再轉(zhuǎn)換成全局坐標(biāo)系。公式如下x=-y ,y=x0,-1,0,0,1,0,1,1變形之后為:1,0,0,0,0,1,-1,1實(shí)現(xiàn)函數(shù),作為工具模塊的函數(shù)。其實(shí)最好寫成函數(shù)式的就比較優(yōu)雅和簡(jiǎn)潔轉(zhuǎn)換坐標(biāo)系函數(shù)function translate (data, row, col) ( TOC o 1-5 h z vartranData=;for(var i =0;i 4; i+)(var temp=;temp.row=datai1+row;temp.col=datai0+col;tranData.push(temp);return tranData;/旋轉(zhuǎn)圖形函數(shù)function ro
5、tate(data)(varrotaData=,;for(var i =0;i4;i+)(rotaDatai0 = -datai1;rotaDatai1 = datai0;return rotaData;數(shù)據(jù)模型,基本完成下一個(gè)是在畫布上繪制圖形。二界面模型游戲的界面,繪制在canvas上,由于我們抽象方塊是由點(diǎn)構(gòu)成,canvas上需要構(gòu)造一張點(diǎn)構(gòu)成的網(wǎng)圖來裝載方塊的點(diǎn)。算法是,這張網(wǎng)分為row行,每行有col個(gè)點(diǎn)。構(gòu)造一個(gè)類的構(gòu)造函數(shù)var Map = function(w, h)(this.width = w;this.height = h;this.lines =;for (var ro
6、w = 0; row this.height; row+)(this.linesrow = this.newLine(); TOC o 1-5 h z 9Mtotype.newLine = function() (varsingleLine=;for(var col =0;col this.width; col+)(singleLine.push(noShape);return singleLine;三繪制工具函數(shù)有了數(shù)據(jù)模型和界面模型,剩下就是調(diào)用canvas的api進(jìn)行繪制。由于我們的數(shù)據(jù)是一個(gè)個(gè)點(diǎn)的集合。繪圖的算法就是將map分成一個(gè)個(gè)由點(diǎn)加寬高構(gòu)成的小方塊。一個(gè)圖形有四個(gè)小方塊構(gòu)成。v
7、ar spacing = 20;/繪制單個(gè)方塊函數(shù)function drawRect(color,ctx, x, y)(ctx.save();ctx.fillStyle = color;ctx.fillRect(x,y, spacing - 2, spacing - 2);ctx.restore();89/渲染canvas函數(shù),繪制map有被標(biāo)記的點(diǎn)function genCanvas(map, ctx)(var cwidth = map.width * spacing;var cheight = map.height * spacing;ctx.clearRect(0, 0, cwidth,
8、 cheight);var lines = map.lines;for (var row = 0; row map.height; row+)(for (var col = 0; col map.width; col+)(var shapeId = linesrowcol;if (shapeId != noShape)(var x = col * spacing;var y = row * spacing;drawRect(colorsshapeId, ctx, x, y);/繪制移動(dòng)方塊function drawSquare(shapeId, map, ctx, data)(genCanva
9、s(ctx, map);var color = colorsshapeIdfor (var i = 0; i 4; i+)(var x = datai.row * spacing;var y = datai.col * spacing;drawRect(color, ctx, x, y);四游戲控制模型控制模型類,構(gòu)造函數(shù)里實(shí)力map對(duì)象,并初始化一個(gè)方塊,擁有方向和旋轉(zhuǎn)方法var GameModel = function(w, h)(this.map = new Map(w, h);this.born();4GameMtotype.born = function()(this.shapeld
10、 = Math.floor(Math.random()* 7)+1;this.data = shapesDatathis.shapeId;this.row = 1;this.col = Math.floor(this.map.width / 2);drawSquare(this.shapeId, this.map, ctx,translate(this.data, this.row, this.col);GameMtotype.left = function()(this.col -;var temp = translate(this.data, this.row, this.col);dra
11、wSquare(this.shapeId, this.map, ctx, temp);GameMtotype.right = function()(this.col+;var temp = translate(this.data, this.row, this.col);drawSquare(this.shapeId, this.map, ctx, temp);GameMtotype.down = function()(this.row+;var temp = translate(this.data, this.row, this.col);drawSquare(this.shapeId, t
12、his.map, ctx, temp);GameMtotype.rotate = function()2829添加鍵盤監(jiān)聽事件var model = new GameModel(13, 20);2/捕捉鍵盤控制document.onkeydown = function(e) (if(e.keyCode=37)model.left();if(e.keyCode=38)model.rotate();if(e.keyCode=39)model.right();if(e.keyCode=40)model.down();添加前臺(tái)Title你的瀏覽器不支持Canvas標(biāo)簽,請(qǐng)使用Chrome瀏覽器或者Fi
13、reFox瀏覽器11現(xiàn)在基本可以控制方塊左右和向下,但是沒有做碰撞檢測(cè),需要更新Map,并在gamemode里進(jìn)行檢測(cè)/碰撞檢測(cè)Mtotype.isCollide = function(data)(for (var i = 0; i 4; i+)(var row=datai.row;var col=datai.col;if (col0 | col = this.width)return true;if (row= this.height)returntrue;if (row0) continue;else if (this.linesrowcol != noShape) return true
14、;return false;更新 gamemodel類GameMtotype.left=function()this.col -;var temp = translate(this.data, this.row, this.col);if (this.map.isCollide(temp) this.col +;else drawSquare(this.shapeId, this.map, ctx, temp);GameMtotype.right=function()(this.col+;var temp = translate(this.data, this.row, this.col);i
15、f (this.map.isCollide(temp) this.col -;else drawSquare(this.shapeId, this.map, ctx, temp);GameMtotype.down = function()(this.row+;var temp = translate(this.data,this.row, this.col);if (this.map.isCollide(temp) (17else(drawSquare(this.shapeId, this.map, ctx, temp);GameMtotype.rotate = function()(if (
16、this.shapeId = squareShape) return;var rotatedata = rotate(this.data);var temp = translate(rotatedata, this.row,this.col);if (this.map.isCollide(temp) return;this.data = rotatedata;drawSquare(this.shapeId, this.map, ctx, temp);五完善現(xiàn)在,方塊方向和旋轉(zhuǎn)基本完成,最后就是判斷方塊是否到達(dá)地面,或者遇到地下的方塊。一旦方塊下落時(shí)發(fā)生碰撞。就把方塊的shapelD加入map中
17、。循環(huán)map的每一行,如果當(dāng)行的點(diǎn)都有標(biāo)記,則表示滿了,此時(shí)消除這一行,并添加新的一個(gè)空行。更新map添加檢測(cè)是否滿行的方法12345678910111213141516171819202122232425return true:12345678910111213141516/檢測(cè)滿行Map. prototype. isFullLine = function (row)(var lines = this, linesrow:for (var col = 0: col this, width; i+)(if (linescol = noShape) return false:/消除滿行Map.
18、prototype. appendShape = function(shapeld, data)(/將方塊的標(biāo)記添加到mapfor (var i = 0; i 4; i+) var row = datai. row;var col = datai. col:this, linesrowcol = shapeld;/消除滿行for (var row = 0: row this, height: row+) if (this. isFullLine(row) (this, lines, splice (row, 1):this, lines, unshift (this. newLine ();genCanvas(this, ctx):在gmaemodle類修改下落的方法GameModel. prototype, down = function() (var old = translate (this, data, this, row, this, col): this. row+:var temp = translate (this, data, this, row, this, col): if (this. map. isCollide (temp) (this, row;if (this, row = 1) gameOver = true:alert ( GameOv
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 氣壓治療課件
- 寶雞文理學(xué)院《幼兒園玩教具設(shè)計(jì)》2022-2023學(xué)年第一學(xué)期期末試卷
- 學(xué)校防治意外傷害事故總結(jié)
- 2024廣東省廣州市海珠區(qū)中考一模物理試卷及答案
- 寶雞文理學(xué)院《太極拳》2021-2022學(xué)年第一學(xué)期期末試卷
- 寶雞文理學(xué)院《審計(jì)理論與實(shí)務(wù)》2021-2022學(xué)年第一學(xué)期期末試卷
- 吸濕排汗運(yùn)動(dòng)胸衣市場(chǎng)環(huán)境與對(duì)策分析
- 醫(yī)用電子溫度監(jiān)測(cè)器項(xiàng)目評(píng)價(jià)分析報(bào)告
- 掃雪機(jī)相關(guān)項(xiàng)目實(shí)施方案
- 攜帶套服襯衫和禮服用袋相關(guān)項(xiàng)目建議書
- 小區(qū)景觀改造合同模板
- 【課件】美術(shù)鑒賞的過程與方法+課件-2024-2025學(xué)年高中美術(shù)人美版(2019)美術(shù)鑒賞
- 2024新信息科技六年級(jí)第一單元:初識(shí)過程與控制大單元整體教學(xué)設(shè)計(jì)
- 2024年大學(xué)生信息素養(yǎng)大賽(省賽)練習(xí)考試題庫(含答案)
- 秀場(chǎng)內(nèi)外-走進(jìn)服裝表演藝術(shù)智慧樹知到答案2024年武漢紡織大學(xué)
- 北師大版五年級(jí)上冊(cè)四則混合運(yùn)算300道及答案
- GB 20182-2024商用車駕駛室外部凸出物
- 第四單元測(cè)試卷(單元測(cè)試)-2024-2025學(xué)年六年級(jí)上冊(cè)統(tǒng)編版語文
- 工業(yè)互聯(lián)網(wǎng)應(yīng)用專業(yè)行業(yè)調(diào)研與人才需求分析
- 2024年《軍事理論》考試題庫附答案(含各題型)
- CASE凱斯挖掘機(jī):CX210,240維護(hù)手冊(cè)
評(píng)論
0/150
提交評(píng)論