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 相关文章推荐
jquery中实现标签切换效果的代码
Mar 01 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
获取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中使用Oracle数据库(1)
2006/10/09 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Django models文件模型变更错误解决
2020/05/11 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
幼教个人求职信范文
2013/12/02 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
任命书模板
2014/06/04 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python