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直接编辑当前cookie的脚本
Sep 14 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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输出xml必须header的解决方法
2014/10/17 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
js中this对象用法分析
2018/01/05 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Python中实现的RC4算法
2015/02/14 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python比较两个图片相似度的方法
2015/03/13 Python
Python读写ini文件的方法
2015/05/28 Python
python django事务transaction源码分析详解
2017/03/17 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
最新pycharm安装教程
2020/11/18 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
自荐信包含哪些内容
2013/10/30 职场文书
毕业晚会主持词
2014/03/24 职场文书
校园环保建议书
2014/05/14 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers