纯JS俄罗斯方块，打造属于你的游戏帝国。-俄罗斯方块游戏界面

俄罗斯方块（Tetris，俄文：Тетрис）是一款电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。

俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜，从而家喻户晓，风靡世界。

那么，我们的问题来了，学挖掘机技术哪家强？

俄罗斯方块可以说是风靡全世界，老少皆知的一款游戏，那么我们作为web开发是否可以使用代码简单实现这个小游戏呢？

html代码部分：

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <h2 style="background-color:yellow;">博客园:请叫我头头哥</h2> 
    <div id="box"></div> 
    <div id="info"> 
        NEXT: 
        <div id="next"></div> 
        <div id="text"></div> 
    </div> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

css部分：　

body { 
        background: blue; 
        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; 
    } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

　js部分：

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; 
 
        // confirm， 是否再来一局 
        var end = confirm("游戏结束, 是再来一局"); 
        if (end) { 
            window.location.href = window.location.href; 
        } else { 
            alert("骚年，自制力不错!"); 
        } 
    } 
 
    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(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.

　　实现效果图：

　　另外提供源码下载。

　　特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。

　　本文原始作者博客 http://www.cnblogs.com/toutou