<%@ 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. Redis在windows下的安装使用

    下载的windows版本是redis-2.0.2,解压到D盘下: D:\redis-2.0.2 启动Redis服务(conf文件指定配置文件,若不指定则默认): D:\redis-2.0.2>r ...

  2. css设置移动端checkbox和radio样式

    复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...

  3. [MetroUI-1]无边框模式

    Wpf中取消边框,使用 WindowStyle="None" AllowsTransparency="True"

  4. .net 的 Url 中文加密

    当 Get 的请求参数可能出现中文的时候,那么就需要对其中文进行加密处理: 引用程序集:System.Web 加密方法: HttpUtility.UrlEncode(); 解密方法:HttpUtili ...

  5. javascript模拟jQuery封装委托事件，兼容IE

    var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...

  6. android之进度条组件ProgressBar

    首先是main.xml文件 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  7. 20145334 第五次 java 实验报告

    实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 我和20145306张文锦组队编程 http://www.cnblogs.com/besti145306/ ...

  8. 使用 JavaScript 实现链表

    代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. centos安装配置amoeba以及测试

    一.amoeba介绍网址:http://docs.hexnova.com/amoeba/ 二.安装java se1.5 三.安装amoeba2.2.01.下载地址:http://sourceforge ...

  10. PHP检测移动设备类mobile detection使用实例

    目前,一个网站有多个版本是很正常的,如PC版,3G版,移动版等等.根据不同的浏览设备我们需要定向到不同的版本中.不仅如此,我们有时候还需要根据不同的客户端加载不同的CSS,因此我们需要能够检测浏览设备 ...