HTML5 俄罗斯方块

1、html5提供的canvas接口很强大.通过简单的绘制做了一个简版的俄罗斯方块。主要训练自身的OOP和数据结构设计。canvas的接口上面写的很丰富。写的过程中，参考了很多网上的例子，最后觉得左洸博客的比较容易好懂。主要分为数据模型，游戏控制模型和工具函数。一数据模型首先考虑的问题就是方块到底是什么？绘制方块，就是canvas里绘制矩形，至少需要知道矩形的起点，宽度和高度。因此，只要确定方块的坐标点，就能根据宽度高度绘制图 形。通常，俄罗斯方块有几种TLS|等，每个形状都有一个属于自己的坐标系。 TOC o 1-5 h z -101因此，所有图形的数据结构为：/*数据模型*/4/各种形状的编号

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;；形状最终要画到画布上，在画布上还需要建立一个全局坐标系，即（row, col）的坐标系，与canvas的映射一直，则自身坐标系的x为全局坐标系的col需要一个简单的转换。例如自身坐标系为1,0,1,1全局坐标系为:12row: -1 + row,3col: 0 + col4, 5row: 0 + row,6col: 0 + col7, 8row: 0 + row,9col: 2 + col10, 11row: 1 + row,12col: 1 + col13(转换之后，还有变形，变形的原理是先相对自身的坐标系

4、中原点移动，然后再转换成全局坐标系。公式如下x=-y ，y=x0,-1,0,0,1,0,1,1变形之后为：1,0,0,0,0,1,-1,1实现函数，作为工具模块的函数。其实最好写成函数式的就比较优雅和简洁转换坐标系函数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;/旋转图形函数function ro

5、tate(data)(varrotaData=,;for(var i =0;i4;i+)(rotaDatai0 = -datai1;rotaDatai1 = datai0;return rotaData;数据模型，基本完成下一个是在画布上绘制图形。二界面模型游戏的界面，绘制在canvas上，由于我们抽象方块是由点构成，canvas上需要构造一张点构成的网图来装载方块的点。算法是，这张网分为row行，每行有col个点。构造一个类的构造函数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;三绘制工具函数有了数据模型和界面模型，剩下就是调用canvas的api进行绘制。由于我们的数据是一个个点的集合。绘图的算法就是将map分成一个个由点加宽高构成的小方块。一个图形有四个小方块构成。v

7、ar spacing = 20;/绘制单个方块函数function drawRect(color,ctx, x, y)(ctx.save();ctx.fillStyle = color;ctx.fillRect(x,y, spacing - 2, spacing - 2);ctx.restore();89/渲染canvas函数，绘制map有被标记的点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);/绘制移动方块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);四游戏控制模型控制模型类，构造函数里实力map对象，并初始化一个方块，拥有方向和旋转方法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添加键盘监听事件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();添加前台Title你的浏览器不支持Canvas标签，请使用Chrome浏览器或者Fi

13、reFox浏览器11现在基本可以控制方块左右和向下，但是没有做碰撞检测，需要更新Map，并在gamemode里进行检测/碰撞检测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);五完善现在，方块方向和旋转基本完成，最后就是判断方块是否到达地面，或者遇到地下的方块。一旦方块下落时发生碰撞。就把方块的shapelD加入map中

17、。循环map的每一行，如果当行的点都有标记，则表示满了，此时消除这一行，并添加新的一个空行。更新map添加检测是否满行的方法12345678910111213141516171819202122232425return true:12345678910111213141516/检测满行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)(/将方块的标记添加到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