在线试玩:http://keleyi.com/game/5/
操作指南:
键盘方向键←→控制左右移动,↑键变形,↓键快速下落。
别看这段js代码只有短短的100多行,效果却非常不错,用键盘的方向键操作,向上键是变形,赶紧试试。
把下面代码保存到html文件,打开就可以。
1 <html><head><title>俄罗斯方块-柯乐义</title> 2 <link href="http://keleyi.com/game/5/index/keleyielsfk.css" type="text/css" rel="Stylesheet" /></head> 3 <body><a href="http://keleyi.com/a/bjac/600xsi0s.htm">原文</a></body></html> 4 <script> 5 var over = false, shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";"); 6 function create(tag, css) { 7 var elm = document.createElement(tag); 8 elm.className = css; 9 document.body.appendChild(elm); 10 return elm; 11 } 12 function Tetris(c, t, x, y) { 13 var c = c ? c : "c"; 14 this.divs = [create("div", c), create("div", c), create("div", c), create("div", c)]; 15 this.reset = function () { 16 this.x = typeof x != 'undefined' ? x : 3; 17 this.y = typeof y != 'undefined' ? y : 0; 18 this.shape = t ? t : shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(","); 19 this.show(); 20 if (this.field && this.field.check(this.shape, this.x, this.y, 'v') == 'D') { 21 over = true; 22 this.field.fixShape(this.shape, this.x, this.y); 23 alert('游戏结束。http://keleyi.com/game/5/'); 24 } 25 } 26 this.show = function () { 27 for (var i in this.divs) { 28 this.divs[i].style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px'; 29 this.divs[i].style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px'; 30 } 31 } 32 this.field = null; 33 this.hMove = function (step) { 34 var r = this.field.check(this.shape, this.x - -step, this.y, 'h'); 35 if (r != 'N' && r == 0) { 36 this.x -= -step; 37 this.show(); 38 } 39 } 40 this.vMove = function () { 41 if (this.field.check(this.shape, this.x, this.y - -1, 'v') == 'N') { 42 this.y++; 43 this.show(); 44 } 45 else { 46 this.field.fixShape(this.shape, this.x, this.y); 47 this.field.findFull(); 48 this.reset(); 49 } 50 } 51 this.rotate = function () { 52 var s = this.shape; 53 var newShape = [3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]]; 54 var r = this.field.check(newShape, this.x, this.y, 'h'); 55 if (r == 'D') return; 56 if (r == 0) { 57 this.shape = newShape; 58 this.show(); 59 } 60 else if (this.field.check(newShape, this.x - r, this.y, 'h') == 0) { 61 this.x -= r; 62 this.shape = newShape; 63 this.show(); 64 } 65 } 66 this.reset(); 67 } 68 function Field(w, h) { 69 this.width = w ? w : 10; 70 this.height = h ? h : 20; 71 this.show = function () { 72 var f = create("div", "f") 73 f.style.width = this.width * 20 + 'px'; 74 f.style.height = this.height * 20 + 'px'; 75 } 76 this.findFull = function () { 77 for (var l = 0; l < this.height; l++) { 78 var s = 0; 79 for (var i = 0; i < this.width; i++) { 80 s += this[l * this.width + i] ? 1 : 0; 81 } 82 if (s == this.width) { 83 this.removeLine(l); 84 } 85 } 86 } 87 this.removeLine = function (line) { 88 for (var i = 0; i < this.width; i++) { 89 document.body.removeChild(this[line * this.width + i]); 90 } 91 for (var l = line; l > 0; l--) { 92 for (var i = 0; i < this.width; i++) { 93 this[l * this.width - -i] = this[(l - 1) * this.width - -i]; 94 if (this[l * this.width - -i]) this[l * this.width - -i].style.top = l * 20 + 'px'; 95 } 96 } 97 } 98 this.check = function (shape, x, y, d) { 99 var r1 = 0, r2 = 'N'; 100 for (var i = 0; i < 8; i += 2) { 101 if (shape[i] - -x < 0 && shape[i] - -x < r1) 102 { r1 = shape[i] - -x; } 103 else if (shape[i] - -x >= this.width && shape[i] - -x > r1) 104 { r1 = shape[i] - -x; } 105 if (shape[i + 1] - -y >= this.height || this[shape[i] - -x - -(shape[i + 1] - -y) * this.width]) 106 { r2 = 'D' } 107 } 108 if (d == 'h' && r2 == 'N') return r1 > 0 ? r1 - this.width - -1 : r1; 109 else return r2; 110 } 111 this.fixShape = function (shape, x, y) { 112 var d = new Tetris("d", shape, x, y); 113 d.show(); 114 for (var i = 0; i < 8; i += 2) { 115 this[shape[i] - -x - -(shape[i + 1] - -y) * this.width] = d.divs[i / 2]; 116 } 117 } 118 } 119 var f = new Field(); 120 f.show(); 121 var s = new Tetris(); 122 s.field = f; 123 s.show(); 124 window.setInterval("if(!over)s.vMove();", 500); 125 document.onkeydown = function (e) { 126 if (over) return; 127 var e = window.event ? window.event : e; 128 switch (e.keyCode) { 129 case 38: //up keleyi.com 130 s.rotate(); 131 break; 132 case 40: //down 133 s.vMove(); 134 break; 135 case 37: //left 136 s.hMove(-1); 137 break; 138 case 39: //right 139 s.hMove(1); 140 break; 141 } 142 } 143 </script>