制作一个小游戏 俄罗斯方块代码
2013-03-14 20:09
471 查看
<html>
<head>
<title>俄罗斯方块</title>
<script>
var rows=20,cols=14;
//行数列数
var downId=null;
//向下ID
var squareFix="down";
//方块方向
var squareNum;
//方块编号
var square=new Array();
//方块坐标
var nextSquareNum;
//下一方块编号
//创建表格
function CreateTable()
{
var table="<table border=1>";
table+="<tr>";
table+="<td>";
table+="<table bgColor='black'>";
for(i=1;i<=rows;i++)
{
table+="<tr>";
for(j=1;j<=cols;j++)
{
table+="<td bgColor='black' width='20' id="+i+"_"+j+"> </td>";
}
table+="</tr>";
}
table+="</table>";
table+="</td>";
table+="<td align='center' bgColor='black'>";
table+="<table>";
for(l=1;l<=13;l++)
{
table+="<tr>";
for(j=1;j<=6;j++)
{
if(l>8&&l<=10&&j==1)
{
if(l==9)
table+="<td bgColor='#FFFFFF' colspan='6' width='20' id="+l+"|"+j+">行</td>";
if(l==10)
table+="<td bgColor='#FFFFFF' colspan='6' width='20' id="+l+"|"+j+">列</td>";
}
else if((l>0&&l<9)||(l>10&&l<=rows))
table+="<td bgColor='black' width='20' id="+l+"|"+j+"> </td>";
}
table+="</tr>";
}
table+="</table>";
table+="<p><input type='button' value='开始游戏' onclick='Play()'></p>";
table+="<input type='button' value='暂停游戏' onclick='clearInterval("+downId+")'>";
table+="</td>";
table+="</tr>";
table+="</table>";
document.getElementById('tab').innerHTML=table;
}
//初始化当前方块
function InitSquare()
{
switch(squareNum)
{
//□
//■
//■
//■
case 1:
square[0]="1_7";
square[1]="2_7";
square[2]="3_7";
square[3]="4_7";
break;
//□
//■
//■■
case 2:
square[0]="1_7";
square[1]="2_7";
square[2]="3_7";
square[3]="3_8";
break;
// □
// ■
//■■
case 3:
square[0]="1_7";
square[1]="2_7";
square[2]="3_7";
square[3]="3_6";
break;
//□■
// ■■
case 4:
square[0]="1_7";
square[1]="1_8";
square[2]="2_8";
square[3]="2_9";
break;
// □■
//■■
case 5:
square[0]="1_7";
square[1]="1_8";
square[2]="2_6";
square[3]="2_7";
break;
//□■
//■■
case 6:
square[0]="1_7";
square[1]="1_8";
square[2]="2_7";
square[3]="2_8";
break;
//□■■
// ■
case 7:
square[0]="1_6";
square[1]="1_7";
square[2]="1_8";
square[3]="2_7";
break;
}
}
//显示下一个方块
function ShowNextSquare()
{
for(i=1;i<5;i++)
{
for(j=1;j<7;j++)
{
document.getElementById(i+"|"+j).bgColor='black';
}
}
var color=ChooseColor(nextSquareNum);
switch(nextSquareNum)
{
//□
//■
//■
//■
case 1:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(3+"|"+3).bgColor=color;
document.getElementById(4+"|"+3).bgColor=color;
break;
//□
//■
//■■
case 2:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(3+"|"+3).bgColor=color;
document.getElementById(3+"|"+4).bgColor=color;
break;
// □
// ■
//■■
case 3:
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
document.getElementById(3+"|"+4).bgColor=color;
document.getElementById(3+"|"+3).bgColor=color;
break;
//□■
// ■■
case 4:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
document.getElementById(2+"|"+5).bgColor=color;
break;
// □■
//■■
case 5:
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(1+"|"+5).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
break;
//□■
//■■
case 6:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
break;
//□■■
// ■
case 7:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(1+"|"+5).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
break;
}
}
//选择颜色
function ChooseColor(num)
{
switch(num)
{
case 1:
return "#FF0000";
break;
case 2:
return "#00FF00";
break;
case 3:
return "#0000FF";
break;
case 4:
return "#FFFF00";
break;
case 5:
return "#00FFFF";
break;
case 6:
return "#FF00FF";
break;
case 7:
return "#999999";
break;
}
}
//开始游戏
function Play()
{
squareNum = parseInt(Math.random()*7+1);
//随机生成当前方块编号
nextSquareNum = parseInt(Math.random()*7+1);
//随机生成下一方块编号
ShowNextSquare();
//显示下一方块
InitSquare();
//初始化当前方块坐标
var color =
ChooseColor(squareNum); //选择颜色
for(i=1;i<=20;i++)
//表格恢复到原始颜色
{
for(j=1;j<=14;j++)
{
document.getElementById(i+"_"+j).bgColor='black';
}
}
for(i=0;i<square.length;i++)
//显示当前方块
{
document.getElementById(square[i]).bgColor=color;
}
if(downId!=null)
clearInterval(downId);
downId = setInterval("Down()",600);
}
function Up()
{
for(i=0;i<4;i++)
document.getElementById(square[i]).bgColor='black';
var num = square[0].indexOf("_");
var r = square[0].substring(0,num);
var c = square[0].substring(num+1);
switch(squareNum)//判断方块改变方向
{
//□
//■
//☆
//■
case 1:
if((squareFix=="right"||squareFix=="left")&&(parseInt(r)-2>0&&parseInt(c)-2>0&&parseInt(r)+1<=rows))
{
square[0]=parseInt(r)-2+"_"+(parseInt(c)-2)
square[1]=parseInt(r)-1+"_"+(parseInt(c)-2)
square[2]=r+"_"+(parseInt(c)-2)
square[3]=parseInt(r)+1+"_"+(parseInt(c)-2)
squareFix="down";
}
//■☆■□
else if((squareFix=="up"||squareFix=="down")&&(parseInt(r)+2<=rows&&parseInt(c)+2<=cols&&parseInt(c)-1>=0))
{
square[0]=parseInt(r)+2+"_"+(parseInt(c)+2);
square[1]=parseInt(r)+2+"_"+(parseInt(c)+1)
square[2]=parseInt(r)+2+"_"+c;
square[3]=parseInt(r)+2+"_"+(parseInt(c)-1);
squareFix="left";
}
break;
//□
//■
//■■
case 2:
break;
// □
// ■
//■■
case 3:
break;
//□■
// ■■
case 4:
break;
// □■
//■■
case 5:
break;
//□■■
// ■
case 7:
break;
}
}
//向下移动
function Down()
{
var color=ChooseColor(squareNum);
//检测是否到达最低端或者在其他方块上面
for(i=0;i<square.length;i++)
{
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
r++;
if(r>rows||(document.getElementById(r+"_"+c).bgColor!="#000000"&&r+"_"+c!=square[0]&&r+"_"+c!=square[1]&&r+"_"+c!=square[2]&&r+"_"+c!=square[3]))
{
for(i=0;i<square.length;i++)
{
var count=0;
var num = square[i].indexOf("_");
var r = square[i].substring(0,num);
for(c=1;c<=cols;c++)//判断一行是否都填满了
{
if(document.getElementById(r+"_"+c).bgColor=="#000000")
count++;
}
if(count==0)
{
for(y=r;y>2;y--)
{
for(x=1;x<=cols;x++)
{
document.getElementById(y+"_"+x).bgColor=document.getElementById(y-1+"_"+x).bgColor;
}
}
}
}
squareNum=nextSquareNum;
//下一个方块赋给当前方块
nextSquareNum=parseInt(Math.random()*7+1);
//重新生成下一方块
InitSquare();
//根据当前方块编号生成坐标
ShowNextSquare();
//显示下一方块
if(r<=4)
{
clearInterval(downId);
return;
}
color=ChooseColor(squareNum);
//根据当前方块编号选择颜色
for(i=0;i<square.length;i++)
//显示当前方块
{
document.getElementById(square[i]).bgColor=color;
}
return;
}
}
for(j=0;j<square.length;j++)
{
document.getElementById(square[j]).bgColor="black";
var num=square[j].indexOf("_");
var r=square[j].substring(0,num);
var c=square[j].substring(num+1);
square[j]=++r+"_"+c;
}
for(j=0;j<square.length;j++)
document.getElementById(square[j]).bgColor=color;
squareFix="down";
}
//向左移动
function Left()
{
//检测是否可以向左移动
for(i=0;i<square.length;i++)
{
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
c--;
if(c<1||(document.getElementById(r+"_"+c).bgColor!="#000000"&&r+"_"+c!=square[0]&&r+"_"+c!=square[1]&&r+"_"+c!=square[2]&&r+"_"+c!=square[3]))
return;
}
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor='black';
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
square[i]=r+"_"+(--c);
}
var color = ChooseColor(squareNum);
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor=color;
}
}
//向右移动
function right()
{
//检测是否可以向右移动
for(i=0;i<square.length;i++)
{
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
c++;
if(c>cols||(document.getElementById(r+"_"+c).bgColor!="#000000"&&r+"_"+c!=square[0]&&r+"_"+c!=square[1]&&r+"_"+c!=square[2]&&r+"_"+c!=square[3]))
return;
}
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor='black';
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
square[i]=r+"_"+(++c);
}
var color = ChooseColor(squareNum);
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor=color;
}
}
//键盘方向
function Move()
{
var num = event.keyCode;
if(num!=37&&num!=38&&num!=39&&num!=40)
return;
switch(num)
{
case 37:
Left();
break;
case 38:
Up();
break;
case 39:
right();
break;
case 40:
Down();
break;
}
}
document.onkeydown = Move;
</script>
</head>
<body onLoad="CreateTable()">
<table width="100%" height="100%">
<tr>
<td id="tab" align="center"></td>
</tr>
</table>
</body>
</html>
<head>
<title>俄罗斯方块</title>
<script>
var rows=20,cols=14;
//行数列数
var downId=null;
//向下ID
var squareFix="down";
//方块方向
var squareNum;
//方块编号
var square=new Array();
//方块坐标
var nextSquareNum;
//下一方块编号
//创建表格
function CreateTable()
{
var table="<table border=1>";
table+="<tr>";
table+="<td>";
table+="<table bgColor='black'>";
for(i=1;i<=rows;i++)
{
table+="<tr>";
for(j=1;j<=cols;j++)
{
table+="<td bgColor='black' width='20' id="+i+"_"+j+"> </td>";
}
table+="</tr>";
}
table+="</table>";
table+="</td>";
table+="<td align='center' bgColor='black'>";
table+="<table>";
for(l=1;l<=13;l++)
{
table+="<tr>";
for(j=1;j<=6;j++)
{
if(l>8&&l<=10&&j==1)
{
if(l==9)
table+="<td bgColor='#FFFFFF' colspan='6' width='20' id="+l+"|"+j+">行</td>";
if(l==10)
table+="<td bgColor='#FFFFFF' colspan='6' width='20' id="+l+"|"+j+">列</td>";
}
else if((l>0&&l<9)||(l>10&&l<=rows))
table+="<td bgColor='black' width='20' id="+l+"|"+j+"> </td>";
}
table+="</tr>";
}
table+="</table>";
table+="<p><input type='button' value='开始游戏' onclick='Play()'></p>";
table+="<input type='button' value='暂停游戏' onclick='clearInterval("+downId+")'>";
table+="</td>";
table+="</tr>";
table+="</table>";
document.getElementById('tab').innerHTML=table;
}
//初始化当前方块
function InitSquare()
{
switch(squareNum)
{
//□
//■
//■
//■
case 1:
square[0]="1_7";
square[1]="2_7";
square[2]="3_7";
square[3]="4_7";
break;
//□
//■
//■■
case 2:
square[0]="1_7";
square[1]="2_7";
square[2]="3_7";
square[3]="3_8";
break;
// □
// ■
//■■
case 3:
square[0]="1_7";
square[1]="2_7";
square[2]="3_7";
square[3]="3_6";
break;
//□■
// ■■
case 4:
square[0]="1_7";
square[1]="1_8";
square[2]="2_8";
square[3]="2_9";
break;
// □■
//■■
case 5:
square[0]="1_7";
square[1]="1_8";
square[2]="2_6";
square[3]="2_7";
break;
//□■
//■■
case 6:
square[0]="1_7";
square[1]="1_8";
square[2]="2_7";
square[3]="2_8";
break;
//□■■
// ■
case 7:
square[0]="1_6";
square[1]="1_7";
square[2]="1_8";
square[3]="2_7";
break;
}
}
//显示下一个方块
function ShowNextSquare()
{
for(i=1;i<5;i++)
{
for(j=1;j<7;j++)
{
document.getElementById(i+"|"+j).bgColor='black';
}
}
var color=ChooseColor(nextSquareNum);
switch(nextSquareNum)
{
//□
//■
//■
//■
case 1:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(3+"|"+3).bgColor=color;
document.getElementById(4+"|"+3).bgColor=color;
break;
//□
//■
//■■
case 2:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(3+"|"+3).bgColor=color;
document.getElementById(3+"|"+4).bgColor=color;
break;
// □
// ■
//■■
case 3:
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
document.getElementById(3+"|"+4).bgColor=color;
document.getElementById(3+"|"+3).bgColor=color;
break;
//□■
// ■■
case 4:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
document.getElementById(2+"|"+5).bgColor=color;
break;
// □■
//■■
case 5:
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(1+"|"+5).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
break;
//□■
//■■
case 6:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(2+"|"+3).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
break;
//□■■
// ■
case 7:
document.getElementById(1+"|"+3).bgColor=color;
document.getElementById(1+"|"+4).bgColor=color;
document.getElementById(1+"|"+5).bgColor=color;
document.getElementById(2+"|"+4).bgColor=color;
break;
}
}
//选择颜色
function ChooseColor(num)
{
switch(num)
{
case 1:
return "#FF0000";
break;
case 2:
return "#00FF00";
break;
case 3:
return "#0000FF";
break;
case 4:
return "#FFFF00";
break;
case 5:
return "#00FFFF";
break;
case 6:
return "#FF00FF";
break;
case 7:
return "#999999";
break;
}
}
//开始游戏
function Play()
{
squareNum = parseInt(Math.random()*7+1);
//随机生成当前方块编号
nextSquareNum = parseInt(Math.random()*7+1);
//随机生成下一方块编号
ShowNextSquare();
//显示下一方块
InitSquare();
//初始化当前方块坐标
var color =
ChooseColor(squareNum); //选择颜色
for(i=1;i<=20;i++)
//表格恢复到原始颜色
{
for(j=1;j<=14;j++)
{
document.getElementById(i+"_"+j).bgColor='black';
}
}
for(i=0;i<square.length;i++)
//显示当前方块
{
document.getElementById(square[i]).bgColor=color;
}
if(downId!=null)
clearInterval(downId);
downId = setInterval("Down()",600);
}
function Up()
{
for(i=0;i<4;i++)
document.getElementById(square[i]).bgColor='black';
var num = square[0].indexOf("_");
var r = square[0].substring(0,num);
var c = square[0].substring(num+1);
switch(squareNum)//判断方块改变方向
{
//□
//■
//☆
//■
case 1:
if((squareFix=="right"||squareFix=="left")&&(parseInt(r)-2>0&&parseInt(c)-2>0&&parseInt(r)+1<=rows))
{
square[0]=parseInt(r)-2+"_"+(parseInt(c)-2)
square[1]=parseInt(r)-1+"_"+(parseInt(c)-2)
square[2]=r+"_"+(parseInt(c)-2)
square[3]=parseInt(r)+1+"_"+(parseInt(c)-2)
squareFix="down";
}
//■☆■□
else if((squareFix=="up"||squareFix=="down")&&(parseInt(r)+2<=rows&&parseInt(c)+2<=cols&&parseInt(c)-1>=0))
{
square[0]=parseInt(r)+2+"_"+(parseInt(c)+2);
square[1]=parseInt(r)+2+"_"+(parseInt(c)+1)
square[2]=parseInt(r)+2+"_"+c;
square[3]=parseInt(r)+2+"_"+(parseInt(c)-1);
squareFix="left";
}
break;
//□
//■
//■■
case 2:
break;
// □
// ■
//■■
case 3:
break;
//□■
// ■■
case 4:
break;
// □■
//■■
case 5:
break;
//□■■
// ■
case 7:
break;
}
}
//向下移动
function Down()
{
var color=ChooseColor(squareNum);
//检测是否到达最低端或者在其他方块上面
for(i=0;i<square.length;i++)
{
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
r++;
if(r>rows||(document.getElementById(r+"_"+c).bgColor!="#000000"&&r+"_"+c!=square[0]&&r+"_"+c!=square[1]&&r+"_"+c!=square[2]&&r+"_"+c!=square[3]))
{
for(i=0;i<square.length;i++)
{
var count=0;
var num = square[i].indexOf("_");
var r = square[i].substring(0,num);
for(c=1;c<=cols;c++)//判断一行是否都填满了
{
if(document.getElementById(r+"_"+c).bgColor=="#000000")
count++;
}
if(count==0)
{
for(y=r;y>2;y--)
{
for(x=1;x<=cols;x++)
{
document.getElementById(y+"_"+x).bgColor=document.getElementById(y-1+"_"+x).bgColor;
}
}
}
}
squareNum=nextSquareNum;
//下一个方块赋给当前方块
nextSquareNum=parseInt(Math.random()*7+1);
//重新生成下一方块
InitSquare();
//根据当前方块编号生成坐标
ShowNextSquare();
//显示下一方块
if(r<=4)
{
clearInterval(downId);
return;
}
color=ChooseColor(squareNum);
//根据当前方块编号选择颜色
for(i=0;i<square.length;i++)
//显示当前方块
{
document.getElementById(square[i]).bgColor=color;
}
return;
}
}
for(j=0;j<square.length;j++)
{
document.getElementById(square[j]).bgColor="black";
var num=square[j].indexOf("_");
var r=square[j].substring(0,num);
var c=square[j].substring(num+1);
square[j]=++r+"_"+c;
}
for(j=0;j<square.length;j++)
document.getElementById(square[j]).bgColor=color;
squareFix="down";
}
//向左移动
function Left()
{
//检测是否可以向左移动
for(i=0;i<square.length;i++)
{
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
c--;
if(c<1||(document.getElementById(r+"_"+c).bgColor!="#000000"&&r+"_"+c!=square[0]&&r+"_"+c!=square[1]&&r+"_"+c!=square[2]&&r+"_"+c!=square[3]))
return;
}
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor='black';
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
square[i]=r+"_"+(--c);
}
var color = ChooseColor(squareNum);
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor=color;
}
}
//向右移动
function right()
{
//检测是否可以向右移动
for(i=0;i<square.length;i++)
{
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
c++;
if(c>cols||(document.getElementById(r+"_"+c).bgColor!="#000000"&&r+"_"+c!=square[0]&&r+"_"+c!=square[1]&&r+"_"+c!=square[2]&&r+"_"+c!=square[3]))
return;
}
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor='black';
var num=square[i].indexOf("_");
var r=square[i].substring(0,num);
var c=square[i].substring(num+1);
square[i]=r+"_"+(++c);
}
var color = ChooseColor(squareNum);
for(i=0;i<square.length;i++)
{
document.getElementById(square[i]).bgColor=color;
}
}
//键盘方向
function Move()
{
var num = event.keyCode;
if(num!=37&&num!=38&&num!=39&&num!=40)
return;
switch(num)
{
case 37:
Left();
break;
case 38:
Up();
break;
case 39:
right();
break;
case 40:
Down();
break;
}
}
document.onkeydown = Move;
</script>
</head>
<body onLoad="CreateTable()">
<table width="100%" height="100%">
<tr>
<td id="tab" align="center"></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Unity3d制作一个简单的打开保存对话框-编写核心代码（1）
- 一个贪吃蛇小游戏（17行代码）
- CCMenu位置的一些理解和制作一个中心放大的按钮（无需修改底层代码）
- 用cocos2d 2.1制作一个过河小游戏(3): 船与河岸Sprite设计
- js 计时器,倒计时完整实例代码附效果图 制作一个当前时间的动态时钟
- CCMenu位置的一些理解和制作一个中心放大的按钮（无需修改底层代码）
- javascript+html做一个俄罗斯方块的小游戏
- 50行Python代码制作一个计算器
- 发一个c语言写的俄罗斯方块的代码 [
- 用cocos2d 2.1制作一个过河小游戏(4): 游戏主逻辑BaseLayer设计
- JavaScript用200行代码制作打飞机小游戏实例
- 用VB6写的一个简单俄罗斯方块代码
- 一个简单的猜谜游戏的代码(高级用户界面制作)
- 糊糊的前端学习笔记——25行代码实现一个贪吃蛇小游戏【Day06】
- java代码swing编程 制作一个单选按钮的Frame
- 用scrapy制作一个小程序 !（附代码）
- 用VB6写的一个简单俄罗斯方块代码
- 用CSS制作制作一个照片演示特效代码
- 独家 | 手把手教你用scrapy制作一个小程序 !（附代码）
- 用cocos2d 2.1制作一个过河小游戏(1): 总概