<%@ 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. Let It Be - The Beatles - Lyrics

    轉載自 https://www.youtube.com/watch?v=0714IbwC3HA When I find myself in times of trouble, Mother Mary ...

  2. IE6下div层被select控件遮住的问题解决方法

    Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...

  3. Qt 控件随窗口缩放

    在Qt的界面设计中,我们有时候希望窗口在最大化的时候,上面的控件也跟着缩放,那么我们就需要调整控件的SizePolicy属性,关于这个属性的讲解请参见我之前的博客Qt SizePolicy 属性,由于 ...

  4. u盘安装windows系统

    使用老毛桃为例: 电脑下载老毛桃到自己电脑,插入U盘,制作U盘为启动盘. 四种安装方法: 1.win7能够使用:(win中包含iso的解压文件)解压ISO ----〉 restart win7 --- ...

  5. scroll、offset和client的区别

    整体布局: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/ ...

  6. ArcGIS Javascript 异常之No 'Access-Control-Allow-Origin' header

    本文只描述现象与处理措施,不讨论原理. 开发过程中遇到此异常,查询后网上说是跨域访问的问题,给出的解决方案是通过JQuery的跨域访问机制来解决, 难道我需要直接找ArcGISTiledMapServ ...

  7. bootstrap input框清空

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...

  8. CMS .NET 程序框架 从2.0/3.5升级到4.0 版本后 需要调整的地方

    问题一: document.forms1.action 不可使用 需要修改程 document.forms[0] .NET 程序框架 从2.0/3.5升级到4.0 版本后,document.forms ...

  9. IOS第15天(2,事件处理hitTest练习）

    ***hitTest 获取最合适的点 @implementation HMGreenView - (void)touchesBegan:(NSSet *)touches withEvent:(UIEv ...

  10. Python的正则表达式笔记

    1. "先抓大再抓小": 遇到一个正则表达式无法一次性筛选出所需内容时, 可以先在一个范围内筛选第一次, 再在小范围中筛选第二次. 2. pattern = re.compile( ...