HTML5 俄羅斯方塊

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