<!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>

60行JavaScript俄罗斯方块的更多相关文章

  1. 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)

    在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...

  2. 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

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

  3. 60行JavaScript代码俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏   早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...

  4. Javascript 俄罗斯方块 游戏代码解释!

    俄罗斯方块代码说明 /** 名称:Javascript 俄罗斯方块! 作者:Gloot 邮箱:glootz@gmail.com QQ:345268267 网站:http://www.cnblogs.c ...

  5. 60行以内写mvc

    标题党.几天前看到一个30行写mvc的文章,东施效颦,也动手写了个60行的,功能上略微扩充一些,记录下来,后面有时间可以继续优化. mvc其实是一个观察者模式.view来监听model,所以当mode ...

  6. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  7. 65行 JavaScript 代码实现 Flappy Bird 游戏

    飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...

  8. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  9. 9 行 javascript 代码获取 QQ 群成员

    昨天看到一条微博:「22 行 JavaScript 代码实现 QQ 群成员提取器」. 本着好奇心点击进去,发现没有达到效果,一是 QQ 版本升级了,二是博客里面的代码也有些繁琐. 于是自己试着写了一个 ...

随机推荐

  1. 网上找到的一个jquery版网页换肤特效

    这个跟我之前在锋利的JQuery那本书里看到的那个一模一样. <!DOCTYPE html> <html> <head> <meta name="& ...

  2. Install marvel and head plugin for ealsticsearch

    安装ES插件 marvel marvel是ES的供开发者免费使用的管理工具,他内置了一款叫做Sense的控制台,Sense是运行在浏览器中的,基于Sense可以很方便的和ES进行通讯.官方文档中的很多 ...

  3. [转] DBCP 的validationQuery

    原文地址:http://blog.csdn.net/fgakjfd/article/details/5600462 网上很多评论说DBCP有很多BUG,但是都没有指明是什么BUG,只有一部分人说数据库 ...

  4. [转]响应式WEB设计学习(2)—视频能够做成响应式吗

    原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...

  5. 51nod 1163贪心

    用优先队列来贪心,是一个很好地想法.优先队列在很多时候可以维护最值,同时可以考虑到一些其他情况. http://www.51nod.com/onlineJudge/questionCode.html# ...

  6. css 小三角

    span{ display: inline-block; border-top: 100px solid red; border-right: 100px solid transparent; bor ...

  7. mssql-异常value '0000-00-00' can not be represented as java.sql.Date

    Mysql开发中采用ResultSet取值時,不管是才用getString()还是用getDate(),或者getObject,均会拋出如题所述异常.查阅Mysql官方Bug咨询: 是因为日期型(Da ...

  8. 【收藏】Android屏幕适配全攻略(最权威的Google官方适配指导)

    来源:http://blog.csdn.net/zhaokaiqiang1992 更多:Android AutoLayout全新的适配方式, 堪称适配终结者 Android的屏幕适配一直以来都在折磨着 ...

  9. 【CCCC天梯赛决赛】

    cccc的天梯赛决赛,水题一样的水,中档题以上的还是没做出来.补了一下题,觉得其实也不是很难,主要是练的少. L2-1:红色预警 并查集 我做的时候想不到并查集,想到了也不一定做的出来,都是其实不难. ...

  10. Nodejs系列-01-开篇

    1.解决什么问题 1. 并发连接 举个例子,想象一个场景,我们在银行排队办理业务,我们看看下面两个模型. (1)系统线程模型: 这种模型的问题显而易见,服务端只有一个线程,并发请求(用户)到达只能处理 ...