需要的公共变量
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 = 7
10 //各种形状的颜色
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] = 1
117 }
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 就是当最下面一行有方块了 但是积木还能下移，有哪位高手能告诉我要怎么修正。