60行JavaScript代码俄罗斯方块游戏全解析

早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式)。

我用C写一个功能基本齐全的俄罗斯方块的话,大约需要1000行代码的样子。所以60行乍一看还是很让人吃惊的。

但是读懂了代码之后发现其实整个程序并没有使用什么神秘的技术,只不过是利用一些工具或者JavaScript本身的技巧大大简化了代码。

总结起来主要是以下三点

1.使用eval来产生JavaScript代码,减小了代码体积

2.以字符串作为游戏场景数据,使用正则表达式做查找和匹配,省去了通常应当手动编写的查找验证代码

3.以二进制方式管理俄罗斯方块数据和场景数据,通过位运算简化比较和验证

另外,原作者代码换行很少,代码写的比较紧凑,这也是导致这个程序仅仅只有60行的一个原因。

60行JavaScript代码俄罗斯方块游戏 演示地址

下面给出经过我排版注释后的代码。

<!doctype html> 
<html>
    <head>
        <title>俄罗斯方块-Linux公社 - Linux系统门户网站</title>
  <meta content="Linux公社()是专业的Linux系统门户网站,实时发布最新Linux资讯,包括Linux、UbuntuFedoraRedHat红旗Linux、Linux教程、Linux认证、SUSE Linux、AndroidOracleHadoop等技术。"/>
  <meta content="Linux,Ubuntu,Fedora,RedHat,红旗Linux,Linux教程,Linux系统,Linux安装,SUSE Linux,Android,Oracle"/>
    </head> 
   
    <body> 
        <div id = "box"
            style = "margin : 20px auto;
                      text-align : center;
                      width : 252px;
                      font : 25px / 25px 宋体;
                      background : #000;
                      color : #9f9;
                      border : #999 20px ridge;
                      text-shadow : 2px 3px 1px #0f0;">
        </div>
       
        <script> 
            //eval的功能是把字符串变成实际运行时的JavaScript代码
            //这里代码变换之后相当于 var map = [0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0xfff];
            //其二进制形式如下
            //100000000001 十六进制对照 0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801           
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //100000000001              0x801
            //111111111111              0xfff
            //数据呈U形分布,没错,这就是俄罗斯方块的地图(或者游戏场地更为合适?)的存储区
            var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
           
            //这个锯齿数组存储的是7种俄罗斯方块的图案信息
            //俄罗斯方块在不同的旋转角度下会产生不同的图案,当然可以通过算法实现旋转图案生成,这里为了减少代码复杂性直接给出了不同旋转状态下的图案数据
            //很明显,第一个0x6600就是7种俄罗斯方块之中的正方形方块
            //0x6600二进制分四行表示如下
            //0110
            //0110
            //0000
            //0000
            //这就是正方形图案的表示,可以看出,这里统一采用一个16位数来存储4 * 4的俄罗斯方块图案
            //因为正方形图案旋转不会有形状的改变,所以此行只存储了一个图案数据
            var tatris = [[0x6600],
                          [0x2222, 0x0f00],
                          [0xc600, 0x2640],
                          [0x6c00, 0x4620],
                          [0x4460, 0x2e0, 0x6220, 0x740],
                          [0x2260, 0x0e20, 0x6440, 0x4700],
                          [0x2620, 0x720, 0x2320, 0x2700]]; 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/00d24c0ff618be9a598dac43d4563e18.html