100行JavaScript代码实现JavaScript

作者: 华山令狐冲 | 来源:发表于2020-03-06 21:14 被阅读0次

JavaScript制作屏幕透视图效果
JavaScript鼠标移动到图片上显示描述信息
JavaScript计算器
2018-07-30
简易Redux实现
jQuery 10.20
webview使用总结
初识JavaScript
100行JavaScript代码实现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的原创文章，请关注公众号"汪子熙":