俄罗斯方块

俄罗斯方块

网上也看到不少自己用js写的俄罗斯方块，为了。。。，我觉得自己也小试一把，希望大家能提出宝贵意见出来，小弟拜谢！！

图示：

 

以下是源代码：

 

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
  < title > Tetris </ title >
< style type = " text/css " >
body {margin:0;padding:0;font-family:Verdana;}
.container {border:2px solid #ccc;overflow:hidden;zoom:1;padding:10px;}
#game - area {float:left;width:200px;height:400px;border:4px solid #999;padding:0;margin:0;font-size:0;line-height:0;overflow:hidden;}
#game - area ul {overflow:hidden;zoom:1;padding:0;margin:0;}
#game - area ul li {float:left;width:20px;height:20px;overflow:hidden;font-size:0;line-height:0;}
.blue {background-color:#1E87F0;}
.yellow {background-color:#F77117;}
.green {background-color:#91C846;}
.violet {background-color:#E727CF;}
#game - oper {float:left;display:inline;margin-left:20px;font-size:14px;}

#next {margin:20px 0;width:100px;border:2px solid #ccc;padding:0;font-size:0;line-height:0;overflow:hidden;}
#next ul {overflow:hidden;zoom:1;padding:0;margin:0;}
#next ul li {float:left;width:10px;height:10px;overflow:hidden;font-size:0;line-height:0;}
#info {font-size:16px;}
#sn - stage {color:#1E87F0;font-weight:bold;}
#sn - score {color:#F77117;font-weight:bold;}
#oper {margin:10px 0;}
#oper button {font-size:14px;margin-right:5px;padding:2px 5px;font-family:Verdana;}
#debug {color:#ff0000;font-weight:bold;}
</ style >
</ head >
< body >
< div class = " container " >
  < div id = " game-area " ></ div >
  < div id = " game-oper " >
   < h3 > Tetris Game </ h3 >
   < div id = " info " >
   Stage :  < span id = " sn-stage " > 1 </ span > ,
   Score :  < span id = " sn-score " > 0 </ span >
   </ div >
   < div id = " next " ></ div >
   < div id = " oper " >
    < button id = " begin " > Begin </ button >
    < button id = " restart " > Again </ button >
   </ div >
   < div id = " debug " ></ div >
  </ div >
</ div >
< script type = " text/javascript " >
var  Tetris  =  ( function () {
 var $ = function(s){return document.getElementById(s)};
 var _blockType = null;
 var _timer = null;
 var indexLine = 0;
 var indexBlock = null;
 var nextBlock = null;
 var ranType = 0,nextranType = 0;
 var ranTypeDir = 0,nextranTypeDir = 0;
 var ranTypeLen = 1,nextranTypeLen = 0;
 var left = 0;
 var indexColor = null;
 var NextColor = null;
 var speed = 600;
 var isPause = false;

 var colorList = ["blue","yellow","green","violet"];

 var initType = function(){
  _blockType = [
   [
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left]
    ]
   ],

   [
    [
     [indexLine,4 + left],
     [indexLine + 1,4 + left],
     [indexLine + 2,4 + left],
     [indexLine + 2,5 + left]
    ],
    [
     [indexLine,3 + left],
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,3 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,5 + left]
    ],
    [
     [indexLine,5 + left],
     [indexLine + 1,3 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left]
    ]
   ],

   [
    [
     [indexLine,5 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,5 + left],
     [indexLine + 2,4 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left],
     [indexLine + 1,6 + left]
    ],
    [
     [indexLine,5 + left],
     [indexLine,6 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,5 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine,6 + left],
     [indexLine + 1,6 + left]
    ]
   ],


   [
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left]
    ]
   ],

   [
    [
     [indexLine,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,4 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,5 + left],
     [indexLine + 1,6 + left]
    ]
   ],

   [
    [
     [indexLine,4 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,5 + left]
    ],
    [
     [indexLine,5 + left],
     [indexLine,6 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left]
    ]
   ],

   [
    [
     [indexLine,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left],
     [indexLine + 1,6 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine + 1,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 2,4 + left]
    ],
    [
     [indexLine + 1,5 + left],
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine,6 + left]
    ],
    [
     [indexLine,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,5 + left]
    ]
   ],

   [
    [
     [indexLine,3 + left],
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine,6 + left]
    ],
    [
     [indexLine,5 + left],
     [indexLine + 1,5 + left],
     [indexLine + 2,5 + left],
     [indexLine + 3,5 + left]
    ]
   ],

   [
    [
     [indexLine,5 + left]
    ]
   ],

   [
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,4 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine,5 + left],
     [indexLine + 1,5 + left]
    ],
    [
     [indexLine,5 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left]
    ],
    [
     [indexLine,4 + left],
     [indexLine + 1,4 + left],
     [indexLine + 1,5 + left]
    ]
   ]
  ];
 }
 var clearNext = function(){
  var len = $("next").getElementsByTagName("li").length;
  for(var i = 0; i < len; i++){
   $("next").getElementsByTagName("li")[i].className = "";
  }
 };
 var createBlock = function(){
  initType();
  nextColor = Math.ceil(Math.random() * colorList.length) - 1;
  nextranType = Math.ceil(Math.random() * _blockType.length) - 1;
  nextranTypeDir = Math.ceil(Math.random() * _blockType[nextranType].length) - 1;
  nextranTypeLen = _blockType[nextranType].length;
  nextBlock = _blockType[nextranType][nextranTypeDir];
  clearNext();
  for(var i = 0; i < nextBlock.length; i++){
   $("next-" + nextBlock[i][0] + "-" + nextBlock[i][1]).className = colorList[nextColor];
  }
 };
 var getNext = function(){
  ranType = nextranType;
  ranTypeDir = nextranTypeDir;
  ranTypeLen = nextranTypeLen;
  indexBlock = nextBlock;
  indexColor = nextColor;
 };
 var setStage = function(){
  var _score = parseInt($("sn-score").innerHTML,10);
  var _stage = 1;
  if(_score >= 100 && _score < 200){
   speed = 500;
   _stage = 2;
  }else if(_score >= 200 && _score < 300){
   speed = 400;
   _stage = 3;
  }else if(_score >= 300 && _score < 400){
   speed = 300;
   _stage = 4;
  }else if(_score >= 400 && _score < 500){
   speed = 200;
   _stage = 5;
  }else if(_score >= 500 && _score < 600){
   speed = 100;
   _stage = 6;
  }else if(_score >= 600){
   speed = 80;
   _stage = 7;
  }
  $("sn-stage").innerHTML = _stage;
 };
 var downAction = function(){
  if(isBottom() || isBottomBlock()){
   for(var i = indexBlock.length - 1; i > -1; i--){
    if(indexBlock[i][0] == 0){
     $("debug").innerHTML = "Game Over!";
     clearInterval(_timer);
     _timer = null;
     return false;
    }
    $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).title = "block";
   }
   clearAction();
   clearInterval(_timer);
   _timer = null;
   indexLine = 0;
   left = 0;
   getNext();
   startAction();
   return;
  };
  for(var i = indexBlock.length - 1; i > -1; i--){
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = "";
  }
  for(var i = indexBlock.length - 1; i > -1; i--){
   indexBlock[i][0] = indexBlock[i][0] + 1;
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = colorList[indexColor];
  }
 };
 var isBottomBlock = function(){
  for(var i = indexBlock.length - 1; i > -1; i--){
   var x = indexBlock[i][0] + 1;
   if("block" == $("item-" + x + "-" + indexBlock[i][1]).title){
    return true;
   }
  }
  return false;
 };
 var isBottom = function(){
  for(var i = indexBlock.length - 1; i > -1; i--){
   if(indexBlock[i][0] == 19){
    return true;
   }
  }
  return false;
 };
 var isLeft = function(){
  for(var i = indexBlock.length - 1; i > -1; i--){
   if(indexBlock[i][1] == 0){
    return true;
   }
  }
  return false;
 };
 var isRight = function(){
  for(var i = indexBlock.length - 1; i > -1; i--){
   if(indexBlock[i][1] == 9){
    return true;
   }
  }
  return false;
 };
 var isBlock = function(dir){
  switch(dir){
   case "left" :
    for(var i = indexBlock.length - 1; i > -1; i--){
     var y = indexBlock[i][1] - 1;
     if("block" == $("item-" + indexBlock[i][0] + "-" + y).title){
      return true;
     }
    }
    break;
   case "right" :
    for(var i = indexBlock.length - 1; i > -1; i--){
     var y = indexBlock[i][1] + 1;
     if("block" == $("item-" + indexBlock[i][0] + "-" + y).title){
      return true;
     }
    }
    break;
  }
  return false;
 };
 var leftAction = function(){
  if(isLeft() || isBlock("left") || isPause){return false};
  left--;
  for(var i = indexBlock.length - 1; i > -1; i--){
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = "";
  }
  for(var i = indexBlock.length - 1; i > -1; i--){
   indexBlock[i][1] = indexBlock[i][1] - 1;
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = colorList[indexColor];
  }
 };
 var rightAction = function(){
  if(isRight() || isBlock("right") || isPause){return false};
  left++;
  for(var i = indexBlock.length - 1; i > -1; i--){
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = "";
  }
  for(var i = indexBlock.length - 1; i > -1; i--){
   indexBlock[i][1] = indexBlock[i][1] + 1;
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = colorList[indexColor];
  }
 };
 var changeAction = function(){
  if(ranTypeLen == 1 || isPause){return false};
  initType();
  var _dir = (ranTypeDir + 1 == ranTypeLen) ? 0 : ranTypeDir + 1;
  var _tmpBlock = _blockType[ranType][_dir];
  //$("debug").innerHTML = _tmpBlock;
  for(var i = _tmpBlock.length - 1; i > -1; i--){
   if(null == $("item-" + _tmpBlock[i][0] + "-" + _tmpBlock[i][1]) || "block" == $("item-" + _tmpBlock[i][0] + "-" + _tmpBlock[i][1]).title){
    return false;
   }
  }
  for(var i = indexBlock.length - 1; i > -1; i--){
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = "";
  }
  ranTypeDir++;
  if(ranTypeDir == ranTypeLen){
   ranTypeDir = 0;
  }

  indexBlock = _blockType[ranType][ranTypeDir];
  for(var i = 0; i < indexBlock.length; i++){
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = colorList[indexColor];
  }
 };
 var speedAction = function(flag){
  if(isPause){return false};
  clearInterval(_timer);
  _timer = null;
  flag ? _timer = setInterval(function(){downAction();indexLine++;},50) : _timer = setInterval(function(){downAction();indexLine++;},speed);
 };
 var pauseAction = function(){
  clearInterval(_timer);
  _timer = null;
 };
 var startAction = function(){
  if(null == indexBlock){
   getNext();
  };
  for(var i = 0; i < indexBlock.length; i++){
   $("item-" + indexBlock[i][0] + "-" + indexBlock[i][1]).className = colorList[indexColor];
  }
  if(_timer){clearInterval(_timer);_timer = null};
  _timer = setInterval(function(){downAction();indexLine++;},speed);
  createBlock();
 };
 var restartAction = function(){
  _timer = setInterval(function(){downAction();indexLine++;},speed);
 };
 var clearAction = function(){
  for(var i = 19; i > -1; i--){
   var k = 0
   for(var j = 0; j < 10; j++){
    if("block" == $("item-" + i + "-" + j).title){
     k++;
     if(10 == k){
      for(var y = 0; y < 10; y++){
       $("item-" + i + "-" + y).className = "";
       $("item-" + i + "-" + y).title = "";
      }
      for(var x = i - 1; x > -1; x--){
       for(var k = 0; k < 10; k++){
        if("block" == $("item-" + x + "-" + k).title){
         var _class = $("item-" + x + "-" + k).className;
         $("item-" + (x + 1) + "-" + k).className = _class;
         $("item-" + (x + 1) + "-" + k).title = "block";
         $("item-" + x + "-" + k).className = "";
         $("item-" + x + "-" + k).title = "";
        }
       }
      }
      i++;
      $("sn-score").innerHTML = parseInt($("sn-score").innerHTML,10) + 10;
      setStage();
     }
    }
   }
  }
 };
 var initBoard = function(){
  var _arr = [];
  _arr.push("<ul>");
  for(var i = 0,j = 0,k = 0; i < 200; i++){
   _arr.push("<li id='item-"+ k + "-" + j +"'></li>");
   j++;
   if(j > 9){j = 0;k++};
  }
  _arr.push("</ul>");
  $("game-area").innerHTML = _arr.join("");
  _arr = [];
  _arr.push("<ul>");
  for(var i = 0,j = 0,k = 0; i < 40; i++){
   _arr.push("<li id='next-"+ k + "-" + j +"'></li>");
   j++;
   if(j > 9){j = 0;k++};
  }
  _arr.push("</ul>");
  $("next").innerHTML = _arr.join("");
  document.onkeydown = function(e){
   switch(keyCode(e)){
    case 37 :
     leftAction();
     break;
    case 39 :
     rightAction();
     break;
    case 38 :
     changeAction();
     break;
    case 40 :
     speedAction(true);
     break;
   }
  }
  $("begin").onclick = function(){
   if("Begin" == this.innerHTML){
    if(null == indexBlock){
     startAction();
    }else{
     restartAction();
     isPause = false;
    }
    this.innerHTML = "Pause";
   }else if("Pause" == this.innerHTML){
    pauseAction();
    isPause = true;
    this.innerHTML = "Begin";
   }
  }
  $("restart").onclick = function(){
   clearAction();
   clearInterval(_timer);
   _timer = null;
   indexLine = 0;
   left = 0;
   initType();
   indexBlock = null;
   initBoard();
   createBlock();
   speed = 600;
   $("sn-score").innerHTML = "0";
   $("sn-stage").innerHTML = "1";
   $("begin").innerHTML = "Begin";
   $("debug").innerHTML = "";
  }
  /**//*document.onkeypress = function(e){
   if(40 == keyCode(e)){
    speedAction(true);
   }
  }
  document.onkeyup = function(e){
   switch(keyCode(e)){
    case 40 :
     speedAction();
     break;
   }
  }*/
 };
 var keyCode = function(evt){
  evt = (evt) ? evt : ((window.event) ? window.event : "");
  return evt.keyCode ? evt.keyCode : evt.which;
 };
 return {
  init : initBoard,
  create : createBlock
 };
} )();
Tetris.init();
Tetris.create();
</ script >
</ body >
</ html >