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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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代码优化及php相关问题总结
2006/10/09 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
PHP安全配置详细说明
2011/09/26 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php实现删除空目录的方法
2015/03/16 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python2 与 python3 实现共存的方法
2018/07/12 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
2014年调度员工作总结
2014/11/19 职场文书
玄武湖导游词
2015/02/05 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
人代会简报
2015/07/21 职场文书
大学军训心得体会800字
2016/01/11 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS