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替代copy(示例代码)
Nov 27 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
js模块加载方式浅析
Aug 12 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python绘制直线的方法
2018/06/30 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python提取xml里面的链接源码详解
2019/10/15 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
教师评语大全
2014/04/28 职场文书
大学活动总结模板
2014/07/10 职场文书
答谢词范文
2015/01/05 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android