<%@ 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. Golang redigo hmset hset 问题

    最近公司项目,换到了golang 下面来开发,遇到了redis存储链表的问题,困扰了我好几天,后面静下心来,好好读了一下源码,发现官方的例子,最终还是羊毛出在羊身上 c, err := dial() ...

  2. linux系统中errno与error对照表

    1.使用了一个小程序输出所有的errno对应的error字符串,代码如下 #include <errno.h> void showError(int err){ printf(" ...

  3. 创建和使用动态链接库 (C++)

    创建和使用动态链接库 (C++) 转载:http://msdn.microsoft.com/zh-cn/library/ms235636.aspx 此分步演练演示如何创建用于 C++ 应用的动态链接库 ...

  4. XML 参考：XML基础 XML 简介

    XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...

  5. asp.net 网站开发流程总结

    由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网 ...

  6. 1021上课演练----SQL注入与避免（银行系统）

    package com.bank; import java.sql.CallableStatement; import java.sql.Connection; import java.sql.Dat ...

  7. hdu Hike on a Graph

    此题是道bfs搜索的题目.bfs的精髓就是找到下一步的所有可能然后存储起来,有点暴力的感觉,这题就是每步中 所有的可能都入队,然后一一 判断.这道题的题意是 : 给你一幅完全图,再给你三个盘,目的是把 ...

  8. Spring.Net 配置文件

    方法一. 直接在程序配置文件中配置 <configuration> <configSections> <sectionGroup name="spring&qu ...

  9. 一些变态的PHP一句话后门收集

    这类后门让网站.服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的.今天我们细数一些有意思的PHP一句话木马. 利用404页面隐藏PHP小马 ...

  10. IOS第一天多线程-04GCD通信

    **** #define HMGlobalQueue dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0) #define HMM ...