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 设计模式学习 Singleton
Jul 27 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
java直接调用python脚本的例子
2014/02/16 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python实现windows下文件备份脚本
2018/05/27 Python
python 文件查找及内容匹配方法
2018/10/25 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
财务简历的自我评价
2014/03/05 职场文书
物理学专业求职信
2014/07/04 职场文书
年终晚会活动方案
2014/08/21 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
交通安全月活动总结
2015/05/08 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
党员干部学习心得体会
2016/01/23 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Python 视频画质增强
2022/04/28 Python