60行JS实现俄罗斯方块

参考资料：http://www.cnblogs.com/jimaojin/p/5413857.html

原版:

<!doctype html><html><head></head><body>

<div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div>

<script>

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 keycom={"38":"rotate(1)","40":"down()","37":"move(2,1)","39":"move(0.5,-1)"};

var dia, pos, bak, run;

function start(){

    dia=tatris[~~(Math.random()*7)];

    bak=pos={fk:[],y:0,x:4,s:~~(Math.random()*4)};

    rotate(0);

}

function over(){

    document.onkeydown=null;

    clearInterval(run);

    alert("GAME OVER");

}

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,"\u25a1")))

            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,"\u25a0").replace(/0/g,"\u3000");

}

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; 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);

        if(map[1]!=0x801) return over();

        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(keycom[(e?e:event).keyCode]);

};

start();

run=setInterval("down()",400);

</script></body></html>

注释版：

<!doctype html>

<html>

    <head>

        <title>俄罗斯方块</title>

    </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]];  

            //此对象之中存储的是按键键值（上，下，左，右）和函数之间的调用映射关系，之后通过eval可以做好调用映射

            var keycom = {"38" : "rotate(1)",

                          "40" : "down()",

                          "37" : "move(2, 1)",

                          "39" : "move(0.5, -1)"};

            //dia存储选取的俄罗斯方块类型（一共七种俄罗斯方块类型）

            //pos是前台正在下落的俄罗斯方块图案（每一种俄罗斯方块类型有属于自己的图案，如果不清楚可以查看上文的锯齿数组）对象

            //bak里存储关于pos图案对象的备份，在需要的时候可以实现对于pos运动的撤销

            var dia, pos, bak, run;

            //在游戏场景上方产生一个新的俄罗斯方块

            function start(){ 

                //产生0~6的随机数，~运算符在JavaScript依然是位取反运算，隐式实现了浮点数到整形的转换，这是一个很丑陋的取整实现方式

                //其作用是在七种基本俄罗斯方块类型之中随机选择一个

                dia = tatris[~~(Math.random() * 7)];

                //pos和bak两个对象分别为前后台，实现俄罗斯方块运动的备份和撤销

                bak = pos = {fk : [],                                    //这是一个数组存储的是图案转化之后的二进制数据

                             y : 0,                                        //初生俄罗斯方块的y坐标

                             x : 4,                                     //初生俄罗斯方块的x坐标，相对于右侧

                             s : ~~(Math.random() * dia.length)};        //在特定的俄罗斯方块类型之中随机选择一个具体的图案

                //新生的俄罗斯方块不旋转，所以这里参数为0

                rotate(0);

            } 

            //旋转，实际上这里做的处理只不过是旋转旋转之后的俄罗斯方块具体图案，之后进行移位，根据X坐标把位置移动到场景里对应的地点

            function rotate(r){ 

                //这里是根据旋转参数 r 选择具体的俄罗斯方块图案，这里的 f ，就是上文之中的十六进制数

                //这里把当前pos.s的值和r（也就是旋转角度）相加，最后和dia.length求余，实现了旋转循环

                var f = dia[pos.s = (pos.s + r) % dia.length];

                //根据f（也就是上文之中提供的 16 位数据）每4位一行填写到fk数组之中

                for(var i = 0; i < 4; i++) {

                    //初生的俄罗斯方块pos.x的值为4，因为是4 * 4的团所以在宽度为12的场景里左移4位之后就位于中间四列范围内

                    pos.fk[i] = (f >> (12 - i * 4) & 0x000f) << pos.x;

                }

                //更新场景

                update(is());

            }      

            //这是什么意思，这是一个判断，判断有没有重叠

            function is(){  

                //对于当前俄罗斯方块图案进行逐行分析

                for(var i = 0; i < 4; i++) {

                    //把俄罗斯方块图案每一行的二进制位与场景内的二进制位进行位与，如果结果非0的话，那么这就证明图案和场景之中的实体（比如墙或者是已经落底的俄罗斯方块）重合了

                    //既然重合了，那么之前的运动就是非法的，所以在这个if语句里面调用之前备份的bak实现对于pos的恢复

                    if((pos.fk[i] & map[pos.y + i]) != 0) {

                        return pos = bak;

                    }

                }    

                //如果没有重合，那么这里默认返回空

            }      

            //此函数产生用于绘制场景的字符串并且写入到div之中完成游戏场景的更新

            function update(t){  

                //把pos备份到bak之中，slice(0)意为从0号开始到结束的数组，也就是全数组，这里不能直接赋值，否则只是建立引用关系，起不到数据备份的效果

                bak = {fk : pos.fk.slice(0), y : pos.y, x : pos.x, s : pos.s};  

                //如果俄罗斯方块和场景实体重合了的话，就直接return返回，不需要重绘场景

                if (t) {

                    return;

                }

                //这里是根据map进行转换，转化得到的是01加上换行的原始串

                for(var i = 0, a2 = ""; i < 22; i++) {

                    //br就是换行，在这个循环里，把地图之中所有数据以二进制数字的形式写入a2字符串

                    //这里2是参数，指定基底，2的话就是返回二进制串的形式

                    //slice(1, -1)这里的参数1，-1作用是取除了墙（收尾位）之外中间场景数据（10位）

                    a2 += map[i].toString(2).slice(1, -1) + "<br/>";

                }

                //这里实现的是对于字符串的替换处理，就是把原始的01字符串转换成为方块汉字串

                for(var i = 0, n; i < 4; i++) {

                    //这个循环处理的是正在下落的俄罗斯方块的绘制

                    ////\u25a1是空格方块，这里也是隐式使用正则表达式

                    if(/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, "\u25a1"))) { 

                        a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);

                    }

                }

                //对于a2字符串进行替换，并且显示在div之中，这里是应用

                ////\u25a0是黑色方块 \u3000是空，这里实现的是替换div之中的文本，由数字替换成为两种方块或者空白

                document.getElementById("box").innerHTML = a2.replace(/1/g, "\u25a0").replace(/0/g, "\u3000");

            }  

            //游戏结束

            function over(){  

                //撤销onkeydown的事件关联

                document.onkeydown = null;

                //清理之前设置的俄罗斯方块下落定时器

                clearInterval(run);

                //弹出游戏结束对话框

                alert("游戏结束");

            }  

            //俄罗斯方块下落

            function down(){ 

                //pos就是当前的（前台）俄罗斯方块，这里y坐标++，就相当于下落

                ++pos.y; 

                //如果俄罗斯方块和场景实体重合了的话

                if(is()){ 

                    //这里的作用是消行

                    for(var i = 0; i < 4 && pos.y + i < 22; i++) { 

                        //和实体场景进行位或并且赋值，如果最后赋值结果为0xfff，也就说明当前行被完全填充了，可以消行

                        if((map[pos.y + i] |= pos.fk[i]) == 0xfff) {

                            //行删除

                            map.splice(pos.y + i, 1);

                            //首行添加，unshift的作用是在数组第0号元素之前添加新元素，新的元素作为数组首元素

                            map.unshift(0x801);

                        }

                    }                                

                    //如果最上面一行不是空了，俄罗斯方块垒满了，则游戏结束

                    if(map[1] != 0x801) {

                        return over();

                    }

                    //这里重新产生下一个俄罗斯方块

                    start();

                } 

                //否则的话更新，因为这里不是局部更新，是全局更新，所以重新绘制一下map就可以了

                update();

            }  

            //左右移动，t参数只能为2或者是0.5

            //这样实现左移右移（相当于移位运算）这种方法也很丑陋，但是为了简短只能这样了

            //这样做很丑陋，但是可以让代码简短一些

            function move(t, k){  

                pos.x += k;  

                for(var i = 0; i < 4; i++) { 

                    //*=t在这里实现了左右移1位赋值的功能

                    pos.fk[i] *= t;

                }

                //左右移之后的更新，这里同样进行了重合判断，如果和左右墙重合的话，那么一样会撤销操作并且不更新场景

                update(is());

            }  

            //设置按键事件映射，这样按下键的时候就会触发对应的事件，具体来说就是触发对应的move，只有2和0.5

            document.onkeydown = function(e) {  

                //eval生成的JavaScript代码，在这里就被执行了

                eval(keycom[(e ? e : event).keyCode]);

            };

            //这样看来的话，这几乎是一个递归。。。

            start();

            //设置俄罗斯方块下落定时器，500毫秒触发一次，调节这里的数字可以调整游戏之中俄罗斯方块下落的快慢

            run = setInterval("down()", 500);

        </script>

    </body>

