<!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 domain="www_zuidaima_com";

var author="zuidaima";

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>

HTML+JS版本的俄罗斯方块的更多相关文章

  1. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

  2. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  3. [Effective JavaScript笔记]第1条：了解使用的js版本

    1997年 正式成为国际标准,官方名称为ECMAScript. 1999年 定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年 发布第5版即ES5,引入了一些新特性,标准 ...

  4. JS版本网站资源状态检测

    Title:JS版本网站资源状态检测  --2012-08-28 14:08 前几天需要一个网站状态检测的东东,后面写了个蹩脚的JS版本,里面用到了以前没用过的东西,在这里记下来,其实批处理加curl ...

  5. js实现的文章输入检查与测速。(纯js版本)

    朋友又提出一些需求.希望不要jquery .于是修改成js版本. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. Mac下nvm管理node.js版本问题

    本篇文章主要是针对已经安装了node.js和nvm管理工具小伙伴遇到的问题. 管理工具有两个,一个是nvm,还有一个是nnvm的好处就是可以管理多个node版本,而且可以切换想要的版本,可以安装一个稳 ...

  7. 限定项目的 Node.js 版本

    限定项目运行所需的 Node.js 版本可保证项目在一个稳定可预期的环境中运行,减少不必要的故障.甚至有些依赖库只能工作于某些版本下.同时,不加以限制的话,在多人合作的项目中恐怕会引起环境不一致带来的 ...

  8. 移动一根火柴使等式成立js版本（递归）

    修改成递归版本 思路: 1.设定规则数组,比如:1加一根火柴只可以变成7. 2.设定方法数组,比如:一个数增加了一根火柴,其他的数必然减少一根火柴. 3.增加Array方法,由元素名和方法,得到规则对 ...

  9. 判断一个字符串同时出现几个字符的C#版本和JS版本

    C#版本,参考:http://www.cnblogs.com/dudu/p/3841256.html JS版本是我群友写的: var str="abcdef"; var arr=[ ...

随机推荐

  1. Excel异常Cannot get a text value from a numeric cell

    POI操作Excel时数据Cell有不同的类型,当我们试图从一个数字类型的Cell读取出一个字符串并写入数据库时,就会出现Cannot get a text value from a numeric ...

  2. BMVC reading list

    'Combining Local and Global Cues for Closed Contour Extraction' Vida Movahedi, James Elder 'FRIF: Fa ...

  3. poj 3294 Life Forms

    后缀数组的题目,把后缀连接起来,这个还是先二分答案,然后选取一段连续的height值,判断这些height代表的后缀有没有覆盖一半以上的字符串. 得出答案的长度之后还要在枚举连续的heigh,判断有没 ...

  4. PMP考试的过与只是

    我在一年多时间里參加了三次PMP考试,前两次都失败,直到第三次才成功.怎样对待失败?这是每个人都会遇到的挑战.假设我们能用正确的态度对待临时的失败,那么终于的成功也就不远了.我希望通过本文与大家分享一 ...

  5. A Cross-Platform Memory Leak Detector

    Memory leakage has been a permanent annoyance for C/C++ programmers. Under MSVC, one useful feature ...

  6. magic_quotes_runtime（魔术引号开关）

    我们可以通过以下代码来探测php环境中magic_quotes_runtime是否开启: magic_runtime.php 源代码如下: <?php //当magic_quotes_runti ...

  7. android开发之重写Application类

    在android应用开发中,重写Application也算是比较常见的,以前开发的一些程序太过于简单,都不要重写这个类,但是在真正的商业开发中,重写Application类几乎是必做的. 为什么要重写 ...

  8. IDEA下安装/配置Jrebel

    IDEA下安装/配置Jrebel6.X 1. 为什么要使用Jrebel 在日常开发过程中, 一旦修改配置/在类中增加静态变量/增加方法/修改方法名等情况, tomcat不会自动加载, 需要重启tomc ...

  9. Memcache简介

    简介 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调 ...

  10. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...