这篇文章主要介绍了 js 实现俄罗斯方块小游戏分享,, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
- <div id="box">
- </div>
- <div id="info">
- NEXT:
- <div id="next">
- </div>
- <div id="text">
- </div>
- </div>
- <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 == 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>
来源: