html5 canvas做的俄罗斯方块

做的有点乱，主要是为了练手
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>俄罗斯方块</title>
  6     <meta charset="utf-8" />
  7     <style type="text/css">
  8         #canvas {
  9             background-color: #eee;
 10         }
 11 
 12         body {
 13             text-align: center;
 14         }
 15     </style>
 16     <script type="text/javascript">
 17         window.onload = function myfunction() {
 18             var canvas = document.getElementById("canvas");
 19             var cobj = canvas.getContext("2d");
 20             var size = 30;
 21             var width = 240;
 22             var height = 450;
 23             var wNum = width / size;
 24             var hNum = height / size;
 25             var fenshuNum = 0;
 26             document.getElementById("btnStart").onclick = function () {
 27 
 28             }
 29             dewaBorder();
 30             //drawBorder
 31             function dewaBorder() {
 32                 cobj.clearRect(0, 0, canvas.width, canvas.height);
 33                 var color = "#ddd";
 34                 for (var i = 0; i <= wNum ; i++) {
 35                     drawLine(i * size, 0, i * size, height, color);
 36                 }
 37                 for (var i = 0; i <= hNum ; i++) {
 38                     drawLine(0, i * size, width, i * size, color);
 39                 }
 40                 function drawLine(startX, startY, endX, endY, color) {
 41                     cobj.beginPath();
 42                     cobj.strokeStyle = color;
 43                     cobj.lineWidth = 1;
 44                     cobj.moveTo(endX, endY);
 45                     cobj.lineTo(startX, startY);
 46                     cobj.closePath();
 47                     cobj.stroke();
 48                 }
 49             }
 50 
 51             var arr = [];
 52             arr.push({ color: "#fffddd", w: 2, h: 2, data: [[0, 1], [1, 0]] });
 53             arr.push({ color: "#f00", w: 4, h: 1, data: [[1, 1, 1, 1]] });
 54             arr.push({ color: "#0f0", w: 1, h: 1, data: [[1]] });
 55             arr.push({ color: "#B3D325", w: 2, h: 3, data: [[0, 1], [1, 1], [0, 1]] });
 56             arr.push({ color: "#854AA6", w: 2, h: 3, data: [[0, 1], [0, 1], [1, 1]] });
 57             arr.push({ color: "#812AA6", w: 2, h: 3, data: [[1, 1], [0, 1], [0, 1]] });
 58             arr.push({ color: "#85b5A6", w: 2, h: 2, data: [[1, 1], [1, 1]] });
 59 
 60             var currentArr = null;//当前操作的对象
 61             var allArr = [];
 62 
 63 
 64             //初始化形状
 65             function initShape(index) {
 66                 // index = 6;
 67                 currentArr = [];
 68                 var item = arr[index];
 69                 var startDot = Math.floor((wNum - item.w) / 2);
 70                 var y = 1 - item.h;
 71                 for (var i = 0; i < item.h; i++) {
 72                     var x = startDot;
 73                     for (var j = 0; j < item.w; j++) {
 74                         if (item.data[i][j] == 1) {
 75                             currentArr.push({
 76                                 color: item.color,
 77                                 x: x,
 78                                 y: y
 79                             });
 80                         }
 81                         x++;
 82                     }
 83                     y++;
 84                 }
 85             }
 86             //画形状
 87             function drawShape() {
 88                 for (var i = 0; i < allArr.length; i++) {
 89                     var item = allArr[i];
 90                     drawRec(item.x * size, item.y * size, item.color);
 91                 }
 92                 for (var i = 0; i < currentArr.length; i++) {
 93                     var item = currentArr[i];
 94                     drawRec(item.x * size, item.y * size, item.color);
 95                 }
 96             }
 97             function isOK(keyCode) {
 98                 for (var i = 0; i < currentArr.length; i++) {
 99                     var item = currentArr[i];
100                     switch (keyCode) {
101                         case 37://左
102                             if (!isExist(item.x - 1, item.y))
103                                 return false;
104                             break;
105                         case 38://上
106 
107                             break;
108                         case 39://右
109                             if (!isExist(item.x + 1, item.y))
110                                 return false;
111                             break;
112                         case 40://下
113                             if (!isExist(item.x, item.y + 1))
114                                 return false;
115                             break;
116                         default:
117                             break;
118                     }
119                 }
120                 return true;
121             }
122 
123             function isExist(x, y) {
124                 if (x < 0 || x >= width / size || y >= height / size) {
125                     return false;
126                 }
127                 for (var i = 0; i < allArr.length; i++) {
128                     var item = allArr[i];
129                     if (item.x == x && item.y == y) {
130                         return false;
131                     }
132                 }
133                 return true;
134             }
135 
136             function down() {
137                 if (!isOK(40)) {
138                     return false;
139                 }
140                 for (var i = 0; i < currentArr.length; i++) {
141                     currentArr[i].y++;
142                 }
143                 return true
144             }
145             function left() {
146                 if (!isOK(37)) {
147                     return;
148                 }
149                 for (var i = 0; i < currentArr.length; i++) {
150                     currentArr[i].x--;
151                 }
152             }
153             function rigth() {
154                 if (!isOK(39)) {
155                     return;
156                 }
157                 for (var i = 0; i < currentArr.length; i++) {
158                     currentArr[i].x++;
159                 }
160             }
161             function up() {
162                 /*
163                 逆时针旋转
164                 //设原点（x,y),中心点(x0,y0) ,原点绕中心点旋转90度后为(x1,y1);
165                 //则(x-x0)(x1-x0)+(y-y0)(y1-y0)=0
166                 //所以 x1-x0=y-y0 且 y1-y0= -(x-x0) ;
167                 //解得一通解为 x1=y-y0+x0,y1=x0-x+y0 ，这就是旋转90度的坐标变换公式
168                 */
169                 var x0, y0, minX, maxX, minY, maxY;
170                 for (var i = 0; i < currentArr.length; i++) {
171                     var item = currentArr[i];
172                     if (i == 0) {
173                         minX = maxX = item.x;
174                         minY = maxY = item.y;
175                     } else {
176                         if (minX > item.x)
177                             minX = item.x;
178                         if (maxX < item.x)
179                             maxX = item.x;
180                         if (minY > item.y)
181                             minY = item.y;
182                         if (maxY < item.y)
183                             maxY = item.y;
184                     }
185                 }
186                 x0 = Math.floor((maxX + 1 - minX) / 2 + minX);
187                 y0 = Math.floor((maxY + 1 - minY) / 2 + minY);
188                 var tempArr = [];
189 
190                 for (var i = 0; i < currentArr.length; i++) {
191                     var item = clone(currentArr[i]);
192                     tempArr.push(item);
193                 }
194                 for (var i = 0; i < tempArr.length; i++) {
195                     var item = tempArr[i];
196                     var tempx = item.x;
197                     item.x = item.y - y0 + x0;
198                     item.y = x0 - tempx + y0;
199                     if (!isExist(item.x, item.y)) {
200                         return;
201                     }
202                 }
203                 currentArr = [];
204                 for (var i = 0; i < tempArr.length; i++) {
205                     var item = clone(tempArr[i]);
206                     currentArr.push(item);
207                 }
208             }
209 
210             function clone(myObj) {
211                 if (typeof (myObj) != 'object') return myObj;
212                 if (myObj == null) return myObj;
213 
214                 var myNewObj = new Object();
215 
216                 for (var i in myObj)
217                     myNewObj[i] = clone(myObj[i]);
218 
219                 return myNewObj;
220             }
221             //画小方块
222             function drawRec(x, y, color) {
223                 cobj.fillStyle = color;
224                 cobj.fillRect(x, y, size, size);
225             }
226             var time1 = setInterval(function () {
227                 if (currentArr != null) {
228                     if (!down()) {
229                         var clearRowArr = checkClear();
230                         for (var i = 0; i < clearRowArr.length; i++) {
231                             var rowIndex = clearRowArr[i];
232                             for (var j = currentArr.length - 1; j >= 0; j--) {
233                                 if (currentArr[j].y == rowIndex) {
234                                     currentArr.splice(j, 1);
235                                 }
236                             }
237                             for (var j = allArr.length - 1; j >= 0; j--) {
238                                 if (allArr[j].y == rowIndex) {
239                                     allArr.splice(j, 1);
240                                 }
241                             }
242                             for (var j = 0; j < allArr.length; j++) {
243                                 if (allArr[j].y < rowIndex) {
244                                     allArr[j].y++;
245                                 }
246                             }
247 
248                             for (var j = 0; j < currentArr.length; j++) {
249                                 if (currentArr[j].y < rowIndex) {
250                                     currentArr[j].y++;
251                                 }
252                             }
253                             fenshuNum++;
254                             window.document.getElementById("fenshu").innerText = "总分：" + fenshuNum;
255                         }
256                         for (var i = 0; i < currentArr.length; i++) {
257                             if (currentArr[i].y < 0) {
258                                 clearInterval(time1);
259                                 clearInterval(time2);
260                                 alert("游戏结束");
261                                 return;
262                             }
263                         }
264                         for (var i = 0; i < currentArr.length; i++) {
265                             allArr.push(currentArr[i]);
266                         }
267                         initShape(Math.floor(Math.random() * arr.length));
268                     }
269                 } else {
270                     initShape(Math.floor(Math.random() * arr.length));
271                 }
272             }, 500);
273 
274             function checkClear() {
275                 var clearRow = [];
276                 for (var i = 0; i < height / size; i++) {
277                     var flag = false;
278                     for (var j = 0; j < width / size; j++) {
279                         if (!isExist2(allArr, currentArr, j, i)) {
280                             flag = false;
281                             break;
282                         } else {
283                             flag = true;
284                         }
285                     }
286                     if (flag) {
287                         clearRow.push(i);
288                     }
289                 }
290                 return clearRow;
291             }
292 
293             function isExist2(arr1, arr2, x, y) {
294                 for (var i = 0; i < arr1.length; i++) {
295                     var item = arr1[i];
296                     if (item.x == x && item.y == y) {
297                         return true;
298                     }
299                 }
300                 for (var i = 0; i < arr2.length; i++) {
301                     var item = arr2[i];
302                     if (item.x == x && item.y == y) {
303                         return true;
304                     }
305                 }
306             }
307 
308 
309 
310 
311             var time2 = setInterval(function () {
312                 if (currentArr != null) {
313                     dewaBorder();
314                     drawShape();
315                 }
316             }, 20);
317 
318             document.onkeydown = function (event) {
319                 var e = event || window.event || arguments.callee.caller.arguments[0];
320                 if (!e) {
321                     return;
322                 }
323                 if (e.keyCode == 37) {//左
324                     left();
325                 } else if (e.keyCode == 38) {//上
326                     up();
327                 } else if (e.keyCode == 39) {//右
328                     rigth();
329                 } else if (e.keyCode == 40) {//下
330                     down();
331                 }
332             }
333         }
334     </script>
335 </head>
336 <body>
337     <canvas id="canvas" width="240" height="450">
338         您的浏览器不支持
339     </canvas>
340     <input type="button" id="btnStart" value="开始" />
341     <h3 id="fenshu"></h3>
342 </body>
343 </html>
-----------------------------
天王盖地虎小说网：http://www.twgdh.com/