俄罗斯方块 基于html5 canvas

需要的公共变量

View Code 1 //各种形状的编号，0代表没有形状 2 NoShape = 0; 3 ZShape = 1; 4 SShape = 2; 5 LineShape = 3; 6 TShape = 4; 7 SquareShape = 5; 8 LShape = 6; 9 MirroredLShape = 710 //各种形状的颜色11 Colors = ["black", "fuchsia", "green", "red", "orange", "blue", "teal", "orchid"];12 //各种形状的数据描述13 Shapes = [[[0, 0], [0, 0], [0, 0], [0, 0]], [[0, -11], [0, 0], [-11, 0], [-11, 11]], [[0, -11], [0, 0], [11, 0], [11, 11]], [[0, -11], [0, 0], [0, 11], [0, 22]], [[-11, 0], [0, 0], [11, 0], [0, 11]], [[0, 0], [11, 0], [0, 11], [11, 11]], [[-11, -11], [0, -11], [0, 0], [0, 11]], [[11, -11], [0, -11], [0, 0], [0, 11]]];14 //形状类型15 var type = 0;16 //当前模块的坐标（独立）17 var block = [[0, 0], [0, 0], [0, 0], [0, 0]];18 //当前模块的坐标（全局）19 var block_x = 0, block_y = 0;20 //固定的方块（0||1）21 var FixBlock;

开始游戏，具体代码如下

