當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
100行JavaScript代码实现JavaScript
生活随笔
收集整理的這篇文章主要介紹了
100行JavaScript代码实现JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先看效果：
100行JavaScript代碼實現經典游戲俄羅斯方塊
新建一個html文件，復制如下代碼，用瀏覽器打開即可：
<!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 % 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>要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":
總結
以上是生活随笔為你收集整理的100行JavaScript代码实现JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阴阳师妖怪屋占卜屋有什么用 占卜屋玩法攻
- 下一篇： 动物大联盟针虫巢窟怎么过 针虫巢窟bos