网上也看到不少自己用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>
posted on 2009-12-30 20:27
jacklau 阅读(262)
评论(1) 编辑 收藏