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 内存回收机制理解
Jan 17 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JS删除数组指定值常用方法详解
Jun 04 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 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下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
js加解密 脚本解密
2008/02/22 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python实现可变变量名方法详解
2019/07/01 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
优秀学生事迹材料
2014/02/08 职场文书
《日月潭》教学反思
2014/02/28 职场文书
高二语文教学反思
2016/02/16 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书