</html>

60行JS实现俄罗斯方块的更多相关文章

60行JavaScript代码俄罗斯方块
教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...
教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏
早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...
javascript 60行编写的俄罗斯方块游戏
转自 http://***/share/1759652641295360.htm <!doctype html><html><head></head>& ...
使用C&num;重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
60行以内写mvc
标题党.几天前看到一个30行写mvc的文章,东施效颦,也动手写了个60行的,功能上略微扩充一些,记录下来,后面有时间可以继续优化. mvc其实是一个观察者模式.view来监听model,所以当mode ...
100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
Chrome控制台输入多行js
Chrome控制台输入多行js 分类: chrome2013-09-08 09:40 342人阅读评论(0) 收藏举报控制台 Chrome控制台中回车默认是执行,要想输入换行,应按Enter+S ...
不到30行JS代码实现的Excel表格
不到30行JS代码实现的Excel表格,jQuery并非不可替代某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

随机推荐

Android mtk单路录音问题
在单路录音中,有两种情况导致底层录音资源被占用的问题: 1 开启vmLog后,拨打一个电话,挂断电话.如果挂断电话后,没有关闭vmlog进程,则会导致其它AP 无法得到底层的录音资源,从而无法录音. ...
二维码zxing源码分析（四）wifi部分
前三个部分的地址是:ZXING源码分析(一)CAMERA部分 . zxing源码分析(二)decode部分.zxing源码分析(三)result.history部分前面三篇文章基本上已经把zxin ...
C语言求2的100次方怎么解，大整数运算
#include "stdio.h"int ai[100]; void main(){ int a,b; ai[99]=1; for(b=0;b<100;b++) for( ...
tar命令打包文件夹下所有的文件
例如在/home/rip123/www 路径有aa.txt aab.txt bb.txt cc.txt 文件,想将所有的打包却不想一个个敲: 做法:在www文件夹下输入命令: tar ...
IDEA远程调试
问题: 通常在java打成可运行的Jar项目时,运行jar时调试很不方便,特别是要在linux上面执行jar包的情况.此时需要将这个项目打成Jar包(如果是maven项目,直接使用pa ...
spark job运行参数优化
http://www.cnblogs.com/LBSer/p/4129481.html 一.问题使用spark join两张表(5000w*500w)总是出错,报的异常显示是在shuffle阶段. ...
HDU2102(KB2-I)
A计划 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
Jquery 中 &dollar;&period;getJSON的用法
之前类似的方法用过 $.post, $.get,$.ajax,还是第一次用这个 $.getJSON. 前三个都是用作异步请求的,那么最后一个呢?其实也是异步请求的,和 $.get 最类似,因为他也是将 ...
Microsoft SQL Server Express各版本对比
Microsoft® SQL Server® 2016 Express 支持的操作系统 Windows 10 , Windows 8, Windows Server 2012, Windows Ser ...
sql&colon;sql server,MySQL,PostgreSQL的表,视图,存储过程结构查询
sql server 2005: --SQL SERVER 2005 生成代码需要知道的SQL语句 use LibrarySystem --查询当前数据库所有表和其的主键字段,字段类型,长度,是否为空 ...