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 获取URL参数的插件
Mar 04 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
前端开发基础javaScript的六大作用
Aug 06 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代码(星期六,星期日总和)
2009/11/12 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP多进程简单实例小结
2019/11/09 PHP
jquery实现图片翻页效果
2013/12/23 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python浪漫表白源码
2019/04/05 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
元旦活动感言
2014/03/08 职场文书
《海底世界》教学反思
2014/04/16 职场文书
取保候审保证书
2014/04/30 职场文书
规范化管理年活动总结
2014/08/29 职场文书
辞职信格式模板
2015/02/27 职场文书