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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 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/10 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
浅析JS中回调函数及用法
2018/07/25 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
python简单的函数定义和用法实例
2015/05/07 Python
Python OS模块常用函数说明
2015/05/23 Python
python如何获取服务器硬件信息
2017/05/11 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
社团活动总结范文
2014/04/26 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
把77A收信机改造成收音机
2022/04/05 无线电
Oracle 多表查询基本语法实例
2022/04/18 Oracle
MySQL深分页问题解决思路
2022/12/24 MySQL