js实现俄罗斯方块小游戏分享


Posted in Javascript onJanuary 31, 2014
<!doctype html><html><head><style type="text/css">
body { background:#000; font:25px/25px 宋体;}
#box { float:left;width:252px;border:#999 20px ridge;color:#9f9;text-shadow:2px 3px 1px #0f0; }
#info { float:left;color:#cfc;padding:24px; }
#next { padding:8px;width:105px;color:#9f9;text-shadow:2px 3px 1px #0f0; }
</style></head><body>
<div id="box"></div><div id="info">NEXT:<div id="next"></div><div id="text"></div></div>
<script type="text/javascript">
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 char={x:"\u3000",s:"\u25a0",t:"\u25a1"};
var keycom={"38":"rotate(1)","40":"down()","37":"move(2,1)","39":"move(0.5,-1)","32":"0;pause=!pause"};
var dia, pos, bak, run, next, pause=false, info={speed:1,lines:0,score:0};
function start(){
    dia=next.d;
    bak=pos={fk:[],y:0,x:4,s:next.s};
    nextdia();
    document.getElementById("next").innerHTML=(next.d[next.s%next.d.length]|0x10000).toString(2).slice(-16).replace(/..../g,"$&<br/>").replace(/1/g,char.t).replace(/0/g,char.x);
    document.getElementById("text").innerHTML="SCORE:"+info.score+"<br/><br/>LINES:"+info.lines+"<br/><br/>SPEED:"+info.speed;
    rotate(0);
    run=setInterval("pause||down()",~~(Math.pow(1.3,12-info.speed)*30+20));
}
function over(){
    document.onkeydown=null;
    alert("GAME OVER");
}
function nextdia(){
    next={d:tatris[~~(Math.random()*7)],s:~~(Math.random()*4)};
}
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,char.t)))
            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,char.s).replace(/0/g,char.x);
}
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, r=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);
                ++info.lines%20==0 && info.speed++, r++;
            }
        clearInterval(run);
        if(map[1]!=0x801) return over();
        info.score+=~~(Math.pow(r,1.5)*10)+2;
        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("pause||"+keycom[(e?e:event).keyCode]);
};
nextdia();
start();
</script></body></html>
Javascript 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JavaScript 原型继承
Dec 26 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 #Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 #Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 #Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 #Javascript
js跳转页面方法总结
Jan 29 #Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 #Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 #Javascript
You might like
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python线程池如何使用
2020/05/28 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
C语言笔试题
2014/09/04 面试题
函授大专自我鉴定
2013/11/01 职场文书
运动会跳远广播稿
2014/02/04 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年团支部工作总结
2015/04/03 职场文书
党小组推荐意见
2015/06/02 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技