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选择器 $实现原理
Dec 02 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
vue实现循环切换动画
2018/10/17 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
深入浅析Python的类
2018/06/22 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
实习公司领导推荐函
2014/05/21 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
务虚会发言材料
2014/12/25 职场文书
婚庆答谢词
2015/01/04 职场文书
整改通知书
2015/04/20 职场文书
倡议书的格式写法
2015/04/28 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server