JavaScript版俄罗斯方块Easy Tetris实现原理
2009-06-22 12:33
281 查看
URL:http://topic.csdn.net/u/20090622/09/4BD25AFF-91AF-4E1B-9D96-625FED3C1898.html
Easy Tetris实现核心部分
下一个方块
原型为一个4*4的表格加上方块展示方法，可以通过分别继承两个类（表格类，方块类），加上自身的next方法，来实现。
游戏区域
原型为一个12*20的表格，由于考虑到算法优化，直接设置为（4+12+4）*（4+20+4）的表格，该表格同时具有一个与表格中格子数相同的二维数组，用作方块的边界检测
游戏填色区域
原型为一个12*20的表格，由于考虑到算法优化，直接设置为（4+12+4）*（4+20+4）的表格，方块停止下落后，在对应的行和列中填上与下落方块相同的颜色。
当在“游戏区域”的二维数组中检测到行被填满，则删除填色区域相应的行，同时，在首行前插入相应数量的新行。
游戏方块
原型为一个4*4的表格加上方块展示方法，可以通过分别继承两个类（表格类，方块类）并且加上自身的一些方法来实现，此组件为俄罗斯方块中的重要组件，在Easy Tetris的实现中，该组件担当了大部分的游戏任务，移动，变形，边界检测等等，游戏中多数的方法都被安排在此组件上实现。
方块形状及变形
方块及形状的实现可以通过一个4*4的二维数组来实现，比如方块Z，我们可以写为：
[
[1,1,0,0]
[0,1,1,0]
[0,0,0,0]
[0,0,0,0]
]
1，表示这个位置是一个方块，0表示什么都没有，是不是很简单？由于这种写法会造成数据量的增大，我们可以将此数据形式压缩为16进制形式，还是以Z为例。
1100011000000000 -> 转为16进制 -> 0xc600，于是上面的数组可以简写为：
[0xc600]
数据量大大缩减，然后在程序中需要有一个反转的过程，将此16进制数据转换到2进制数据，需要注意的是，你可能会发现一些16进制的数据转换到2进制后不够如上面数组中的16个元素，你需要在转换后的2进制数据前补足相应个数的 0。
变形部分相对简单，如，Z的变形为：
[
[0,0,1,0]
[0,1,1,0]
[0,1,0,0]
[0,0,0,0]
]
只要将此形状同时保存到方块数组中即可，由于所有方块中，最多变形次数为4次，所以，所有方块都4个一组的来表示，每一个维度表示每一次形变后的形状，在变形方法中只要通过这个索引值来进行递增即可获得下一次形变的样子，然后重新渲染出来即可。
投影部分
需要一个和方块部分一一对应的数组，记录每个方块的投影区域，还是以Z为例，它可以表示为：
[1,1,1,0,1,1,0,0]
前4位 1,1,1,0 表示，在一个4列的格子中，Z，前面3个格子是要进行投影的
后4位 1,1,0,0 表示，投影跟随下落方块的时候，Y坐标在下落方块下面第1个位置（1的个数-1）
投影部分除了需要一个对应的数据外，还需要一个DOM元素进行表示，很简单，就是一个1*4的表格，它需要在下落方块移动、变形的时候做相应的处理。
边界检测
边界检测应该是俄罗斯方块中最重要的算法部分了。在Easy Tetris中采用的是“位与”判断的方法进行处理，即，将下落的方块4*4个区域与即将落在的游戏区域中相应的4*4个区域进行“位与”比较，如果返回0，则说明可以移动，否则，不能移动。
下落的方块每调用一次“移动”的方法之前，都要进行边界检测；
下落的方块每调用一次“变形“的方法之前，也要进行边界检测；
所以，如果你能够足够的优化移动、变形、边界检测这三部分的算法，那么你的俄罗斯方块将会给玩家一个非常高的控制灵敏度，从而大大提高可玩性！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<title>Easy Tetris JavaScript俄罗斯方块 - P 暂停, F2 新游戏, F4 开启投影, 空格 直接坠落,上箭头 变形, 左右箭头 左右移动, 下箭头 快速下落</title>
<meta name="robots" content="all" />
<meta name="author" content="dh20156@126.com,风之石" />
<meta name="Copyright" content="dh20156风之石" />
<meta name="keywords" content="easyui,api,javascript,dhtml,web前端,developer,代码库" />
<meta name="description" content="Easy Tetris JavaScript俄罗斯方块 - WEB前端DHTML精英俱乐部dh20156风之石写的WEB版俄罗斯方块游戏." />
<link rel="stylesheet" type="text/css" href="http://www.v-ec.com/ijc/v.css" media="all" />
<style type="text/css">
.tetris{width:460px;overflow:hidden;background:#333 url(images/bg_tetris.png) 95px 190px no-repeat;}
.tetris td{font-size:12px;width:16px;height:16px;}
.tetris td.borderbox{background:#525252 url(images/box.png) -112px 0 no-repeat;}
.tetris .hd{width:100px;float:right;}
.tetris .hd select,.tetris .hd button{width:80px;}
.tetris .hd button{background:#515151;border:2px solid #7A7A7A;color:#fff;margin:2px 0;}
#playerlist,#playerlist li{list-style:type;list-style-type:decimal;}
#playerlist{padding-left:30px;padding-right:2px;background:#497AEF;border:1px solid #2E79B6;}
#playerlist li{color:#fff;background:#182859;margin:2px 0;padding:2px 5px;border:1px inset;font-family:宋体;}
</style>
</head>
<body>
<div id="header">
<div class="page">
<h1 class="logo"><a href="http://www.easyui.org.cn" title="EasyUI官方网站"><img src="http://www.v-ec.com/ijc/easyui_logo.png" alt="EasyUI官方网站" /></a></h1>
<ul class="nav">
<li><a href="http://www.v-ec.com"><strong>V-EC</strong></a></li>
<li><a href="http://www.w3cgroup.com"><strong>W3C Group</strong></a></li>
<li><a href="http://www.jslab.org.cn"><strong>JSLab</strong></a></li>
</ul>
</div>
</div>
<div class="page">
<ul class="crumbs">
<li>Easy Tetris JavaScript 俄罗斯方块 - <strong>P</strong> 暂停, <strong>F2</strong> 新游戏, <strong>F4</strong> 开启投影, <strong>Space空格</strong> 直接坠落,<strong>↑上箭头</strong> 变形, <strong>←→左右箭头</strong> 左右移动, <strong>↓下箭头</strong> 快速下落</li>
</ul>
<div class="article">
<div class="main">
<div class="tetris" id="ga"><div class="hd"></div><div class="bd">游戏区域</div></div>
</div>
<div class="side">
<div class="panel">
<h4><strong>EasyTeTris游戏积分榜</strong></h4>
<p>积分榜上榜底线分数为2000分 ^_^</p>
<ul id="playerlist"></ul>
</div>
<div class="panel" id="gamehelp">
<h4><strong>EasyTeTris游戏说明</strong></h4>
<p><strong>[F2]</strong></p>
<p>New Game 新游戏</p>
<p><strong>[F4]</strong></p>
<p>Use Shadow 开启投影</p>
<p><strong>[Space(空格)]</strong></p>
<p>Direct down 直接坠落</p>
<p><strong>[↑(上箭头)]</strong></p>
<p>Transform 变形</p>
<p><strong>[←→(左右箭头)]</strong></p>
<p>Move to left or right 左右移动</p>
<p><strong>[↓(下箭头)]</strong></p>
<p>Fast down 快速下落</p>
</div>
</div>
</div>
<div class="pageinfo" id="pinfo">
<p class="modtime">当前页面于2009年6月20日由<a class="user" href="http://www.v-ec.com/dh20156/">dh20156</a>编辑过</p>
<h4 class="htags"><strong>标签：</strong></h4>
<p class="ptags">
<a href="http://www.easyui.org.cn">Easy UI</a><span>|</span>
<a href="http://www.v-ec.com">V-EC</a><span>|</span>
<a href="http://www.w3cgroup.com">W3C GROUP</a><span>|</span>
<a href="http://www.jslab.org.cn">JSLab</a>
</p>
</div>
</div>
<div id="footer">
<div class="page">
<p class="copyright">
Copyright © 2003-2009 V-EC.com W3CGroup.com EasyUI.org.cn JSLab.org.cn All Rights Reserved
</p>
<ul class="safe">
<li>
<a href="http://www.miibeian.gov.cn" target="_blank"><img src="http://www.v-ec.com/ijc/safe_01.gif" alt="粤ICP备05024647号" title="粤ICP备05024647号" /></a>
<p><a href="http://www.miibeian.gov.cn" title="粤ICP备05024647号" target="_blank">粤ICP备05024647号</a></p>
</li>
<li>
<a href="http://www.xiamen.cyberpolice.cn/" target="_blank"><img src="http://www.v-ec.com/ijc/safe_02.gif" alt="厦门网络警察--网上有害信息报警" title="厦门网络警察--网上有害信息报警" /></a>
<p><a href="http://www.xiamen.cyberpolice.cn/" title="厦门网络警察--网上有害信息报警" target="_blank">厦门网络警察报警平台</a></p>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var easyUI={ajax:{tryList:function(){var xhr=null;for(var i=0;i<arguments.length;i++){var lambda=arguments[i];try{xhr=lambda();}catch(e){}if(xhr){break;}}return xhr;},init:function(){return this.tryList(function(){try{return new ActiveXObject('MSXML2.XMLHttp.6.0');}catch(e){}},function(){try{return new ActiveXObject('MSXML2.XMLHttp.3.0');}catch(e){}},function(){try{return new XMLHttpRequest();}catch(e){}},function(){try{return new ActiveXObject('MSXML2.XMLHttp.5.0');}catch(e){}},function(){try{return new ActiveXObject('MSXML2.XMLHttp.4.0');}catch(e){}},function(){try{return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}},function(){try{return new ActiveXObject('MSXML.XMLHttp');}catch(e){}},function(){try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}})||null;},post:function(sUrl,sArgs,bAsync,fCallBack,fFailure){var xhr=this.init();if(!xhr){alert('XmlHttp对象未就绪！');return;}xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){if(fCallBack&&fCallBack.constructor==Function){fCallBack(xhr);}}else{if(fFailure&&fFailure.constructor==Function){fFailure(xhr);}else{alert('服务器错误：'+xhr.status);}xhr=null;}}};xhr.open('POST',encodeURI(sUrl),bAsync);xhr.setRequestHeader('Content-Length',sArgs.length);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(sArgs);},get:function(sUrl,bAsync,fCallBack,fFailure){var xhr=this.init();if(!xhr){alert('XmlHttp对象未就绪！');return;}xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){if(fCallBack&&fCallBack.constructor==Function){fCallBack(xhr);}}else{if(fFailure&&fFailure.constructor==Function){fFailure(xhr);}else{alert('服务器错误：'+xhr.status);}xhr=null;}}};xhr.open('GET',encodeURI(sUrl),bAsync);xhr.send('Null');},xRequest:function(id,url){oScript=document.getElementById(id);var head=document.getElementsByTagName("head").item(0);if(oScript){head.removeChild(oScript);}oScript=document.createElement("script");oScript.setAttribute("src",url);oScript.setAttribute("id",id);oScript.setAttribute("type","text/javascript");oScript.setAttribute("language","javascript");head.appendChild(oScript);return oScript;}},getArgs:function(){var sarg=document.location.search.substr(1),rv={};rv.filename=document.location.pathname.replace(/.*///ig,'');if(!sarg){return rv;}var aarg=sarg.split('&'),atmp=[];for(var i=0;i<aarg.length;i++){atmp=aarg[i].split('=');rv[atmp[0]]=atmp[1];}return rv;}};
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}
var easyTT = function(){
this.dinfo = null;//游戏信息区域
this.dplayarea = null;//游戏区域
this.dnext = null;//下一块提示
this.showbox = null;//填色表格
this.dplaybox = null;//调皮的方块
this.dshadow = null;//阴影
}
easyTT.prototype = function(){
//形状顺序：O,I,T,L,J,Z,S
var shape = [[0x6600,0x6600,0x6600,0x6600],[0xf000,0x4444,0xf000,0x4444],[0xe400,0x4c40,0x4e00,0x8c80],[0xe800,0xc440,0x2e00,0x88c0],[0xe200,0x44c0,0x8e00,0xc880],[0xc600,0x2640,0xc600,0x2640],[0x6c00,0x4620,0x6c00,0x4620]];
var shadow = [[0x68,0x68,0x68,0x68],[0xf8,0x48,0xf8,0x48],[0xe8,0xcc,0xec,0xcc],[0xe8,0xc8,0xec,0xce],[0xe8,0xce,0xec,0xc8],[0xec,0x6c,0xec,0x6c],[0xec,0x6c,0xec,0x6c]];
var bgurl = 'images/box.png';
var colors = ['#D64A4A url('+bgurl+') 0 0 no-repeat','#BB51D4 url('+bgurl+') -16px 0 no-repeat','#EFCE52 url('+bgurl+') -32px 0 no-repeat','#9BBB49 url('+bgurl+') -48px 0 no-repeat','#41B341 url('+bgurl+') -64px 0 no-repeat','#10BDDE url('+bgurl+') -80px 0 no-repeat','#4A7BEF url('+bgurl+') -96px 0 no-repeat'];
var grid = function(x,y,othstr){//表格类
x = x||1;y = y||1;
var str = '<tr>'+new Array(x+1).join('<td> </td>')+'</tr>';
var stb = '<table cellpadding="0" cellspacing="1" style="border-collapse:separate;border-spacing:1px;">'+new Array(y+1).join(str)+'</table>';
this.innerHTML = stb+(othstr||'');
this.data = new Array(y);
for(var i=0;i<y;i++){this.data[i] = new Array(x+1).join(0).split('');}
};
var oshadow = function(shapeindex,subindex){
if(isNaN(shapeindex)||isNaN(subindex)){return;}
var sshape = shadow[shapeindex][subindex];
var drow = this.childNodes[0].rows[0],bm = sshape.toString(2),aspt = (new Array(9-bm.length).join(0)+bm).match(//d{4}/g);
var martix = aspt[0].split(''),py = aspt[1].match(/1/g).length|0;
for(var i=0;i<4;i++){
drow.cells[i].style.cssText = (parseInt(martix[i],10))?'background-color:#fff;height:1000px;':'background-color:none;height:1000px;';
}
this.py = py?py-1:0;
};
var diamond = function(shapeindex,subindex,colorindex){//方块类
if(isNaN(shapeindex)||isNaN(subindex)||isNaN(colorindex)){return;}
this.shapeindex = shapeindex,this.subindex = subindex,this.colorindex = colorindex;
var sshape = shape[shapeindex][subindex],scolor = colors[colorindex];
var asm = null,drows = this.childNodes[0].rows,ddata = this.data,crow = null,idx = 0,bm = sshape.toString(2),abm = new Array(17-bm.length).join(0)+bm,martix = abm.match(//d{4}/g);
while(martix.length){
asm = martix.shift().split(''),crow = drows[idx],cdata = ddata[idx],idx++;
for(var i=0;i<asm.length;i++){
cdata[i] = asm[i];
crow.cells[i].style.cssText = (parseInt(asm[i],10))?'background:'+scolor:'background:none;';
}
}
};
var nextbox = function(){//下一个方块
this.next = function(){
var lshape = shape.length-1,lcolor = colors.length-1;
var rndshape = Math.round(Math.random()*lshape);
var rndcolor = Math.round(Math.random()*lcolor);
this.style.disply = 'none';
diamond.call(this,rndshape,0,rndcolor);
this.style.display = 'block';
};
};
var stopEvent = function(e){
e = e||window.event;
if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}
if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;e.keyCode = 0;}
};
var playbox = function(){//掉落方块类
var lscore = [100,200,400,800];//消除方块得分列表
var levellist = [0,2000,4000,6000,8000,10000,12000,14000,16000,18000,20000];//级别分数设定
var level = 1;//当前级别
var score = 0;//当前得分
var speed = 1000;//初始速度
this.timer = null;
this.speed = function(){return speed/level|0;};
this.style.position = 'absolute';
this.style.zIndex = "10";
this.style.display = "none";
this.dnext = null;//下一块提示
this.dinfo = null;//游戏信息
this.dshadow = null;//投影
this.pause = true;//暂停
this.shadowon = false;//是否启用投影
this.pdata = null;
this.gameon = false;
this.setlevel = function(l){
if(this.gameon){if(this.pause){alert('游戏中不能更改游戏级别哦！^_^');}else{this.pause = true;window.clearTimeout(this.timer);alert('游戏中不能更改游戏级别哦！^_^');this.pause = false;this.down();}return false;}
level = isNaN(l)?1:l;
this.dinfo.childNodes[1].innerHTML = level;
return true;
};
this.setpause = function(){
if(this.pause){
this.pause = false;this.down();
}else{
this.pause = true;window.clearTimeout(this.timer);
}
};
this.savescore = function(){
if(score<2000){return;}
if(!confirm('成绩不错，要保存您现在的成绩吗？^_^')){return;}
var foosf = function(xhr){
if(!xhr){alert('抱歉，XMLHTTP对象错误 - -!');}
alert(unescape(xhr.responseText));
if(typeof winload == 'function'){winload();}
};
var sname = window.prompt('请输入您的昵称：','');
sname = sname.replace(/,|/s/g,"");
sname = sname.replace(//+/g,'＋').replace(//%/g,'％');
var url = "savescore.asp",args = "playername="+escape(sname)+"&level="+escape(level)+"&score="+escape(score);
easyUI.ajax.post(url, args, true, foosf);
};
this.useshadow = function(){
if(this.dshadow){this.dshadow.style.display = (this.shadowon)?'none':'block';this.shadowon = (this.shadowon)?false:true;}
};
this.over = function(){//游戏结束
window.clearTimeout(this.timer);
this.savescore();
this.gameon = false;
score = 0;
if(confirm('游戏结束！/n/n再来一局？ ^_^')){this.newgame();}
};
this.newgame = function(){//新游戏
document.body.scrollTop = 95;
var pdata = this.parentNode.data,drows = this.parentNode.childNodes[1].childNodes[0].rows;
for(var i=23;i>=4;i--){
for(var m=0;m<20;m++){
if(m>=4&&m<=15){
pdata[i][m] = 0;
drows[i].cells[m].style.background = 'none';
}
}
}
this.gameon = true;
this.pause = false;
this.play();
};
this.play = function(){//开始
if(!this.dnext){return false;}
var dnext = this.dnext,dshadow = this.dshadow;
var shapeindex = dnext.shapeindex,colorindex = dnext.colorindex;
this.style.display = 'none';
diamond.call(this,shapeindex,0,colorindex);
this.x = 8;
this.y = 4;
this.transindex = 0;
this.move(this.x,this.y);
this.style.display = 'block';
dshadow.style.display = 'none';
oshadow.call(dshadow,shapeindex,0);
var pspy = 4+dshadow.py|0,psy = pspy+pspy*16;
dshadow.style.top = psy+'px';
if(this.shadowon){dshadow.style.display = 'block';}
this.timer = window.setTimeout((function(o){return function(){o.down()}})(this),this.speed());
dnext.next();
};
this.check = function(s,x,y){//边界检测
var bnext = true,x2 = x+4,pd = this.pdata,dpd = [],bm = shape[this.shapeindex][s].toString(2),bdt = new Array(17-bm.length).join(0)+bm;
dpd.push(pd[y].slice(x,x2).join(''));
dpd.push(pd[y+1].slice(x,x2).join(''));
dpd.push(pd[y+2].slice(x,x2).join(''));
dpd.push(pd[y+3].slice(x,x2).join(''));
bnext = !(parseInt(bdt,2)&parseInt(dpd.join(''),2));
return bnext;
};
this.move = function(x,y){//移动
var bpause = this.pause,subindex = this.subindex,dshadow = this.dshadow;
if(bpause){return true;}
var bnext = this.check(subindex,x,y);
if(!bnext){return false;}
this.x = x,this.y = y;
var px = x+x*16,py = y+y*16,pspy = y+dshadow.py|0,psy = pspy+pspy*16;
this.style.left = px+'px';
this.style.top = py+'px';
dshadow.style.left = px+'px';
dshadow.style.top = psy+'px';
return true;
};
this.down = function(){//飘落
if(this.pause){return;}
var bnext = this.move(this.x,this.y+1);
if(!bnext){
window.clearTimeout(this.timer);
bnext = this.actiondown();
if(!bnext){return;}
this.play();
return;
}
this.timer = window.setTimeout((function(o){return function(){o.down()}})(this),this.speed());
};
this.ddown = function(){//坠落
if(this.pause){return;}
var bnext = this.move(this.x,this.y+1);
if(!bnext){
window.clearTimeout(this.timer);
bnext = this.actiondown();
if(!bnext){return;}
this.play();
return;
}
if(/msie/i.test(navigator.appVersion)){this.timer = window.setTimeout((function(o){return function(){o.ddown()}})(this),0);}else{this.ddown();}
};
this.actiondown = function(){//落地检测
this.style.display = 'none';
if(this.useshadow){this.dshadow.style.display = 'none';}
var x = this.x,y = this.y,l = 0,pdata = this.pdata,dtb = this.parentNode.childNodes[1].childNodes[0],drows = dtb.rows,fx = 0,fy = 0,scolor = colors[this.colorindex];
for(var i=0;i<4;i++){
for(var n=0;n<4;n++){
fy = y+i,fx = x+n;
if(this.data[i]
==1){pdata[fy][fx] = 1;drows[fy].cells[fx].style.background = scolor;}
}
}
for(i=pdata.length-5;i>=y;i--){
if(eval('0,'+pdata[i].join('&&'))){
pdata.splice(i,1);
pdata.splice(4,0,[1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1]);
dtb.deleteRow(i);
var dcr = drows[0].cloneNode(true);
dtb.childNodes[0].insertBefore(dcr,drows[0]);
i++;l++;
}
}
if(l){
score += lscore[l-1];
if(score>levellist[level]){level++;}
if(this.dinfo){this.dinfo.innerHTML = '<p>级别：</p><p>'+level+'</p><p>得分：</p><p>'+score+'</p>';}
}
if(!l&&y<=4){this.over();return false;}
return true;
};
this.transform = function(){//变形
if(this.pause){return true;}
var sindex = this.shapeindex,tindex = this.subindex,cindex = this.colorindex,dshadow = this.dshadow;
if(tindex+1>3){tindex = 0;}else{tindex++;}
var bnext = this.check(tindex,this.x,this.y);
if(!bnext){return;}
this.subindex = tindex;
diamond.call(this,sindex,tindex,cindex);
oshadow.call(dshadow,sindex,tindex);
var pspy = this.y+dshadow.py|0,psy = pspy+pspy*16;
dshadow.style.top = psy+'px';
};
};
return {
init:function(){//初始化
if(!this.dinfo||!this.dplayarea){return;}
var dinfo = this.dinfo,dplayarea = this.dplayarea;
dinfo.innerHTML = '<div></div><div><p>级别：</p><p>1</p><p>得分：</p><p>0</p></div><div><p><select id="game_ls"></select></p><p><button id="game_btn">开始游戏</button></p><p><button id="clear_btn">清爽页面</button></p></div>';
var dnext = dinfo.childNodes[0];
grid.call(dnext,4,4);
nextbox.call(dnext);
dnext.next();
this.dnext = dnext;
dplayarea.onselectstart = function(){return false;}
grid.call(dplayarea,20,28,'<div></div><div></div><div></div>');
dplayarea.style.cssText = 'position:relative;-moz-user-select:none;overflow:hidden;zoom:1;width:'+(16*20+21)+'px;height:'+(16*28+29)+'px;';
dplayarea.childNodes[0].style.cssText = 'position:absolute;z-index:3;left:0;top:0;border-collapse:separate;border-spacing:1px;';
var dpadata = dplayarea.data,drows = dplayarea.childNodes[0].childNodes[0].rows;
for(var i=0;i<28;i++){
if(i>=4&&i<=23){
for(var m=0;m<20;m++){
if(m>=4&&m<=15){continue;}
dpadata[i][m] = 1;
drows[i].cells[m].className = 'borderbox';
}
}else{
for(var n=0;n<20;n++){
dpadata[i]
= 1;
drows[i].cells
.className = 'borderbox';
}
}
}
var dshowbox = dplayarea.childNodes[1];
dshowbox.style.cssText = 'position:absolute;left:0;top:0;z-index:5;';
grid.call(dshowbox,20,28);
this.dshowbox = dshowbox;
var dshadow = dplayarea.childNodes[2];
grid.call(dshadow,4,1);
dshadow.style.cssText = 'position:absolute;left:0;top:0;z-index:1;-moz-opacity:0.1;opacity:0.1;filter:alpha(opacity=10);';
this.dshadow = dshadow;
var dplaybox = dplayarea.childNodes[3];
grid.call(dplaybox,4,4);
playbox.call(dplaybox);
dplaybox.dnext = dnext;
dplaybox.dshadow = dshadow;
dplaybox.dinfo = dinfo.childNodes[1];
dplaybox.dinfo.style.color = '#fff';
dplaybox.pdata = dpadata;
this.dplaybox = dplaybox;
document.documentElement.onkeydown = function(e){
e = e||window.event;
var ec = e.which||e.keyCode;
switch(ec){
case 37:dplaybox.move(dplaybox.x-1,dplaybox.y);stopEvent(e);break;
case 39:dplaybox.move(dplaybox.x+1,dplaybox.y);stopEvent(e);break;
case 38:dplaybox.transform();stopEvent(e);break;
case 32:window.clearTimeout(dplaybox.timer);dplaybox.ddown();stopEvent(e);break;
case 40:window.clearTimeout(dplaybox.timer);dplaybox.down();stopEvent(e);break;
case 80:dplaybox.setpause();stopEvent(e);break;
case 113:if(confirm('要开始新的游戏吗？ ^_^')){dplaybox.newgame();}stopEvent(e);break;
case 115:dplaybox.useshadow();stopEvent(e);break;
default:break;
}
};
},
start:function(){//开始
this.dplaybox.newgame();
}
};
}();
var da = document.getElementById('ga'),dads = da.childNodes;
var dinfo = dads[0],darea = dads[1];
var gtt = new easyTT();
gtt.dinfo = dinfo;
gtt.dplayarea = darea;
gtt.init();
var dpmodule = [];
dpmodule.push(document.getElementById('header'));
dpmodule.push(document.getElementById('gamehelp'));
dpmodule.push(document.getElementById('pinfo'));
dpmodule.push(document.getElementById('footer'));
var dgmslt = document.getElementById('game_ls'),dgmbtn = document.getElementById('game_btn'),dclrbtn = document.getElementById('clear_btn');
for(var i=0;i<10;i++){
var opt = document.createElement('option'),idx = i+1;
dgmslt.options.add(opt);
opt.value = idx;
opt.text = "玩第"+idx+"级"
}
dgmslt.onchange = function(){gtt.dplaybox.setlevel(this.value);this.blur();};
dgmbtn.onclick = function(){
var str = this.innerHTML;
if(gtt.dplaybox.gameon&&str=='开始游戏'){this.innerHTML = '继续游戏';this.blur();return;}
switch(str){
case '开始游戏':this.innerHTML = '暂停游戏';gtt.start();break;
case '继续游戏':this.innerHTML = '暂停游戏';gtt.dplaybox.setpause();break;
case '暂停游戏':this.innerHTML = '继续游戏';gtt.dplaybox.setpause();break;
default:break;
}
this.blur();
};
dclrbtn.onclick = function(){fooclr(this);this.blur();};
var fooclr = function(obj){
if(obj.innerHTML=='清爽页面'){
obj.innerHTML = '展开页面';
for(var i=0;i<dpmodule.length;i++){
dpmodule[i].style.display = 'none';
}
}else{
obj.innerHTML = '清爽页面';
for(var i=0;i<dpmodule.length;i++){
dpmodule[i].style.display = 'block';
}
}
}
fooclr(dclrbtn);
var Browser={};
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
window.root = null;
window.onload = winload;
window.onunload = function(){window.root = null;};
function winload(){
window.root = null;
var path = "score.xml?temp="+Math.random();
var dltList = document.getElementById("playerlist");
var init = function(xhr){
var root = xhr.responseXML.documentElement;
if(root!=null){
window.root = root;
var nodes = root.childNodes,nnn = '',nnl = '',nnv = '',adata = [];
for(i=0;i<nodes.length;i++){
nnn = nodes[i].nodeName;
if(nnn != "#text" && nnn != "#comment"){
nnl = nodes[i].getAttribute("level"),nnv = nodes[i].childNodes[0].nodeValue;
adata.push([nnn,nnl,nnv]);
}
}
adata.sort(function(a,b){return b[2]-a[2];});
var pstr = [];
dltList.style.display = 'none';
for(i=0;i<adata.length;i++){
if(i>=15){break;}
pstr.push('<li>'+adata[i][0]+','+adata[i][1]+','+adata[i][2]+'</li>');
}
dltList.innerHTML = pstr.join('');
dltList.style.display = 'block';
}
};
easyUI.ajax.get(path,true,init);
}
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3422792-1";
urchinTracker();
</script>
</html>
Easy Tetris实现核心部分
下一个方块
原型为一个4*4的表格加上方块展示方法，可以通过分别继承两个类（表格类，方块类），加上自身的next方法，来实现。
游戏区域
原型为一个12*20的表格，由于考虑到算法优化，直接设置为（4+12+4）*（4+20+4）的表格，该表格同时具有一个与表格中格子数相同的二维数组，用作方块的边界检测
游戏填色区域
原型为一个12*20的表格，由于考虑到算法优化，直接设置为（4+12+4）*（4+20+4）的表格，方块停止下落后，在对应的行和列中填上与下落方块相同的颜色。
当在“游戏区域”的二维数组中检测到行被填满，则删除填色区域相应的行，同时，在首行前插入相应数量的新行。
游戏方块
原型为一个4*4的表格加上方块展示方法，可以通过分别继承两个类（表格类，方块类）并且加上自身的一些方法来实现，此组件为俄罗斯方块中的重要组件，在Easy Tetris的实现中，该组件担当了大部分的游戏任务，移动，变形，边界检测等等，游戏中多数的方法都被安排在此组件上实现。
方块形状及变形
方块及形状的实现可以通过一个4*4的二维数组来实现，比如方块Z，我们可以写为：
[
[1,1,0,0]
[0,1,1,0]
[0,0,0,0]
[0,0,0,0]
]
1，表示这个位置是一个方块，0表示什么都没有，是不是很简单？由于这种写法会造成数据量的增大，我们可以将此数据形式压缩为16进制形式，还是以Z为例。
1100011000000000 -> 转为16进制 -> 0xc600，于是上面的数组可以简写为：
[0xc600]
数据量大大缩减，然后在程序中需要有一个反转的过程，将此16进制数据转换到2进制数据，需要注意的是，你可能会发现一些16进制的数据转换到2进制后不够如上面数组中的16个元素，你需要在转换后的2进制数据前补足相应个数的 0。
变形部分相对简单，如，Z的变形为：
[
[0,0,1,0]
[0,1,1,0]
[0,1,0,0]
[0,0,0,0]
]
只要将此形状同时保存到方块数组中即可，由于所有方块中，最多变形次数为4次，所以，所有方块都4个一组的来表示，每一个维度表示每一次形变后的形状，在变形方法中只要通过这个索引值来进行递增即可获得下一次形变的样子，然后重新渲染出来即可。
投影部分
需要一个和方块部分一一对应的数组，记录每个方块的投影区域，还是以Z为例，它可以表示为：
[1,1,1,0,1,1,0,0]
前4位 1,1,1,0 表示，在一个4列的格子中，Z，前面3个格子是要进行投影的
后4位 1,1,0,0 表示，投影跟随下落方块的时候，Y坐标在下落方块下面第1个位置（1的个数-1）
投影部分除了需要一个对应的数据外，还需要一个DOM元素进行表示，很简单，就是一个1*4的表格，它需要在下落方块移动、变形的时候做相应的处理。
边界检测
边界检测应该是俄罗斯方块中最重要的算法部分了。在Easy Tetris中采用的是“位与”判断的方法进行处理，即，将下落的方块4*4个区域与即将落在的游戏区域中相应的4*4个区域进行“位与”比较，如果返回0，则说明可以移动，否则，不能移动。
下落的方块每调用一次“移动”的方法之前，都要进行边界检测；
下落的方块每调用一次“变形“的方法之前，也要进行边界检测；
所以，如果你能够足够的优化移动、变形、边界检测这三部分的算法，那么你的俄罗斯方块将会给玩家一个非常高的控制灵敏度，从而大大提高可玩性！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<title>Easy Tetris JavaScript俄罗斯方块 - P 暂停, F2 新游戏, F4 开启投影, 空格 直接坠落,上箭头 变形, 左右箭头 左右移动, 下箭头 快速下落</title>
<meta name="robots" content="all" />
<meta name="author" content="dh20156@126.com,风之石" />
<meta name="Copyright" content="dh20156风之石" />
<meta name="keywords" content="easyui,api,javascript,dhtml,web前端,developer,代码库" />
<meta name="description" content="Easy Tetris JavaScript俄罗斯方块 - WEB前端DHTML精英俱乐部dh20156风之石写的WEB版俄罗斯方块游戏." />
<link rel="stylesheet" type="text/css" href="http://www.v-ec.com/ijc/v.css" media="all" />
<style type="text/css">
.tetris{width:460px;overflow:hidden;background:#333 url(images/bg_tetris.png) 95px 190px no-repeat;}
.tetris td{font-size:12px;width:16px;height:16px;}
.tetris td.borderbox{background:#525252 url(images/box.png) -112px 0 no-repeat;}
.tetris .hd{width:100px;float:right;}
.tetris .hd select,.tetris .hd button{width:80px;}
.tetris .hd button{background:#515151;border:2px solid #7A7A7A;color:#fff;margin:2px 0;}
#playerlist,#playerlist li{list-style:type;list-style-type:decimal;}
#playerlist{padding-left:30px;padding-right:2px;background:#497AEF;border:1px solid #2E79B6;}
#playerlist li{color:#fff;background:#182859;margin:2px 0;padding:2px 5px;border:1px inset;font-family:宋体;}
</style>
</head>
<body>
<div id="header">
<div class="page">
<h1 class="logo"><a href="http://www.easyui.org.cn" title="EasyUI官方网站"><img src="http://www.v-ec.com/ijc/easyui_logo.png" alt="EasyUI官方网站" /></a></h1>
<ul class="nav">
<li><a href="http://www.v-ec.com"><strong>V-EC</strong></a></li>
<li><a href="http://www.w3cgroup.com"><strong>W3C Group</strong></a></li>
<li><a href="http://www.jslab.org.cn"><strong>JSLab</strong></a></li>
</ul>
</div>
</div>
<div class="page">
<ul class="crumbs">
<li>Easy Tetris JavaScript 俄罗斯方块 - <strong>P</strong> 暂停, <strong>F2</strong> 新游戏, <strong>F4</strong> 开启投影, <strong>Space空格</strong> 直接坠落,<strong>↑上箭头</strong> 变形, <strong>←→左右箭头</strong> 左右移动, <strong>↓下箭头</strong> 快速下落</li>
</ul>
<div class="article">
<div class="main">
<div class="tetris" id="ga"><div class="hd"></div><div class="bd">游戏区域</div></div>
</div>
<div class="side">
<div class="panel">
<h4><strong>EasyTeTris游戏积分榜</strong></h4>
<p>积分榜上榜底线分数为2000分 ^_^</p>
<ul id="playerlist"></ul>
</div>
<div class="panel" id="gamehelp">
<h4><strong>EasyTeTris游戏说明</strong></h4>
<p><strong>[F2]</strong></p>
<p>New Game 新游戏</p>
<p><strong>[F4]</strong></p>
<p>Use Shadow 开启投影</p>
<p><strong>[Space(空格)]</strong></p>
<p>Direct down 直接坠落</p>
<p><strong>[↑(上箭头)]</strong></p>
<p>Transform 变形</p>
<p><strong>[←→(左右箭头)]</strong></p>
<p>Move to left or right 左右移动</p>
<p><strong>[↓(下箭头)]</strong></p>
<p>Fast down 快速下落</p>
</div>
</div>
</div>
<div class="pageinfo" id="pinfo">
<p class="modtime">当前页面于2009年6月20日由<a class="user" href="http://www.v-ec.com/dh20156/">dh20156</a>编辑过</p>
<h4 class="htags"><strong>标签：</strong></h4>
<p class="ptags">
<a href="http://www.easyui.org.cn">Easy UI</a><span>|</span>
<a href="http://www.v-ec.com">V-EC</a><span>|</span>
<a href="http://www.w3cgroup.com">W3C GROUP</a><span>|</span>
<a href="http://www.jslab.org.cn">JSLab</a>
</p>
</div>
</div>
<div id="footer">
<div class="page">
<p class="copyright">
Copyright © 2003-2009 V-EC.com W3CGroup.com EasyUI.org.cn JSLab.org.cn All Rights Reserved
</p>
<ul class="safe">
<li>
<a href="http://www.miibeian.gov.cn" target="_blank"><img src="http://www.v-ec.com/ijc/safe_01.gif" alt="粤ICP备05024647号" title="粤ICP备05024647号" /></a>
<p><a href="http://www.miibeian.gov.cn" title="粤ICP备05024647号" target="_blank">粤ICP备05024647号</a></p>
</li>
<li>
<a href="http://www.xiamen.cyberpolice.cn/" target="_blank"><img src="http://www.v-ec.com/ijc/safe_02.gif" alt="厦门网络警察--网上有害信息报警" title="厦门网络警察--网上有害信息报警" /></a>
<p><a href="http://www.xiamen.cyberpolice.cn/" title="厦门网络警察--网上有害信息报警" target="_blank">厦门网络警察报警平台</a></p>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var easyUI={ajax:{tryList:function(){var xhr=null;for(var i=0;i<arguments.length;i++){var lambda=arguments[i];try{xhr=lambda();}catch(e){}if(xhr){break;}}return xhr;},init:function(){return this.tryList(function(){try{return new ActiveXObject('MSXML2.XMLHttp.6.0');}catch(e){}},function(){try{return new ActiveXObject('MSXML2.XMLHttp.3.0');}catch(e){}},function(){try{return new XMLHttpRequest();}catch(e){}},function(){try{return new ActiveXObject('MSXML2.XMLHttp.5.0');}catch(e){}},function(){try{return new ActiveXObject('MSXML2.XMLHttp.4.0');}catch(e){}},function(){try{return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}},function(){try{return new ActiveXObject('MSXML.XMLHttp');}catch(e){}},function(){try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}})||null;},post:function(sUrl,sArgs,bAsync,fCallBack,fFailure){var xhr=this.init();if(!xhr){alert('XmlHttp对象未就绪！');return;}xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){if(fCallBack&&fCallBack.constructor==Function){fCallBack(xhr);}}else{if(fFailure&&fFailure.constructor==Function){fFailure(xhr);}else{alert('服务器错误：'+xhr.status);}xhr=null;}}};xhr.open('POST',encodeURI(sUrl),bAsync);xhr.setRequestHeader('Content-Length',sArgs.length);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(sArgs);},get:function(sUrl,bAsync,fCallBack,fFailure){var xhr=this.init();if(!xhr){alert('XmlHttp对象未就绪！');return;}xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){if(fCallBack&&fCallBack.constructor==Function){fCallBack(xhr);}}else{if(fFailure&&fFailure.constructor==Function){fFailure(xhr);}else{alert('服务器错误：'+xhr.status);}xhr=null;}}};xhr.open('GET',encodeURI(sUrl),bAsync);xhr.send('Null');},xRequest:function(id,url){oScript=document.getElementById(id);var head=document.getElementsByTagName("head").item(0);if(oScript){head.removeChild(oScript);}oScript=document.createElement("script");oScript.setAttribute("src",url);oScript.setAttribute("id",id);oScript.setAttribute("type","text/javascript");oScript.setAttribute("language","javascript");head.appendChild(oScript);return oScript;}},getArgs:function(){var sarg=document.location.search.substr(1),rv={};rv.filename=document.location.pathname.replace(/.*///ig,'');if(!sarg){return rv;}var aarg=sarg.split('&'),atmp=[];for(var i=0;i<aarg.length;i++){atmp=aarg[i].split('=');rv[atmp[0]]=atmp[1];}return rv;}};
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}
var easyTT = function(){
this.dinfo = null;//游戏信息区域
this.dplayarea = null;//游戏区域
this.dnext = null;//下一块提示
this.showbox = null;//填色表格
this.dplaybox = null;//调皮的方块
this.dshadow = null;//阴影
}
easyTT.prototype = function(){
//形状顺序：O,I,T,L,J,Z,S
var shape = [[0x6600,0x6600,0x6600,0x6600],[0xf000,0x4444,0xf000,0x4444],[0xe400,0x4c40,0x4e00,0x8c80],[0xe800,0xc440,0x2e00,0x88c0],[0xe200,0x44c0,0x8e00,0xc880],[0xc600,0x2640,0xc600,0x2640],[0x6c00,0x4620,0x6c00,0x4620]];
var shadow = [[0x68,0x68,0x68,0x68],[0xf8,0x48,0xf8,0x48],[0xe8,0xcc,0xec,0xcc],[0xe8,0xc8,0xec,0xce],[0xe8,0xce,0xec,0xc8],[0xec,0x6c,0xec,0x6c],[0xec,0x6c,0xec,0x6c]];
var bgurl = 'images/box.png';
var colors = ['#D64A4A url('+bgurl+') 0 0 no-repeat','#BB51D4 url('+bgurl+') -16px 0 no-repeat','#EFCE52 url('+bgurl+') -32px 0 no-repeat','#9BBB49 url('+bgurl+') -48px 0 no-repeat','#41B341 url('+bgurl+') -64px 0 no-repeat','#10BDDE url('+bgurl+') -80px 0 no-repeat','#4A7BEF url('+bgurl+') -96px 0 no-repeat'];
var grid = function(x,y,othstr){//表格类
x = x||1;y = y||1;
var str = '<tr>'+new Array(x+1).join('<td> </td>')+'</tr>';
var stb = '<table cellpadding="0" cellspacing="1" style="border-collapse:separate;border-spacing:1px;">'+new Array(y+1).join(str)+'</table>';
this.innerHTML = stb+(othstr||'');
this.data = new Array(y);
for(var i=0;i<y;i++){this.data[i] = new Array(x+1).join(0).split('');}
};
var oshadow = function(shapeindex,subindex){
if(isNaN(shapeindex)||isNaN(subindex)){return;}
var sshape = shadow[shapeindex][subindex];
var drow = this.childNodes[0].rows[0],bm = sshape.toString(2),aspt = (new Array(9-bm.length).join(0)+bm).match(//d{4}/g);
var martix = aspt[0].split(''),py = aspt[1].match(/1/g).length|0;
for(var i=0;i<4;i++){
drow.cells[i].style.cssText = (parseInt(martix[i],10))?'background-color:#fff;height:1000px;':'background-color:none;height:1000px;';
}
this.py = py?py-1:0;
};
var diamond = function(shapeindex,subindex,colorindex){//方块类
if(isNaN(shapeindex)||isNaN(subindex)||isNaN(colorindex)){return;}
this.shapeindex = shapeindex,this.subindex = subindex,this.colorindex = colorindex;
var sshape = shape[shapeindex][subindex],scolor = colors[colorindex];
var asm = null,drows = this.childNodes[0].rows,ddata = this.data,crow = null,idx = 0,bm = sshape.toString(2),abm = new Array(17-bm.length).join(0)+bm,martix = abm.match(//d{4}/g);
while(martix.length){
asm = martix.shift().split(''),crow = drows[idx],cdata = ddata[idx],idx++;
for(var i=0;i<asm.length;i++){
cdata[i] = asm[i];
crow.cells[i].style.cssText = (parseInt(asm[i],10))?'background:'+scolor:'background:none;';
}
}
};
var nextbox = function(){//下一个方块
this.next = function(){
var lshape = shape.length-1,lcolor = colors.length-1;
var rndshape = Math.round(Math.random()*lshape);
var rndcolor = Math.round(Math.random()*lcolor);
this.style.disply = 'none';
diamond.call(this,rndshape,0,rndcolor);
this.style.display = 'block';
};
};
var stopEvent = function(e){
e = e||window.event;
if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}
if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;e.keyCode = 0;}
};
var playbox = function(){//掉落方块类
var lscore = [100,200,400,800];//消除方块得分列表
var levellist = [0,2000,4000,6000,8000,10000,12000,14000,16000,18000,20000];//级别分数设定
var level = 1;//当前级别
var score = 0;//当前得分
var speed = 1000;//初始速度
this.timer = null;
this.speed = function(){return speed/level|0;};
this.style.position = 'absolute';
this.style.zIndex = "10";
this.style.display = "none";
this.dnext = null;//下一块提示
this.dinfo = null;//游戏信息
this.dshadow = null;//投影
this.pause = true;//暂停
this.shadowon = false;//是否启用投影
this.pdata = null;
this.gameon = false;
this.setlevel = function(l){
if(this.gameon){if(this.pause){alert('游戏中不能更改游戏级别哦！^_^');}else{this.pause = true;window.clearTimeout(this.timer);alert('游戏中不能更改游戏级别哦！^_^');this.pause = false;this.down();}return false;}
level = isNaN(l)?1:l;
this.dinfo.childNodes[1].innerHTML = level;
return true;
};
this.setpause = function(){
if(this.pause){
this.pause = false;this.down();
}else{
this.pause = true;window.clearTimeout(this.timer);
}
};
this.savescore = function(){
if(score<2000){return;}
if(!confirm('成绩不错，要保存您现在的成绩吗？^_^')){return;}
var foosf = function(xhr){
if(!xhr){alert('抱歉，XMLHTTP对象错误 - -!');}
alert(unescape(xhr.responseText));
if(typeof winload == 'function'){winload();}
};
var sname = window.prompt('请输入您的昵称：','');
sname = sname.replace(/,|/s/g,"");
sname = sname.replace(//+/g,'＋').replace(//%/g,'％');
var url = "savescore.asp",args = "playername="+escape(sname)+"&level="+escape(level)+"&score="+escape(score);
easyUI.ajax.post(url, args, true, foosf);
};
this.useshadow = function(){
if(this.dshadow){this.dshadow.style.display = (this.shadowon)?'none':'block';this.shadowon = (this.shadowon)?false:true;}
};
this.over = function(){//游戏结束
window.clearTimeout(this.timer);
this.savescore();
this.gameon = false;
score = 0;
if(confirm('游戏结束！/n/n再来一局？ ^_^')){this.newgame();}
};
this.newgame = function(){//新游戏
document.body.scrollTop = 95;
var pdata = this.parentNode.data,drows = this.parentNode.childNodes[1].childNodes[0].rows;
for(var i=23;i>=4;i--){
for(var m=0;m<20;m++){
if(m>=4&&m<=15){
pdata[i][m] = 0;
drows[i].cells[m].style.background = 'none';
}
}
}
this.gameon = true;
this.pause = false;
this.play();
};
this.play = function(){//开始
if(!this.dnext){return false;}
var dnext = this.dnext,dshadow = this.dshadow;
var shapeindex = dnext.shapeindex,colorindex = dnext.colorindex;
this.style.display = 'none';
diamond.call(this,shapeindex,0,colorindex);
this.x = 8;
this.y = 4;
this.transindex = 0;
this.move(this.x,this.y);
this.style.display = 'block';
dshadow.style.display = 'none';
oshadow.call(dshadow,shapeindex,0);
var pspy = 4+dshadow.py|0,psy = pspy+pspy*16;
dshadow.style.top = psy+'px';
if(this.shadowon){dshadow.style.display = 'block';}
this.timer = window.setTimeout((function(o){return function(){o.down()}})(this),this.speed());
dnext.next();
};
this.check = function(s,x,y){//边界检测
var bnext = true,x2 = x+4,pd = this.pdata,dpd = [],bm = shape[this.shapeindex][s].toString(2),bdt = new Array(17-bm.length).join(0)+bm;
dpd.push(pd[y].slice(x,x2).join(''));
dpd.push(pd[y+1].slice(x,x2).join(''));
dpd.push(pd[y+2].slice(x,x2).join(''));
dpd.push(pd[y+3].slice(x,x2).join(''));
bnext = !(parseInt(bdt,2)&parseInt(dpd.join(''),2));
return bnext;
};
this.move = function(x,y){//移动
var bpause = this.pause,subindex = this.subindex,dshadow = this.dshadow;
if(bpause){return true;}
var bnext = this.check(subindex,x,y);
if(!bnext){return false;}
this.x = x,this.y = y;
var px = x+x*16,py = y+y*16,pspy = y+dshadow.py|0,psy = pspy+pspy*16;
this.style.left = px+'px';
this.style.top = py+'px';
dshadow.style.left = px+'px';
dshadow.style.top = psy+'px';
return true;
};
this.down = function(){//飘落
if(this.pause){return;}
var bnext = this.move(this.x,this.y+1);
if(!bnext){
window.clearTimeout(this.timer);
bnext = this.actiondown();
if(!bnext){return;}
this.play();
return;
}
this.timer = window.setTimeout((function(o){return function(){o.down()}})(this),this.speed());
};
this.ddown = function(){//坠落
if(this.pause){return;}
var bnext = this.move(this.x,this.y+1);
if(!bnext){
window.clearTimeout(this.timer);
bnext = this.actiondown();
if(!bnext){return;}
this.play();
return;
}
if(/msie/i.test(navigator.appVersion)){this.timer = window.setTimeout((function(o){return function(){o.ddown()}})(this),0);}else{this.ddown();}
};
this.actiondown = function(){//落地检测
this.style.display = 'none';
if(this.useshadow){this.dshadow.style.display = 'none';}
var x = this.x,y = this.y,l = 0,pdata = this.pdata,dtb = this.parentNode.childNodes[1].childNodes[0],drows = dtb.rows,fx = 0,fy = 0,scolor = colors[this.colorindex];
for(var i=0;i<4;i++){
for(var n=0;n<4;n++){
fy = y+i,fx = x+n;
if(this.data[i]
==1){pdata[fy][fx] = 1;drows[fy].cells[fx].style.background = scolor;}
}
}
for(i=pdata.length-5;i>=y;i--){
if(eval('0,'+pdata[i].join('&&'))){
pdata.splice(i,1);
pdata.splice(4,0,[1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1]);
dtb.deleteRow(i);
var dcr = drows[0].cloneNode(true);
dtb.childNodes[0].insertBefore(dcr,drows[0]);
i++;l++;
}
}
if(l){
score += lscore[l-1];
if(score>levellist[level]){level++;}
if(this.dinfo){this.dinfo.innerHTML = '<p>级别：</p><p>'+level+'</p><p>得分：</p><p>'+score+'</p>';}
}
if(!l&&y<=4){this.over();return false;}
return true;
};
this.transform = function(){//变形
if(this.pause){return true;}
var sindex = this.shapeindex,tindex = this.subindex,cindex = this.colorindex,dshadow = this.dshadow;
if(tindex+1>3){tindex = 0;}else{tindex++;}
var bnext = this.check(tindex,this.x,this.y);
if(!bnext){return;}
this.subindex = tindex;
diamond.call(this,sindex,tindex,cindex);
oshadow.call(dshadow,sindex,tindex);
var pspy = this.y+dshadow.py|0,psy = pspy+pspy*16;
dshadow.style.top = psy+'px';
};
};
return {
init:function(){//初始化
if(!this.dinfo||!this.dplayarea){return;}
var dinfo = this.dinfo,dplayarea = this.dplayarea;
dinfo.innerHTML = '<div></div><div><p>级别：</p><p>1</p><p>得分：</p><p>0</p></div><div><p><select id="game_ls"></select></p><p><button id="game_btn">开始游戏</button></p><p><button id="clear_btn">清爽页面</button></p></div>';
var dnext = dinfo.childNodes[0];
grid.call(dnext,4,4);
nextbox.call(dnext);
dnext.next();
this.dnext = dnext;
dplayarea.onselectstart = function(){return false;}
grid.call(dplayarea,20,28,'<div></div><div></div><div></div>');
dplayarea.style.cssText = 'position:relative;-moz-user-select:none;overflow:hidden;zoom:1;width:'+(16*20+21)+'px;height:'+(16*28+29)+'px;';
dplayarea.childNodes[0].style.cssText = 'position:absolute;z-index:3;left:0;top:0;border-collapse:separate;border-spacing:1px;';
var dpadata = dplayarea.data,drows = dplayarea.childNodes[0].childNodes[0].rows;
for(var i=0;i<28;i++){
if(i>=4&&i<=23){
for(var m=0;m<20;m++){
if(m>=4&&m<=15){continue;}
dpadata[i][m] = 1;
drows[i].cells[m].className = 'borderbox';
}
}else{
for(var n=0;n<20;n++){
dpadata[i]
= 1;
drows[i].cells
.className = 'borderbox';
}
}
}
var dshowbox = dplayarea.childNodes[1];
dshowbox.style.cssText = 'position:absolute;left:0;top:0;z-index:5;';
grid.call(dshowbox,20,28);
this.dshowbox = dshowbox;
var dshadow = dplayarea.childNodes[2];
grid.call(dshadow,4,1);
dshadow.style.cssText = 'position:absolute;left:0;top:0;z-index:1;-moz-opacity:0.1;opacity:0.1;filter:alpha(opacity=10);';
this.dshadow = dshadow;
var dplaybox = dplayarea.childNodes[3];
grid.call(dplaybox,4,4);
playbox.call(dplaybox);
dplaybox.dnext = dnext;
dplaybox.dshadow = dshadow;
dplaybox.dinfo = dinfo.childNodes[1];
dplaybox.dinfo.style.color = '#fff';
dplaybox.pdata = dpadata;
this.dplaybox = dplaybox;
document.documentElement.onkeydown = function(e){
e = e||window.event;
var ec = e.which||e.keyCode;
switch(ec){
case 37:dplaybox.move(dplaybox.x-1,dplaybox.y);stopEvent(e);break;
case 39:dplaybox.move(dplaybox.x+1,dplaybox.y);stopEvent(e);break;
case 38:dplaybox.transform();stopEvent(e);break;
case 32:window.clearTimeout(dplaybox.timer);dplaybox.ddown();stopEvent(e);break;
case 40:window.clearTimeout(dplaybox.timer);dplaybox.down();stopEvent(e);break;
case 80:dplaybox.setpause();stopEvent(e);break;
case 113:if(confirm('要开始新的游戏吗？ ^_^')){dplaybox.newgame();}stopEvent(e);break;
case 115:dplaybox.useshadow();stopEvent(e);break;
default:break;
}
};
},
start:function(){//开始
this.dplaybox.newgame();
}
};
}();
var da = document.getElementById('ga'),dads = da.childNodes;
var dinfo = dads[0],darea = dads[1];
var gtt = new easyTT();
gtt.dinfo = dinfo;
gtt.dplayarea = darea;
gtt.init();
var dpmodule = [];
dpmodule.push(document.getElementById('header'));
dpmodule.push(document.getElementById('gamehelp'));
dpmodule.push(document.getElementById('pinfo'));
dpmodule.push(document.getElementById('footer'));
var dgmslt = document.getElementById('game_ls'),dgmbtn = document.getElementById('game_btn'),dclrbtn = document.getElementById('clear_btn');
for(var i=0;i<10;i++){
var opt = document.createElement('option'),idx = i+1;
dgmslt.options.add(opt);
opt.value = idx;
opt.text = "玩第"+idx+"级"
}
dgmslt.onchange = function(){gtt.dplaybox.setlevel(this.value);this.blur();};
dgmbtn.onclick = function(){
var str = this.innerHTML;
if(gtt.dplaybox.gameon&&str=='开始游戏'){this.innerHTML = '继续游戏';this.blur();return;}
switch(str){
case '开始游戏':this.innerHTML = '暂停游戏';gtt.start();break;
case '继续游戏':this.innerHTML = '暂停游戏';gtt.dplaybox.setpause();break;
case '暂停游戏':this.innerHTML = '继续游戏';gtt.dplaybox.setpause();break;
default:break;
}
this.blur();
};
dclrbtn.onclick = function(){fooclr(this);this.blur();};
var fooclr = function(obj){
if(obj.innerHTML=='清爽页面'){
obj.innerHTML = '展开页面';
for(var i=0;i<dpmodule.length;i++){
dpmodule[i].style.display = 'none';
}
}else{
obj.innerHTML = '清爽页面';
for(var i=0;i<dpmodule.length;i++){
dpmodule[i].style.display = 'block';
}
}
}
fooclr(dclrbtn);
var Browser={};
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
window.root = null;
window.onload = winload;
window.onunload = function(){window.root = null;};
function winload(){
window.root = null;
var path = "score.xml?temp="+Math.random();
var dltList = document.getElementById("playerlist");
var init = function(xhr){
var root = xhr.responseXML.documentElement;
if(root!=null){
window.root = root;
var nodes = root.childNodes,nnn = '',nnl = '',nnv = '',adata = [];
for(i=0;i<nodes.length;i++){
nnn = nodes[i].nodeName;
if(nnn != "#text" && nnn != "#comment"){
nnl = nodes[i].getAttribute("level"),nnv = nodes[i].childNodes[0].nodeValue;
adata.push([nnn,nnl,nnv]);
}
}
adata.sort(function(a,b){return b[2]-a[2];});
var pstr = [];
dltList.style.display = 'none';
for(i=0;i<adata.length;i++){
if(i>=15){break;}
pstr.push('<li>'+adata[i][0]+','+adata[i][1]+','+adata[i][2]+'</li>');
}
dltList.innerHTML = pstr.join('');
dltList.style.display = 'block';
}
};
easyUI.ajax.get(path,true,init);
}
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3422792-1";
urchinTracker();
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript版俄罗斯方块Easy Tetris实现原理
- JavaScript版俄罗斯方块Easy Tetris实现原理
- HTML5+JS实现俄罗斯方块原理及具体步骤
- 俄罗斯方块AI实现原理、俄罗斯方块人工智能设计、QQ游戏作弊器、火拼俄罗斯外挂、Tetris AI Design
- KVO的实现原理及使用场景
- web前端图片懒加载实现原理
- Android Debug Bridge 技术实现原理
- HashMap实现原理
- JTA 深度历险 - 原理与实现
- tomcat热部署的实现原理
- 智能指针原理分析与自己的shared_ptr实现
- Redux 中 combineReducers 和 createStore的实现原理
- 单表代替密码原理及算法实现
- jsonp 的原理与实现
- CONTAINING_RECORD宏的实现原理
- JavaScript中使用import 和require打包后实现原理分析
- java数据库连接池实现原理
- 直方图均衡原理及Matlab实现
- A*算法的原理和实现