javascript - JS 80行代码搞定俄罗斯方块，求大神给写个注释
很想学这个，但是很多地方都看不懂，比如那些数据是干什么的，还有很多写法都没见过，比如第一句话...希望大神帮忙把代码写个注释或者改成能看懂的 - -。
<!doctype html>
<html>
<head>
<style type="text/css">
body {
background: #000;
font: 25px / 25px 宋体;
}
#box {
float: left;
width: 252px;
border: #999 20px ridge;
color: #9f9;
text-shadow: 2px 3px 1px #0f0;
}
#info {
float: left;
color: #cfc;
padding: 24px;
}
#next {
padding: 8px;
width: 105px;
color: #9f9;
text-shadow: 2px 3px 1px #0f0;
}
</style>
</head>
<body>
<p id="box"></p>
<p id="info">NEXT:
<p id="next"></p>
<p id="text"></p>
</p>
<script type="text/javascript">
var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
var tatris = [
[0x6600],
[0x2222, 0xf00],
[0xc600, 0x2640],
[0x6c00, 0x4620],
[0x4460, 0x2e0, 0x6220, 0x740],
[0x2260, 0xe20, 0x6440, 0x4700],
[0x2620, 0x720, 0x2320, 0x2700]
];
var char = {
x: "\u3000",
s: "\u25a0",
t: "\u25a1"
};
var keycom = {
"38": "rotate(1)",
"40": "down()",
"37": "move(2,1)",
"39": "move(0.5,-1)",
"32": "0;pause=!pause"
};
var dia, pos, bak, run, next, pause = false,
info = {
speed: 1,
lines: 0,
score: 0
};
function start() {
dia = next.d;
bak = pos = {
fk: [],
y: 0,
x: 4,
s: next.s
};
nextdia();
document.getElementById("next").innerHTML = (next.d[next.s % next.d.length] | 0x10000).toString(2).slice(-16).replace(/..../g, "$&<br/>").replace(/1/g, char.t).replace(/0/g, char.x);
document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed;
rotate(0);
run = setInterval("pause||down()", ~~(Math.pow(1.3, 12 - info.speed) * 30 + 20));
}
function over() {
document.onkeydown = null;
alert("GAME OVER");
}
function nextdia() {
next = {
d: tatris[~~(Math.random() * 7)],
s: ~~(Math.random() * 4)
};
}
function update(t) {
bak = {
fk: pos.fk.slice(0),
y: pos.y,
x: pos.x,
s: pos.s
};
if (t) return;
for (var i = 0, a2 = ""; i < 22; i++) a2 += map[i].toString(2).slice(1, -1) + "<br/>";
for (var i = 0, n; i < 4; i++)
if (/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, char.t)))
a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);
document.getElementById("box").innerHTML = a2.replace(/1/g, char.s).replace(/0/g, char.x);
}
function is() {
for (var i = 0; i < 4; i++)
if ((pos.fk[i] & map[pos.y + i]) != 0)
return pos = bak;
}
function rotate(r) {
var f = dia[pos.s = (pos.s + r) % dia.length];
for (var i = 0; i < 4; i++)
pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x;
update(is());
}
function down() {
++pos.y;
if (is()) {
for (var i = 0, r = 0; i < 4 && pos.y + i < 22; i++)
if ((map[pos.y + i] |= pos.fk[i]) == 0xfff) {
map.splice(pos.y + i, 1), map.unshift(0x801);
++info.lines % 20 == 0 && info.speed++, r++;
}
clearInterval(run);
if (map[1] != 0x801)
return over();
info.score += ~~(Math.pow(r, 1.5) * 10) + 2;
start();
}
update();
}
function move(t, k) {
pos.x += k;
for (var i = 0; i < 4; i++)
pos.fk[i] *= t;
update(is());
}
document.onkeydown = function(e) {
eval("pause||" + keycom[(e ? e : event).keyCode]);
};
nextdia();
start();
</script>
</body>
</html>
