<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

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

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

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

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

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

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

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

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

  4. javascript俄罗斯方块游戏

    在线试玩:http://keleyi.com/game/5/ 操作指南:键盘方向键←→控制左右移动,↑键变形,↓键快速下落. 别看这段js代码只有短短的100多行,效果却非常不错,用键盘的方向键操作, ...

  5. 60行JavaScript俄罗斯方块

    <!doctype html><html><head></head><body> <div id="box" st ...

  6. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  7. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  8. Js_图片切换左右点击

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. JAVASCRIPT实现网页版：俄罗斯方块

    HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码 ...

随机推荐

  1. MongoDB数据库的简介及安装

    一.MongoDB数据库简介 简介 MongoDB是一个高性能,开源,无模式的,基于分布式文件存储的文档型数据库,由C++语言编写,其名称来源取自“humongous”,是一种开源的文档数据库──No ...

  2. 处理海量数据的高级排序之——堆排序（C++）

    在面对大数据量的排序时(100W以上量级数据),通常用以下三种的排序方法效率最高O(nlogn):快速排序.归并排序,堆排序.在这个量级上,其他冒泡,选择,插入等简单排序已经无法胜任,效率极低,跟前面 ...

  3. [zt]java synchronized详解

    作者:GangWang 出处:http://www.cnblogs.com/GnagWang/ 记下来,很重要. Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多 ...

  4. 重命名PDF打印文件名

    Odoo系统默认打印出来的PDF文件都是以当前文档模型对象对应的模板文件名命名的,对用户来说,这样的命名很不友好. 我们希望能够将打印出来的文件名以单号命名,下面是实现这种目的的方法. 在report ...

  5. PHP filesystem attack vectors - Take Two

    http://www.ush.it/2009/07/26/php-filesystem-attack-vectors-take-two/ Did you enjoyed our previous &q ...

  6. asp.Net2.0中TextBox设置只读后后台获取不到值的解决方法

    http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html   ASP.NET中TextBox控件设置ReadOnly="tru ...

  7. javascript中字符串的常用方法

    <script type="text/javascript"> String substring(start,end): slice(start,end); 这两个函数 ...

  8. jquery_DOM操作

    DOM操作:DOM Core(核心),HTML_DOM,CSS_DOM CSS_DOM操作: css()获取或添加样式 opacity()透明设置 height()高度值 width()宽度 offs ...

  9. jquery 温故而知新 Ul 相关的操作

    在UL中取得第一级的LI   <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2< ...

  10. svn文件批量清除

    svn文件批量清除 http://files.cnblogs.com/files/douxuyao/clearsvn.rar