简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - JS 80行代码搞定俄罗斯方块，求大神给写个注释
ringa_lee
ringa_lee 2017-04-11 11:03:42
0
1
503

很想学这个，但是很多地方都看不懂，比如那些数据是干什么的，还有很多写法都没见过，比如第一句话...希望大神帮忙把代码写个注释或者改成能看懂的 - -。

<!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>
ringa_lee
ringa_lee

ringa_lee

모든 응답(1)
阿神
阿神2017-04-11 11:05:42 1층

看不懂不会自己一行一行加日志么
指望别人给你写注释
呵呵

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！