javascript版的俄罗斯方块
程序范例：http://myinfo95.class.netbig.com/box.htm
本程序是我在2000年5月时写的。看到这里有别人写的俄罗斯方块，也贴上拉凑俦热闹。
<html>
<head>
<title>俄罗斯方块（lint)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td { font-family: "宋体"; font-size: 11pt}
body { font-family: "宋体"; font-size: 11pt}
select { font-family: "宋体"; font-size:11pt}
A {text-decoration: none; color: #ffffff; font-family: "宋体"; font-size: 11pt}
A:hover {text-decoration: underline; color: #FF0000; font-family: "宋体"; font-size: 11pt}
-->
</style>

<Script language="javascript">
var M=20,N=15,S=7;
var box1,box2,box0,new_box1,new_box2;
var arraybox,assorted_box;
var i,j,m,n;
var box_x=0,box_y=5,box,new_box;
var current_type=0,current_order=0,new_current_type=0,new_current_order=0;
//var down=0,left=0,right=0,bottom=0,change=0;
var go=0,change=0,bottom=0;
var high_score=0,score=0;
var box_num;
var speed=0,arrayspeed;
var game_class=0,begin=0,stop=0;
var line=0,begin=0;
var progress=0,progress_str="";
//存贮每一个变形BOX的可变形数目
box_num=new Array(4,4,2,2,4,2,2);
arrayspeed=new Array(500,450,400,350,300,200,150,100,50);
//存贮当前的BOX[x/y][位置]
box=new Array(2);
for(i=0;i<2;i++)
box[i]=new Array(0,0,0,0);

//存贮下一个BOX
new_box=new Array(2);
for(i=0;i<2;i++)
new_box[i]=new Array(0,0,0,0);

box1=new Image();
box2=new Image();
box0=new Image();
new_box1=new Image();
new_box2=new Image();
box0.src="images/box0.gif";
box1.src="images/box1.jpg";
box2.src="images/box2.jpg";
new_box1.src="images/box1.jpg";
new_box2.src="images/box3.jpg";
//存贮目前的BOX显示状态
arraybox=new Array(M);
for(i=0;i<M;i++)
 {arraybox[i]=new Array(N);
   for(j=0;j<N;j++)
   arraybox[i][j]=0;
 }
//assorted_box [类别][x/y][次序][位置]
assorted_box=new Array(S);
assorted_box[0]=new Array(2);
assorted_box[0][0]=new Array(4);
assorted_box[0][1]=new Array(4);
assorted_box[0][0][0]=new Array(0,0,0,1);
assorted_box[0][1][0]=new Array(0,1,2,0);
assorted_box[0][0][1]=new Array(0,0,1,2);
assorted_box[0][1][1]=new Array(0,1,1,1);
assorted_box[0][0][2]=new Array(0,1,1,1);
assorted_box[0][1][2]=new Array(2,0,1,2);
assorted_box[0][0][3]=new Array(0,1,2,2);
assorted_box[0][1][3]=new Array(0,0,0,1);

assorted_box[1]=new Array(2);
assorted_box[1][0]=new Array(4);
assorted_box[1][1]=new Array(4);
assorted_box[1][0][0]=new Array(0,1,1,1);
assorted_box[1][1][0]=new Array(1,0,1,2);
assorted_box[1][0][1]=new Array(0,1,1,2);
assorted_box[1][1][1]=new Array(0,0,1,0);
assorted_box[1][0][2]=new Array(0,0,0,1);
assorted_box[1][1][2]=new Array(0,1,2,1);
assorted_box[1][0][3]=new Array(0,1,1,2);
assorted_box[1][1][3]=new Array(1,0,1,1);

assorted_box[2]=new Array(2);
assorted_box[2][0]=new Array(2);
assorted_box[2][1]=new Array(2);
assorted_box[2][0][0]=new Array(0,0,0,0);
assorted_box[2][0][1]=new Array(0,1,2,3);
assorted_box[2][1][0]=new Array(0,1,2,3);
assorted_box[2][1][1]=new Array(0,0,0,0);

assorted_box[3]=new Array(2);
assorted_box[3][0]=new Array(2);
assorted_box[3][1]=new Array(2);
assorted_box[3][0][0]=new Array(0,0,1,1);
assorted_box[3][1][0]=new Array(0,1,0,1);
assorted_box[3][0][1]=new Array(0,0,1,1);
assorted_box[3][1][1]=new Array(0,1,0,1);

assorted_box[4]=new Array(4);
assorted_box[4][0]=new Array(4);
assorted_box[4][1]=new Array(4);
assorted_box[4][0][0]=new Array(0,0,0,1);
assorted_box[4][1][0]=new Array(0,1,2,2);
assorted_box[4][0][1]=new Array(0,1,2,2);
assorted_box[4][1][1]=new Array(1,1,0,1);
assorted_box[4][0][2]=new Array(0,1,1,1);
assorted_box[4][1][2]=new Array(0,0,1,2);
assorted_box[4][0][3]=new Array(0,0,1,2);
assorted_box[4][1][3]=new Array(0,1,0,0);

assorted_box[5]=new Array(2);
assorted_box[5][0]=new Array(2);
assorted_box[5][1]=new Array(2);
assorted_box[5][0][0]=new Array(0,1,1,2);
assorted_box[5][0][1]=new Array(0,0,1,1);
assorted_box[5][1][0]=new Array(0,0,1,1);
assorted_box[5][1][1]=new Array(1,2,0,1);

assorted_box[6]=new Array(2);
assorted_box[6][0]=new Array(2);
assorted_box[6][1]=new Array(2);
assorted_box[6][0][0]=new Array(0,1,1,2);
assorted_box[6][0][1]=new Array(1,0,1,0);
assorted_box[6][1][0]=new Array(0,0,1,1);
assorted_box[6][1][1]=new Array(0,1,1,2);

function clear_line(fill)
{
 var i;
 if(fill==1)
  {
   if(line<=M-1)
    {
     for(i=0;i<N;i++)
      {
      eval("document.box.img"+line+"_"+i+".src=box1.src");
      }
      
      line++; 
     window.setTimeout("clear_line(1)",10);
    }
    else
     {
      line=M-1;
      window.setTimeout("clear_line(0)",10);
     }
  }
 else
  {
    if(line>=0)
    {
     for(i=0;i<N;i++)
     eval("document.box.img"+line+"_"+i+".src=box2.src");
     line--; 
     window.setTimeout("clear_line(0)",10);
    }
    else
    {
     speed=arrayspeed[document.game_set.game_speed.options[document.game_set.game_speed.selectedIndex].value];
     game_class=document.game_set.game_class.options[document.game_set.game_class.selectedIndex].value;
     set_game_class();
     score=0;
  document.game_set.start_button.disabled=true;
 document.game_set.pause_button.disabled=false;
 document.game_set.restart_button.disabled=true;
 document.game_set.pause_button.value="暂停";
  document.game_set.restart_button.blur();
  document.game_set.restart_button.blur();
  stop=0;
  ready_go(1);
  begin_go();
     //return;
    }
   
  }
}

function start_game()
{
 stop=0;
 speed=arrayspeed[document.game_set.game_speed.options[document.game_set.game_speed.selectedIndex].value];
 game_class=document.game_set.game_class.options[document.game_set.game_class.selectedIndex].value;
 set_game_class();
 ready_go(1);
 document.game_set.start_button.disabled=true;
 document.game_set.pause_button.disabled=false;
 document.game_set.restart_button.disabled=true;
 document.game_set.pause_button.value="暂停";
}
function pause_game()
{
 
 speed=arrayspeed[document.game_set.game_speed.options[document.game_set.game_speed.selectedIndex].value];
 //document.game_set.start_button.disabled=false;
 if(stop==0)
 {document.game_set.pause_button.value="继续";
  document.game_set.pause_button.disabled=false;
  document.game_set.restart_button.disabled=false;
  document.game_set.pause_button.blur();
  stop=1;
 }
 else
  {document.game_set.pause_button.value="暂停";
  document.game_set.pause_button.disabled=false;
  document.game_set.restart_button.disabled=true;
  document.game_set.pause_button.blur();
  stop=0;
  set_down();
 }
}

function show_score()
{
 my_score.innerHTML="分数："+score; 
}
function documentkeydown()
{
 go=bottom=change=0;
 if(event.keyCode==37&&valid_move('left'))
  left_box();
 else if(event.keyCode==39&&valid_move('right')&&(stop==0))
   right_box();
 else if(event.keyCode==40&&valid_move('down')&&(stop==0))
   down_box();
 else if(event.keyCode==13||event.keyCode==32&&(stop==0))
   change_box();    
 else if((event.keyCode==80)&&(document.game_set.pause_button.disabled==false))
   pause_game();
 else if(event.keyCode==81)
   parent.window.close();
 else if((event.keyCode==83)&&(document.game_set.start_button.disabled==false))
  start_game();
 else if((event.keyCode==82)&&(document.game_set.restart_button.disabled==false))
  end(); 
}
function update()
{
 var i,j;
 for(i=0;i<M;i++)
 for(j=0;j<N;j++)
 {
  if(arraybox[i][j]==0)
   eval("document.box.img"+i+"_"+j+".src=box2.src");
  else
   eval("document.box.img"+i+"_"+j+".src=box1.src");
 } 
}
function list_box(string)
{
var str,i,j;
str=string;
for(i=0;i<2;i++)
for(j=0;j<4;j++)
str+=box[i][j]+" ";
}
function show_box(both)
{
 var i,j;
 //list_box('showbox');
 if(both==1)
  for(i=0;i<4;i++)
   for(j=0;j<4;j++)
   eval("document.new_box.new_img"+i+"_"+j+".src=new_box2.src");
 for(i=0;i<4;i++)
 {
eval("document.box.img"+(box[0][i]+box_x)+"_"+(box[1][i]+box_y)+".src=box1.src");
if(both==1)
  eval("document.new_box.new_img"+new_box[0][i]+"_"+new_box[1][i]+".src=new_box1.src");
 }
}
function valid_move(direction)
{
 var i,j;
 if(direction=='down')
 {
  for(i=0;i<4;i++)
  //判断是否到底
  {if((box_x+box[0][i]+1)==M)
   {for (j=0;j<4;j++)
     arraybox[box_x+box[0][j]][box_y+box[1][j]]=1;
   return false;
   }
   if(arraybox[box_x+box[0][i]+1][box_y+box[1][i]]==1)
   {for (j=0;j<4;j++)
     arraybox[box_x+box[0][j]][box_y+box[1][j]]=1;
   return false;
   }
  }
  return true;
 }
 else if(direction=='left')
 {
   for(i=0;i<4;i++)
   {if((box_y+box[1][i]-1)<0)
     return false;
   if(arraybox[box_x+box[0][i]][box_y+box[1][i]-1]==1)
    return false;
   }
   return true;
  
 }
 else if(direction=='right')
 {
  for(i=0;i<4;i++)
   {if((box_y+box[1][i]+1)==N)
    return false;
   if(arraybox[box_x+box[0][i]][box_y+box[1][i]+1]==1)
    return false;
   } 
  return true;
 }
 
}

function begin_go()
{
  var i,j,k,m;
  box_x=0;box_y=5;
 new_current_type=Math.floor(Math.random()*7);
 new_current_order=Math.floor(Math.random()*box_num[new_current_type]);
 for(k=0;k<2;k++)
 for(m=0;m<4;m++)
 {
  new_box[k][m]=assorted_box[new_current_type][k][new_current_order][m];
 }
}

function end()
{ var i,j;
 stop=1;
 if(high_score<score)
 high_score=score;
 my_high_score.innerHTML="最高分:"+high_score;
 document.game_set.start_button.disabled=false;
 document.game_set.pause_button.disabled=true;
 document.game_set.pause_button.value="暂停";
 alert(" GAME OVER!GAME SCORE:"+score);
 line=0;
 clear_line(1);
  for(i=0;i<M;i++)
  for(j=0;j<N;j++)
   arraybox[i][j]=0;
  speed=arrayspeed[document.game_set.game_speed.options[document.game_set.game_speed.selectedIndex].value];
  game_class=document.game_set.game_class.options[document.game_set.game_class.selectedIndex].value;
  set_game_class();
   stop=0;
  score=0;
 begin_go();
}
function ready_go(need_update)
{
 box_x=0;box_y=5;
 for(k=0;k<2;k++)
   for(m=0;m<4;m++)
 box[k][m]=new_box[k][m];
  for(m=0;m<4;m++)
  {if(arraybox[box[0][m]+box_x][box[1][m]+box_y]==1)
   {end();return;}
  }
 current_type=new_current_type;
 current_order=new_current_order;
 new_current_type=Math.floor(Math.random()*7);
 new_current_order=Math.floor(Math.random()*box_num[new_current_type]);
 for(k=0;k<2;k++)
 for(m=0;m<4;m++)
 new_box[k][m]=assorted_box[new_current_type][k][new_current_order][m];
 show_box(1);
 if(need_update) update();
 set_down();
}

function clear_box()
{
 var i,j;
 for(j=0;j<4;j++)
 {
  eval("document.box.img"+(box[0][j]+box_x)+"_"+(box[1][j]+box_y)+".src=box2.src");
 }
}
function change_box()
{
 var i,j,x,y;
 for(i=0;i<4;i++)
  {x=assorted_box[current_type][0][(current_order+1)%box_num[current_type]][i];
  y=assorted_box[current_type][1][(current_order+1)%box_num[current_type]][i];
  if((x+box_x)<0||(x+box_x)>=M||(y+box_y)<0||(y+box_y)>=N)
   return false;
  if(arraybox[box_x+x][box_y+y]==1)
   return false;
  } 
 
 clear_box();
 current_order++;
 for(i=0;i<2;i++)
 for(j=0;j<4;j++)
 {
  box[i][j]=assorted_box[current_type][i][(current_order)%box_num[current_type]][j];
 }
 show_box(0);
}

function left_box()
{
 
 var i;
 clear_box();
 box_y-=1;
 show_box(0);
}

function right_box()
{
var i;
 clear_box();
 box_y+=1;
 show_box(0);
}
function down_box()
{
var i;
 clear_box();
 box_x+=1;
 show_box(0);
}
function set_down()
{
 if (stop) return;
 score+=1;
 show_score();
 if(valid_move('down'))
 {
 down_box();
 window.setTimeout("set_down()",speed);
 }
 else
  {bomb();
  ready_go(0);} 
}
function bomb()
{
 var i,j,k,all,if_update=0;
 var m,n=0;
 m=new Array(0,0,0,0); 
 for(i=0;i<M;i++)
 {all=1;
  for(j=0;j<N;j++)
  all*=arraybox[i][j];
   if (all==1)
   {
    for(j=0;j<N;j++)
    {
    eval("document.box.img"+i+"_"+j+".src=box0.src");
    }
   for(k=i;k>0;k--)
   for(j=0;j<N;j++)
    {
    arraybox[k][j]=arraybox[k-1][j];      
    }
   m[n++]=i;
   if_update=1;        
   }
 } 
 if((m[3]-m[0])==3)
  score+=1500;
 else
 {if(((m[3]-m[1])==2)||((m[2]-m[0])==2))
  score+=700;
  else
  if(((m[3]-m[2])==1)||((m[2]-m[1])==1)||((m[1]-m[0])==1))
  {score+=300;
  if((m[3]*m[2]*m[0]!=0)||(m[3]*m[1]*m[0]!=0))
  score+=100;
  }
  else
  if((m[3]+m[2]+m[1]+m[0])!=0)
   score+=100;
 }    
 if(if_update)
  {
   update();
  }
}
function documentmousedown()
{
 if(event.button==2)
  alert("本系统只支持鼠标左键");
}
function documentload()
{
 if(document.readyState=='complete')
  {
  pro.style.visibility="hidden";
  state.innerHTML="小猪,我把格子放大了。你玩吧";
  help.innerHTML="帮助:等文件下载完后，按开始，然后用左右和向下键就可以操纵了，空格或回车是变形。快捷键：s:开始；p：暂停(继续); r:重新开始；q:关闭窗口"+"<br>"+"Copyright by lint.EMAIL：[email protected]. 2000.5 ";
  document.game_set.start_button.disabled=false;
  }
  
}
function load()
{
 if(progress<130&&document.readyState!='complete')
  {progress++;
  pro.style.width=(progress*4)+"px";
  window.setTimeout("load()",15);
  }  
 
}
function set_game_class()
{
 var i;
 for(i=0;i<M;i++)
  for(j=0;j<N;j++)
   arraybox[i][j]=0;
 for(i=M-1;i>M-1-game_class;i--)
  {for(j=0;j<N-3;j++)
  arraybox[i][Math.floor(Math.random()*N)]=1;
  }
}
document.onreadystatechange=documentload;
document.onkeydown=documentkeydown;
document.onmousedown=documentmousedown;
</Script>
</head>

<body bgcolor="#FFFFFF">

<div id="Layer1" style="position:absolute; left:171px; top:55px; width:229px; height:297px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000">
 <form name="box">
<Script language="javascript">
var i,j;
for(i=0;i<M;i++)
{for(j=0;j<N;j++)
document.write("<img name='img"+i+"_"+j+"' src='images/box2.jpg' width=15 height=15>");
document.writeln("<br>");
}
</Script>
</form>
</div>
<div id="Layer2" style="position:absolute; left:19px; top:65px; width:121px; height:94px; z-index:2; background-color: #ffffff; layer-background-color: #00000; border: 1px none #000000">
 <p>下一个：</p>
 <form name="new_box">
<Script language="javascript">
var i,j;
for(i=0;i<4;i++)
{for(j=0;j<4;j++)
document.write("<img name='new_img"+i+"_"+j+"' src='images/box3.jpg' width=15 height=15>");
document.writeln("<br>");
}
</Script>
</form>
</div>
<div id="my_score" style="position:absolute; left:409px; top:84px; width:121px; height:24px; z-index:3; background-color: #F4FFFB; layer-background-color: #F4FFFB; border: 1px none #000000">
 分数：0 </div>
<div id="my_high_score" style="position:absolute; left:407px; top:55px; width:122px; height:25px; z-index:4; background-color: #E6FEFF; layer-background-color: #E6FEFF; border: 1px none #000000">最高分：0</div>
<div id="Layer4" style="position:absolute; left:408px; top:112px; width:123px; height:237px; z-index:5; background-color: #FFFBEC; layer-background-color: #FFFBEC; border: 1px none #000000">
 <form name="game_set" >
  <table width="75%" border="0" bordercolorlight="#CCCCFF" bordercolordark="#6666FF" bordercolor="#CCFFFF">
   <tr>
    <td>级别</td>
    <td>
     <select name="game_class">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
     </select>
    </td>
   </tr>
   <tr>
    <td>速度</td>
    <td>
     <select name="game_speed">
      <option value="0" selected>0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
     </select>
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" onClick="start_game()" name="start_button" value="开始">
    </td>
    <td>
     <input type="button" onclick="pause_game()" name="pause_button" value="暂停">
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <input type="button" onclick="end()" name="restart_button" value="重新开始">
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <input type="button" onClick="javascript:history.go(0)" name="Submit3" value="重置">
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <input type="button" onClick="javascript:parent.window.close()" name="Button" value="退出游戏">
    </td>
   </tr>
  </table>
 </form>
</div>
<div id="Layer3" style="position:absolute; left:3px; top:7px; width:152px; height:42px; z-index:6"></div>
<div id="Layer5" style="position:absolute; left:183px; top:10px; width:216px; height:34px; z-index:7">
 <div align="center"><img src="images/els.jpg" width="150" height="26"></div>
</div>
<div id="state" style="position:absolute; left:16px; top:169px; width:135px; height:179px; z-index:8; background-color: #FEF4D8; layer-background-color: #FEF4D8; border: 1px none #000000">
 <p>载入中,请稍侯！</p>
 <p>&nbsp;</p>
</div>
<div id="help" style="position:absolute; left:16px; top:360px; width:537px; height:65px; z-index:9; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000">
</div>
<div id="pro" style="position:absolute; left:34px; top:394px; width:0px; height:25px; z-index:10; background-color: #003333; layer-background-color: #003333; border: 1px none #000000;visibility: visible"></div>
<Script language="javascript">
document.game_set.start_button.disabled=true;
document.game_set.pause_button.disabled=true;
document.game_set.restart_button.disabled=true;
load();
begin_go();
</Script>
</body>
</html>