View Code 1 $(function() { 2 $("a#a13").click(function() { 3 ctx.clearRect(0, 0, canvas.width, canvas.height); 4 //初始化固定的方块 5 FixBlock = new Array(); 6 for( i = 0; i < 50; i++) { 7 FixBlock[i] = new Array(); 8 for( j = 0; j <= 25; j++) { 9 FixBlock[i][j] = 0; 10 } 11 } 12 CreatBlock(); 13 document.onkeydown = changeBlock; 14 setInterval(BeginGame, 300) 15 }); 16 }); 17 function BeginGame() { 18 if(MoveDown() != 0) { 19 AddFixedBlock(); 20 CreatBlock(); 21 } 22 DelFixedBlock(); 23 ctx.clearRect(0, 0, 275, 550); 24 creatMap(); 25 DrawBlock(); 26 } 27 28 function changeBlock(e) { 29 switch (e.keyCode) { 30 //左 31 case 37: 32 MoveLeft(); 33 break; 34 //右 35 case 39: 36 MoveRight(); 37 break; 38 //上 39 case 38: 40 block = rotate(block); 41 break; 42 //下 43 case 40: 44 if(MoveDown() != 0) { 45 AddFixedBlock(); 46 CreatBlock(); 47 } 48 break; 49 } 50 ctx.clearRect(0, 0, 275, 550); 51 creatMap(); 52 DrawBlock(); 53 } 54 55 function rotate(data) { 56 //向右旋转一个形状：x'=y, y'=-x 57 var copy = [[], [], [], []]; 58 for(var i = 0; i < 4; i++) { 59 copy[i][0] = data[i][1]; 60 copy[i][1] = -data[i][0]; 61 //判断旋转是否合理 62 var px = copy[i][0] + block_x; 63 var py = copy[i][1] + block_y; 64 var isRight = true; 65 if(px <= 0) 66 isRight = false; 67 if(px > 275 - 11) 68 isRight = false; 69 if(py >= 550 - 11) 70 isRight = false; 71 } 72 if(isRight) 73 return copy; 74 else 75 return data; 76 } 77 78 function creatMap() { 79 //生成网格 80 Px = 0; 81 Py = 0; 82 ctx.save(); 83 while(Py != 550) { 84 if(Px > 275 || Px < 0) { 85 Py = Py + 11; 86 gx = -gx; 87 Px = Px + 11 * gx; 88 } else { 89 ctx.fillStyle = "#ccc"; 90 ctx.fillRect(Px, Py, 10, 10); 91 Px = Px + 11 * gx; 92 } 93 } 94 //生成固定的方块 95 ctx.restore(); 96 ctx.save(); 97 ctx.fillStyle = "black"; 98 /*for (i = 0; i < fixedCount; i++) { 99 ctx.fillRect(fixedBlock[i][0], fixedBlock[i][1], 10, 10);100 }*/101 for( i = 0; i < 50; i++) {102 for( j = 0; j <= 25; j++) {103 if(FixBlock[i][j] == 1) {104 ctx.fillRect(j * 11, i * 11, 10, 10);105 }106 }107 }108 ctx.restore();109 }110 111 function AddFixedBlock() {112 //可移动的积木固定113 for(var i = 0; i < 4; i++) {114 var x = (block[i][0] + block_x) / 11;115 var y = (block[i][1] + block_y) / 11;116 FixBlock[y][x] = 1117 }118 }119 120 function DelFixedBlock() {121 //移除一整行122 for( i = 49; i >= 0; i--) {123 var isDel = true;124 for( j = 0; j <= 25; j++) {125 if(FixBlock[i][j] == 0) {126 isDel = false;127 break;128 }129 }130 if(isDel) {131 for( z = i; z > 0; z--) {132 for( j = 0; j <= 25; j++) {133 FixBlock[z][j] = FixBlock[z - 1][j];134 }135 for( j = 0; j <= 25; j++) {136 FixBlock[0][j] = 0;137 }138 }139 }140 }141 }142 143 function CreatBlock() {144 type = 0;145 while(type == 0) {146 type = Math.floor(Math.random() * 7);147 }148 block = Shapes[type];149 block_x = Math.floor(Math.random() * 25) * 11;150 block_y = 0;151 }152 153 function DrawBlock() {154 //在界面上生成积木155 ctx.save();156 ctx.fillStyle = Colors[type];157 for( i = 0; i < 4; i++) {158 ctx.fillRect(block[i][0] + block_x, block[i][1] + block_y, 10, 10)159 }160 ctx.restore();161 }

判断是否可以移动：

View Code 1 /* 2 *0--继续执行动作 3 *1--碰边 4 *2--与固定积木相撞 5 */ 6 function MoveLeft() { 7 //左移 8 block_x -= 11; 9 var isRight = 0;10 for(var j = 0; j < 4; j++) {11 var px = block[j][0] + block_x;12 var py = block[j][1] + block_y;13 var x = px / 11;14 var y = py / 11;15 16 if(px < 0) { // 判断是否与边界发生碰撞17 block_x += 11;18 return 1;19 break;20 }21 if(FixBlock[y][x] == 1) { //活动积木与固定积木碰撞、22 block_x += 11;23 return 2;24 }25 }26 return isRight;27 }28 29 function MoveRight() {30 //右移31 block_x += 11;32 var isRight = 0;33 for(var j = 0; j < 4; j++) {34 var px = block[j][0] + block_x;35 var py = block[j][1] + block_y;36 // 判断是否与边界发生碰撞37 if(px > 275) {38 block_x -= 11;39 return 1;40 break;41 }42 //活动积木与固定积木碰撞、43 var x = px / 11;44 var y = py / 11;45 if(FixBlock[y][x] == 1) {46 block_x -= 11;47 return 2;48 }49 }50 return isRight;51 }52 53 function MoveDown() {54 //下移55 block_y += 11;56 var isRight = 0;57 for(var j = 0; j < 4; j++) {58 var px = block[j][0] + block_x;59 var py = block[j][1] + block_y;60 61 if(py >= 550 - 11) {// 判断是否与边界发生碰撞62 return 1;63 break;64 }65 var x = px / 11;66 var y = py / 11;67 if(FixBlock[y][x] == 1) {//活动积木与固定积木碰撞、68 block_y -= 11;69 return 2;70 }71 }72 return isRight;73 }

======================

Ps：代码写得有点乱，请勿见怪。

发下有个bug 就是当最下面一行有方块了 但是积木还能下移，有哪位高手能告诉我要怎么修正。

转载于:https://www.cnblogs.com/xiaobuild/archive/2011/08/04/2126906.html

相关资源：H5 canvas实现经典俄罗斯方块小游戏