HTML 俄罗斯方块.docVIP

html5 提供的 canvas 接口很强大.通过简单的绘制做了一个简版的俄罗斯方块。主要训练自身的 OOP 和 数据结构 设计。 canvas 的接口?上面写的很丰富。 写的过程中，参考了很多网上的例子，最后觉得?左洸博客的比较容易好懂。主要分为数据模型，游戏控制模型和工具函数。 一 数据模型 首先考虑的问题就是 方块到底是什么？绘制方块，就是canvas里绘制矩形，至少需要知道 矩形的起点，宽度和高度。因此，只要确定方块的坐标点，就能根据宽度高度绘制图形。通常，俄罗斯方块有几种 T L S | 等，每个形状都有一个 属于自己的坐标系。 因此，所有图形的数据结构为： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /* **数据模型 */ ????????????????????????????????????????????????????????????????????????????????????????????????????????????????? //各种形状的编号，0代表没有形状 noShape??????? = 0; zShape???????? = 1; sShape???????? = 2; lineShape????? = 3; tShape???????? = 4; squareShape??? = 5; lShape???????? = 6; mirroredLShape = 7; ????????????????????????????????????????????????????????????????????????????????????????????????????????????????? shapesData = [ ????[ [ 0, 0 ],?? [ 0, 0 ],?? [ 0, 0 ],?? [ 0, 0 ] ], ????[ [ 0, -1 ],? [ 0, 0 ],?? [ -1, 0 ],? [ -1, 1 ] ], ????[ [ 0, -1 ],? [ 0, 0 ],?? [ 1, 0 ],?? [ 1, 1 ] ], ????[ [ 0, -1 ],? [ 0, 0 ],?? [ 0, 1 ],?? [ 0, 2 ] ], ????[ [ -1, 0 ],? [ 0, 0 ],?? [ 1, 0 ],?? [ 0, 1 ] ], ????[ [ 0, 0 ],?? [ 1, 0 ],?? [ 0, 1 ],?? [ 1, 1 ] ], ????[ [ -1, -1 ], [ 0, -1 ],? [ 0, 0 ],?? [ 0, 1 ] ], ????[ [ 1, -1 ],? [ 0, -1 ],? [ 0, 0 ],?? [ 0, 1 ] ] ]; 形状最终要画到画布上，在画布上还需要建立一个全局坐标系，即（row， col）的坐标系，与canvas的映射一直，则 自身坐标系的 x 为全局坐标系的 col，需要一个简单的转换。 例如自身坐标系为 [ [ 0, -1 ], ?[ 0, 0 ], ??[ 1, 0 ], ??[ 1, 1 ] ] 全局坐标系为： 1 2 3 4 5 6 7 8 9 10 11 12 13 [{ ????row: -1 + row, ????col: 0 + col }, { ????row: 0 + row, ????col: 0 + col }, { ????row: 0 + row, ????col: 2 + col }, { ????row: 1 + row, ????col: 1 + col }] 转换之后，还有变形，变形的原理是 先相对自身的坐标系中原点移动，然后再转换成全局坐标系。公式如下 ??x = -y， y = x 即 [ [ 0, -1 ], ?[ 0, 0 ], ??[ 1, 0 ], ??[ 1, 1 ] ] 变形之后为： [ [ 1, 0 ], ?[ 0, 0 ], ??[ 0, 1 ], ??[ -1, 1 ] ] 实现函数，作为工具模块的函数。其实最好写成函数式的就比较优雅和简洁 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //转换坐标系函数 function translate (data, row, col) { ????var tranData = []; ????for (var i = 0; i 4; i++){ ????????var temp = {}; ????????temp.row = data[i][1] + row; ???????