直接可运行，真的很不错<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="[email protected],风之石" />
<meta name="Copyright" content="dh20156风之石" />
<style type="text/css">
.tetris{width:460px;overflow:hidden;background:#333;}
.tetris td{font-size:12px;width:16px;height:16px;}
.tetris td.borderbox{background:#525252 url(http://www.v-ec.com/games/tetris/images/box.png) -112px 0 no-repeat;}
.tetris .hd{width:100px;float:right;}
</style>
</head>
<body>
<div class="tetris" id="ga"><div class="hd"></div><div class="bd">游戏区域</div></div>
</body>
<script type="text/javascript">
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 = 'http://www.v-ec.com/games/tetris/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:#fff;height:1000px;':'background: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.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);
if(confirm('游戏结束！\n\n再来一局？ ^_^')){this.newgame();}
};
this.newgame = function(){//新游戏
var pdata = this.parentNode.childNodes[0].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.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 pd = this.parentNode.childNodes[0].data,dpd = [],bm = shape[this.shapeindex][s].toString(2),bdt = new Array(17-bm.length).join(0)+bm;
dpd.push(pd[y].slice(x,x+4).join(''));
dpd.push(pd[y+1].slice(x,x+4).join(''));
dpd.push(pd[y+2].slice(x,x+4).join(''));
dpd.push(pd[y+3].slice(x,x+4).join(''));
var dbdt = parseInt(bdt,2),dpdt = parseInt(dpd.join(''),2),bnext = !(dbdt&dpdt);
//alert(x+','+y+','+bdt+','+dpd.join('')+','+bnext);
if(!bnext){return false;}
return true;
};
<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="[email protected],风之石" />
<meta name="Copyright" content="dh20156风之石" />
<style type="text/css">
.tetris{width:460px;overflow:hidden;background:#333;}
.tetris td{font-size:12px;width:16px;height:16px;}
.tetris td.borderbox{background:#525252 url(http://www.v-ec.com/games/tetris/images/box.png) -112px 0 no-repeat;}
.tetris .hd{width:100px;float:right;}
</style>
</head>
<body>
<div class="tetris" id="ga"><div class="hd"></div><div class="bd">游戏区域</div></div>
</body>
<script type="text/javascript">
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 = 'http://www.v-ec.com/games/tetris/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:#fff;height:1000px;':'background: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.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);
if(confirm('游戏结束！\n\n再来一局？ ^_^')){this.newgame();}
};
this.newgame = function(){//新游戏
var pdata = this.parentNode.childNodes[0].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.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 pd = this.parentNode.childNodes[0].data,dpd = [],bm = shape[this.shapeindex][s].toString(2),bdt = new Array(17-bm.length).join(0)+bm;
dpd.push(pd[y].slice(x,x+4).join(''));
dpd.push(pd[y+1].slice(x,x+4).join(''));
dpd.push(pd[y+2].slice(x,x+4).join(''));
dpd.push(pd[y+3].slice(x,x+4).join(''));
var dbdt = parseInt(bdt,2),dpdt = parseInt(dpd.join(''),2),bnext = !(dbdt&dpdt);
//alert(x+','+y+','+bdt+','+dpd.join('')+','+bnext);
if(!bnext){return false;}
return true;
};
if(this.pause){return true;}
var bnext = this.check(this.subindex,x,y),dshadow = this.dshadow;
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.parentNode.childNodes[0].data,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][n]==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>';
var dnext = dinfo.childNodes[0];
grid.call(dnext,4,4);
nextbox.call(dnext);
dnext.next();
this.dnext = dnext;
dplayarea.onselectstart = function(){return false;}
dplayarea.innerHTML = '<div></div><div></div><div></div><div></div>';
grid.call(dplayarea.childNodes[0],20,28);
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;';
dplayarea.childNodes[0].childNodes[0].style.cssText = 'border-collapse:separate;border-spacing:1px;';
var dpadata = dplayarea.childNodes[0].data,drows = dplayarea.childNodes[0].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][n] = 1;
drows[i].cells[n].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';
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:if(dplaybox.pause){dplaybox.pause = false;dplaybox.down();}else{dplaybox.pause = true;window.clearTimeout(dplaybox.timer);};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();
</script>
</html>