在线试玩: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>

原文: http://keleyi.com/a/bjac/600xsi0s.htm

web前端:http://www.cnblogs.com/jihua/p/webfront.html

posted on 2013-10-25 16:24  计划  阅读(1068)  评论(0编辑  收藏  举报