HTML+JS版本的俄罗斯方块
<!doctype html><html><head></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 domain="www_zuidaima_com";
var author="zuidaima";
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>
HTML+JS版本的俄罗斯方块的更多相关文章
- JS/Jquery版本的俄罗斯方块(附源码分析)
转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- [Effective JavaScript笔记]第1条:了解使用的js版本
1997年 正式成为国际标准,官方名称为ECMAScript. 1999年 定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年 发布第5版即ES5,引入了一些新特性,标准 ...
- JS版本网站资源状态检测
Title:JS版本网站资源状态检测 --2012-08-28 14:08 前几天需要一个网站状态检测的东东,后面写了个蹩脚的JS版本,里面用到了以前没用过的东西,在这里记下来,其实批处理加curl ...
- js实现的文章输入检查与测速。(纯js版本)
朋友又提出一些需求.希望不要jquery .于是修改成js版本. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Mac下nvm管理node.js版本问题
本篇文章主要是针对已经安装了node.js和nvm管理工具小伙伴遇到的问题. 管理工具有两个,一个是nvm,还有一个是nnvm的好处就是可以管理多个node版本,而且可以切换想要的版本,可以安装一个稳 ...
- 限定项目的 Node.js 版本
限定项目运行所需的 Node.js 版本可保证项目在一个稳定可预期的环境中运行,减少不必要的故障.甚至有些依赖库只能工作于某些版本下.同时,不加以限制的话,在多人合作的项目中恐怕会引起环境不一致带来的 ...
- 移动一根火柴使等式成立js版本(递归)
修改成递归版本 思路: 1.设定规则数组,比如:1加一根火柴只可以变成7. 2.设定方法数组,比如:一个数增加了一根火柴,其他的数必然减少一根火柴. 3.增加Array方法,由元素名和方法,得到规则对 ...
- 判断一个字符串同时出现几个字符的C#版本和JS版本
C#版本,参考:http://www.cnblogs.com/dudu/p/3841256.html JS版本是我群友写的: var str="abcdef"; var arr=[ ...
随机推荐
- asp.net mvc 两级分类联动方法示例
前台视图代码 <%:Html.DropDownList("AwardClassMainID","请选择")%> <%:Html.DropDow ...
- docker rancher 负载均衡做路由跳转
介绍 我们要实现的目的是 根据负载均衡 跳转到指定的应用容器中 负载均衡中配置好 跳转的地址 当执行URL 请求的时候会自动跳转 测试方法 curl -v --header 'Host:mu.03in ...
- Java泛型方法定义及泛型类型推断
泛型的推断 @Test public void test3(){ //类型推断时使用两个类型的最小公倍数 int x1 = add(3,4); Number x2 = add(3.5,4); Obje ...
- CocoaPods 原理分享及遇到的问题改进
cocoapods 原理分享及问题阐述 cocoapods 管理私有工程,需要两个git 仓库, repo 仓库,保存podspec 文件,告诉我们项目从哪来, 项目 仓库,保存工程文件,告诉我们引用 ...
- Node.js + Express + Mongodb 开发搭建个人网站(三)
三.后台架构 1.在根目录下(和 views 文件夹同级)创建 lib 文件夹 以后所有后端内容 都是在这里写,分别创建三个文件夹 到 lib 目录下: mongo 放的是数据的存储 module ...
- PHP 数组转字符串,与字符串转数组
implode 使用一个字符串将数组变成字符串 <?php $array = array('lastname', 'email', 'phone'); $comma_separated = im ...
- H TML5 之 (4) 小项目一 时钟
这里做一个HTML5 入门的练手,一个小时钟项目,可以再上面拓展很多,程序员培养的就是思想 <!DOCTYPE HTML> <html> <head> <ti ...
- java 基本知识点学习
1 基本数据类型 整型4种:byte 1个字节:short 2个字节:int 4个字节:long 8个字节. 浮点型:float 4个字节;double 8个字节: 布尔型:boolean tru ...
- mvc 路由 使用
url 特性路由: 特性路由可以在 controller和action里面自定义路由规则 这种方式比较灵活 缺点就是不能很好的统一管理url 注册特性路由: public static void ...
- Quarzt.NET的Cron表达式理解
网上关于Quarzt.NET的Cron表达式介绍有很多,但都是基本的语法,稍微深入一些的就没有了. 基本语法介绍请参看: http://www.cnblogs.com/lzrabbit/archive ...