《HTML5 俄罗斯方块》由会员分享，可在线阅读，更多相关《HTML5 俄罗斯方块（10页珍藏版）》请在金锄头文库上搜索。
1、html5提供的canvas接口很强大通过简单的绘制做了一个简版的俄罗斯方块。主要训练自身的OOP和数据结构设计。canvas的接口上面写的很丰富。写的过程中，参考了很多网上的例子，最后觉得左洸博客的比较容易好懂。主要分为数据模型，游戏控制模型和工具函数。一数据模型就能根据宽度高度绘制图首先考虑的问题就是方块到底是什么？绘制方块，就是canvas里绘制矩形，至少需要知道矩形的起点，宽度和高度。因此，只要确定方块的坐标点 形。通常，俄罗斯方块有几种TLS|等，每个形状都有一个属于自己的坐标系。1因此，所有图形的数据结构为：1/*2*数据模型3*/45/各种形状的编号,0 代表没有形状6noSha
2、pe= 0;7zShape= 1;8sShape= 2;9lineShape= 3;10tShape= 4;11squareShape= 5;12lShape= 6;13mirroredLShape = 771415shapesData= 160,0 , 0,0, 0,0, 0,0 ,170,-1 , 0,0, -1,0 , -1,1 ,180,-1 , 0,0, 1,0, 1,1 ,190,-1 , 0,0, 0,1, 0,2 ,20-1,0 , 0,0, 1,0, 0,1 ,210,0 , 1,0, 0,1, 1,1 ,22-1,-1 , 0,-1, 0,0, 0,1 ,231,-1 ,
3、0,-1, 0,0, 0,1 24;形状最终要画到画布上，在画布上还需要建立一个全局坐标系，即(row , col )的坐标系，与canvas的映射一直，则自身坐标系的x为全局坐标系的col，需要一个简单的转换。例如自身坐标系为y=x0,-1, 0,0, 1,0, 1,1全局坐标系为：1 2 row: -1 + row,3col:0+col4,5row:0+row,6col:0+col7,8row:0+row,9col:2+col10,11row:1+row,12col:1+col13转换之后，还有变形，变形的原理是先相对自身的坐标系中原点移动，然后再转换成全局坐标系。公式如下x=-y0,-1
4、, 0,0, 1,0, 1,1变形之后为：1,0, 0,0, 0,1, -1,1实现函数，作为工具模块的函数。其实最好写成函数式的就比较优雅和简洁1 / 转换坐标系函数2 function translate (data, row, col) 3 vartranData= ;4 for(var i =0; i 4; i+)5 var temp=;6 temp.row=datai1+row;7 temp.col=datai0+col;8 tranData.push(temp);9 10 return tranData;11 12 /旋转图形函数13 function rotate(data)14
5、 varrotaData= ,;15 for(var i =0; i4;i+)16 rotaDatai0 = -datai1;17 rotaDatai1 = datai0;18 19 return rotaData;20 数据模型，基本完成下一个是在画布上绘制图形。二界面模型游戏的界面，绘制在canvas上，由于我们抽象方块是由点构成，canvas上需要构造一张点构成的网图来装载方块的点。算法是，这张网分为row行，每行有col个点。构造一个“类”的构造函数1 var Map = function(w, h)2 this.width = w;3 this.height = h;4 this.l
6、ines = ;5 for (var row = 0; row this.height; row+)6 this.linesrow = this.newLine();7 8910 Map.prototype.newLine = function() 11 varsingleLine= ;12 for(var col =0; col this.width; col+)13 singleLine.push(noShape);14 15 return singleLine;16 三绘制工具函数有了数据模型和界面模型，剩下就是调用canvas的api进行绘制。由于我们的数据是一个个点的集合。绘图的算法
7、就是将map分成一个个由点加宽高构成的小方块。一个图 形有四个小方块构成。1 var spacing = 20;2 / 绘制单个方块函数3 function drawRect(color, ctx, x, y)4 ctx.save();5 ctx.fillStyle =color;6 ctx.fillRect(x,y,spacing - 2, spacing - 2);7 ctx.restore();8910 / 渲染 canvas 函数 , 绘制 map 有被标记的点11 function genCanvas(map, ctx)12 var cwidth = map.width * spac
8、ing;13 var cheight = map.height * spacing;14 ctx.clearRect(0, 0, cwidth, cheight);15 var lines = map.lines;16 for (var row = 0; row map.height; row+)17 for (var col = 0; col map.width; col+)18 var shapeId = linesrowcol;19 if (shapeId != noShape)20 var x = col * spacing;21 var y = row * spacing;22 dr
9、awRect(colorsshapeId, ctx, x, y);23 24 25 26 27 /绘制移动方块28 function drawSquare(shapeId, map, ctx, data)29 genCanvas(ctx, map);30 var color = colorsshapeId31 for (var i = 0; i 4; i+)32 var x = datai.row * spacing;33 var y = datai.col * spacing;34 drawRect(color, ctx, x, y);35 36 四游戏控制模型控制模型类，构造函数里实力ma
10、p对象，并初始化一个方块，拥有方向和旋转方法1 var GameModel = function(w, h)2 this.map = new Map(w, h);3 this.born();45 GameModel.prototype.born = function()6 this.shapeId = Math.floor(Math.random() * 7) + 1;7 this.data = shapesDatathis.shapeId;8 this.row = 1;9 this.col = Math.floor(this.map.width /2);10 drawSquare(this.
11、shapeId, this.map, ctx,translate(this.data, this.row, this.col);11 12 GameModel.prototype.left = function()13 this.col -;14 var temp = translate(this.data, this.row, this.col);15 drawSquare(this.shapeId, this.map, ctx, temp);16 17 GameModel.prototype.right = function()18 this.col+;19 var temp = tran
12、slate(this.data, this.row, this.col);20 drawSquare(this.shapeId, this.map, ctx, temp);21 22 GameModel.prototype.down = function()23 this.row+;24 var temp = translate(this.data, this.row, this.col);25 drawSquare(this.shapeId, this.map, ctx, temp);26 27 GameModel.prototype.rotate = function()2829添加键盘监听事件1 var model = new GameModel(13, 20);23 / 捕捉键盘控制4 document.onkeydown = function(e) 5 if(e.keyCode=37)model.left();6 if(e.keyCode=38)model.rotate();7 if(e.keyCode=39)model.right();8 if(e.keyCode=40)model.down();9 添加前台1 2 3 meta
