<!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. 屌丝程序猿赚钱之道 之APP

    假设你已经通过APP赚到了钱,那么本文对你而言没有意义.倒是希望你可以给我们诸多建议. 通过制作APP或者说手机应用赚钱,相信是非常多程序猿希望做的事情.也确实有一些人通过APP赚到了钱. 对于程序猿 ...

  2. Android M(6.0) 权限爬坑之旅

    坑一:用Android5.0编译的apk,在Android6.0上运行完全没有问题. 在Android6.0以上才需要在运行时请求权限,在旧Android版本上保留原有逻辑,安装时授予权限. 用旧版本 ...

  3. hdu2047.java递推题

    阿牛的EOF牛肉串 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  4. MSDN Webcast 系列课程

    云计算(Cloud) 云起龙骧系列课程 网络开发(Web) ASP.NET 4 风云之旅系列课程 ASP.NET 开发实践系列课程 MOSS2007 最佳实战 StepByStep 系列课程 Silv ...

  5. MyBatis返回主键，MyBatis Insert操作返回主键

    MyBatis返回主键,MyBatis Insert操作返回主键 >>>>>>>>>>>>>>>>> ...

  6. js去掉所有空格

    <script> String.prototype.trim = function () {            return this.replace(/(^\s*)|(\s*$)/g ...

  7. C#中Hashtable、Dictionary详解以及写入和读取对比

    转载:http://www.cnblogs.com/chengxingliang/archive/2013/04/15/3020428.html 在本文中将从基础角度讲解HashTable.Dicti ...

  8. 详解android:scaleType属性

    详解android:scaleType属性 转自:http://blog.csdn.net/encienqi/article/details/7913262    http://juliaailse. ...

  9. （转）分享一个SQLSERVER脚本（计算数据库中各个表的数据量和每行记录所占用空间）

    分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间) 很多时候我们都需要计算数据库中各个表的数据量和每行记录所占用空间 这里共享一个脚本 CREATE TABLE #tab ...

  10. 跨域的小小总结：js跨域及跨域的几种解决方法

    一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...