俄罗斯方块 - 自己动手小游戏

网上也看到不少自己用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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值