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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js实现购物车功能
Jun 12 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
深入解析php之apc
2013/05/15 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
python实现感知器
2017/12/19 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
法律专业自我鉴定
2013/10/03 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
小学门卫岗位职责
2013/12/17 职场文书
医学生自我评价
2014/01/27 职场文书
北京大学自荐信范文
2014/01/28 职场文书
见习报告格式要求
2014/11/04 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
MySQL慢查询优化解决问题
2022/03/17 MySQL