100行JavaScript代码实现经典游戏俄罗斯方块
新建一个html文件，复制如下代码，用浏览器打开即可：
</div><div data-lake-id="435bf72e8c0bd533e22aa74acaf02229"> body {background: #000;font: 25px / 25px 宋体;}</div><div data-lake-id="581b30bb46cfa1e05c855f70400e4531"> #box {float: left;width: 252px;border: #999 20px ridge;color: #9f9;text-shadow: 2px 3px 1px #0f0;}</div><div data-lake-id="b4713862863f36b8b7611466c9cebbde"> #info {float: left;color: #cfc;padding: 24px;}</div><div data-lake-id="280992cf9273d29a00351a381a44f570"> #next {padding: 8px;width: 105px;color: #9f9;text-shadow: 2px 3px 1px #0f0;}</div><div data-lake-id="6d7d90735efc246f0e4d45f0e1862e87">
NEXT:
</div><div data-lake-id="942fab22771b96a84401c5593afe5086"> var map = eval("[" + Array(23).join("0x801,") + "0xfff]");</div><div data-lake-id="1013c6fbb573305acc971be3312b1d05"> var tatris = [[0x6600],[0x2222, 0xf00],[0xc600, 0x2640],[0x6c00, 0x4620],[0x4460, 0x2e0, 0x6220, 0x740],[0x2260, 0xe20, 0x6440, 0x4700], [0x2620, 0x720, 0x2320, 0x2700]];</div><div data-lake-id="ec7bb6c9e97a59a110b93f07447c72b6"> var char = {x: "\u3000",s: "\u25a0",t: "\u25a1"};</div><div data-lake-id="b1fe4c81b0843378b06074fab57549a6"> var keycom = {"38": "rotate(1)","40": "down()","37": "move(2,1)","39": "move(0.5,-1)","32": "0;pause=!pause"};</div><div data-lake-id="108e49f6acf3cc8c04136bd443751bbe"> var dia, pos, bak, run, next, pause = false, info = {speed: 1,lines: 0,score: 0};</div><div data-lake-id="86eb9f7b8929379a9ae4743f9d1e7c37"> function start(){</div><div data-lake-id="cd69922a3f99aab341727a7532b1b7ed"> dia = next.d;</div><div data-lake-id="91f58c12dc40f27666e322cfc76c3cc0"> bak = pos = {</div><div data-lake-id="14968e7c64b094e8dcdf2ee43b1d73fa"> fk: [],</div><div data-lake-id="2222dec8c395fbf0f59349b913d7b07b"> y: 0,</div><div data-lake-id="60484f70f055b8be86e71f4457c5d0a8"> x: 4,</div><div data-lake-id="2d3c59b3bbd2c1d3da035d5f99692151"> s: next.s</div><div data-lake-id="5ff981058e5a366e4b87feacfea194ab"> };</div><div data-lake-id="5e0cd6102781ba86af561ea45a7f778d"> nextdia();</div><div data-lake-id="14aefbdb423ce8eb92e497435b46b28a"> 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);</div><div data-lake-id="db9a3a4b5568e71c67ca0f4dd0cb8a53"> document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed;</div><div data-lake-id="6a470c6c5034c61853120c2ca8968c37"> rotate(0);</div><div data-lake-id="4aaf50d8f4d8bfc7765740b355b4576a"> run = setInterval("pause||down()", ~ ~ (Math.pow(1.3, 12 - info.speed) * 30 + 20));</div><div data-lake-id="ece1ab4baa329abc6b398ebb106dddbf"> }</div><div data-lake-id="cd11839efcd9e595321571dc8f5b9ec6"> function over(){</div><div data-lake-id="ade878494c6cc99d45e2ab188c821ff2"> document.onkeydown = null;</div><div data-lake-id="db2e3e151df7db7601a1396ca3c78006"> alert("GAME OVER");</div><div data-lake-id="61ac7ee11556f685dc716910d1e6b111"> }</div><div data-lake-id="c13c438ce5ddc4d58d6ce18910223913"> function nextdia(){</div><div data-lake-id="83f798af9d04c441dd8885a5ced6df83"> next = {d: tatris[~ ~ (Math.random() * 7)],s: ~ ~ (Math.random() * 4)};</div><div data-lake-id="c0c3c3e0ad7815838e36d42d14e44f5d"> }</div><div data-lake-id="b7126ff564a658ce64d5168a33e28e3f"> function update(t){</div><div data-lake-id="3b8e8f98821f1202fa21b49e47fc9467"> bak = {fk: pos.fk.slice(0),y: pos.y,x: pos.x,s: pos.s};</div><div data-lake-id="100352c6ec8b251b4c68439b253478f1"> if (t) </div><div data-lake-id="7851265454416320dbebb615783d0b50"> return;</div><div data-lake-id="cf35883cfee31652cc662922e7c1026f"> for (var i = 0, a2 = ""; i < 22; i++) a2 += map[i].toString(2).slice(1, -1) + "<br/>";</div><div data-lake-id="74401e2ee1b02ac69b93b3d548621cfa"> for (var i = 0, n; i < 4; i++) </div><div data-lake-id="68adde7bec0ada4879e1ae24d7fd2757"> if (/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, char.t))) </div><div data-lake-id="c2e5be7bbfd78837ecd351810678b263"> a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);</div><div data-lake-id="24dbd715359e3413ec8e58784f85a898"> document.getElementById("box").innerHTML = a2.replace(/1/g, char.s).replace(/0/g, char.x);</div><div data-lake-id="25eded514b42c6ca76f4112f200bd760"> }</div><div data-lake-id="9fae138aca10bdb91ef36d091c89e949"> function is(){</div><div data-lake-id="f65857a21480bf6e5856c34f02c24dca"> for (var i = 0; i < 4; i++) </div><div data-lake-id="59fe8243fb2327fe2bd538e6d9c1ac1c"> if ((pos.fk[i] & map[pos.y + i]) != 0) </div><div data-lake-id="634b6a1e4daddb4718e39659076b0a83"> return pos = bak;</div><div data-lake-id="a2ae33090e109529f0091e80ce4fe2f1"> }</div><div data-lake-id="0f69972f94bbe7b31d07c4ced63dfd2b"> function rotate(r){</div><div data-lake-id="f962e95320144c0e6b0ca76e19f1eea0"> var f = dia[pos.s = (pos.s + r) % dia.length];</div><div data-lake-id="bc28f3dd49b7af39961b85b70516a036"> for (var i = 0; i < 4; i++) </div><div data-lake-id="60b4550762e279101ade994183f0b1a6"> pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x;</div><div data-lake-id="bacf57d2405bfbf81a0a37457144f775"> update(is());</div><div data-lake-id="624f210eb1c74f9a2188b966798cf9b7"> }</div><div data-lake-id="d80e029e0c2f71e04973cda3fd127453"> function down(){</div><div data-lake-id="0d1cd4d52845ead3e72573f5f8731ad7"> ++pos.y;</div><div data-lake-id="daf6321c46b591ba69e359f03a487eaf"> if (is()) {</div><div data-lake-id="3229ff116470881e59503ad391fbc783"> for (var i = 0, r = 0; i < 4 && pos.y + i < 22; i++) </div><div data-lake-id="cb45c804163b0f1e61784393806086cf"> if ((map[pos.y + i] |= pos.fk[i]) == 0xfff) {</div><div data-lake-id="90e95937239a8790c2d1c59c2f4bffb3"> map.splice(pos.y + i, 1), map.unshift(0x801);</div><div data-lake-id="73f58fca017f9dc30fb7effe524e60e9"> ++info.lines % 20 == 0 && info.speed++, r++;</div><div data-lake-id="50c8ffd8d186b6a6c19dba0aee7523ab"> }</div><div data-lake-id="372e01d13f49d42d56ebd3a03321409c"> clearInterval(run);</div><div data-lake-id="0a95bc4c5fbec18bcf8f8d4fe4a39eda"> if (map[1] != 0x801) </div><div data-lake-id="1d5ea199df1fe2f3f0aadf2f72a92ea8"> return over();</div><div data-lake-id="f53b42fef06f83df9f849aff1864c0e2"> info.score += ~ ~ (Math.pow(r, 1.5) * 10) + 2;</div><div data-lake-id="7b3a30d65ec9147d5ead032d4de12b77"> start();</div><div data-lake-id="535da4e7ca0f0b01c71bf52f1d955bef"> }</div><div data-lake-id="b58a76f43dd2f1599681698316b2f7c4"> update();</div><div data-lake-id="da15a627151fdf54b2644e883d82a28b"> }</div><div data-lake-id="ace4808b3288fbd37420281764174735"> function move(t, k){</div><div data-lake-id="d190c88de5cf7887ca0683f83420714d"> pos.x += k;</div><div data-lake-id="59eb39b9b4e3c9190a41dd401cc40636"> for (var i = 0; i < 4; i++) </div><div data-lake-id="f6e76306e886e6544f0947c286ce80fe"> pos.fk[i] *= t;</div><div data-lake-id="6cce52d817c71bfd71f43269fe9dfcf5"> update(is());</div><div data-lake-id="aaeac8af07f13d328747481819393f9f"> }</div><div data-lake-id="aa670136da65b30d72da1c4fb5a9d8f3"> document.onkeydown = function(e){</div><div data-lake-id="6dab7af005c6ab6590039ac89b123e68"> eval("pause||" + keycom[(e ? e : event).keyCode]);</div><div data-lake-id="bc21e318016b1756c0f0f86d1c1dd7a1"> };</div><div data-lake-id="f2829325ef1aa7631f56e58d827f97aa"> nextdia();</div><div data-lake-id="b08608f7a3ebe060a3f467e6ff05c8e4"> start();</div><div data-lake-id="6608c3f33933c5cbf907fcd7d80bf047">