早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式)。
我用C写一个功能基本齐全的俄罗斯方块的话,大约需要1000行代码的样子。所以60行乍一看还是很让人吃惊的。
但是读懂了代码之后发现其实整个程序并没有使用什么神秘的技术,只不过是利用一些工具或者JavaScript本身的技巧大大简化了代码。
总结起来主要是以下三点
1.使用eval来产生JavaScript代码,减小了代码体积
2.以字符串作为游戏场景数据,使用正则表达式做查找和匹配,省去了通常应当手动编写的查找验证代码
3.以二进制方式管理俄罗斯方块数据和场景数据,通过位运算简化比较和验证
另外,原作者代码换行很少,代码写的比较紧凑,这也是导致这个程序仅仅只有60行的一个原因。
下面给出经过我排版注释后的代码。
<!doctype html>
<html>
<head>
<title>俄罗斯方块-Linux公社 - Linux系统门户网站</title>
<meta content="Linux公社()是专业的Linux系统门户网站,实时发布最新Linux资讯,包括Linux、Ubuntu、Fedora、RedHat、红旗Linux、Linux教程、Linux认证、SUSE Linux、Android、Oracle、Hadoop等技术。"/>
<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]];