<%@ 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. CentOS 6.7安装Mysql 5.7

    Step1: 检测系统是否自带安装mysql # yum list installed | grep mysql Step2: 删除系统自带的mysql及其依赖命令: # yum -y remove ...

  2. C# Double保留小数点后面位数

    C# Double保留小数点后面位数 有的时候我们要对一些数据进行百分比的操作.一般的数据我们只要用 .ToString("P")就可以得到小数点后2位的百分比.而且是自动 加上% ...

  3. 手机访问pc网站自动跳转手机端网站代码

    <SCRIPT LANGUAGE="JavaScript">function mobile_device_detect(url){        var thisOS= ...

  4. 怎么控制表单placeholder属性的样式兼容各大浏览器？

    当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...

  5. FineUi导出时禁用ajax即EnableAjax="false"出现问题的解决方法

    fineui导出时会出现乱码, 在按钮上添加EnableAjax="false"属性禁用ajax就可以正常导出.但如果我在后台代码中直接return 而不进行导出流操作,则前台脚本 ...

  6. ngrok访问外网

    1. 外网映射工具介绍 windows用户: 1,下载windows版本的客户端,解压到你喜欢的目录2,在命令行下进入到path/to/windows_386/下3,执行 ngrok -config= ...

  7. 关于c++风格 code style

    Header files should be self-contained. All header files should have #define guards to prevent multip ...

  8. Jquery 在页面加载后执行的几种方式

    1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document) ...

  9. 《UML大战需求分析》阅读笔记02

    软件应能真正的对客户的工作提供帮助,只有客户使用并真正对其有用才能说我们做的软件成功了.客户从开始提出需求时到后期的工作过程中,需求总是不停变化的,所以这就需要需求人员对需求领先于客户.所以活用UML ...

  10. INSTRUCTION CYCLE

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION • Fetch: Read the nex ...