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获取url参数的使用扩展实例
Dec 29 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 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 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python爬虫爬取网页表格数据
2018/03/07 Python
详解Django中间件执行顺序
2018/07/16 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python实现视频压缩功能
2020/12/18 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
小学教师管理制度
2014/01/18 职场文书
指导教师评语
2014/04/26 职场文书
2015年新教师工作总结
2015/04/28 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python