Js版俄罗斯方块游戏

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Js版俄罗斯方块游戏</title>
<script>
window.onload=function()
{
var iLevel=1;
var oWrap=document.getElementById("wrap");
var oScore=document.getElementById("score");
var oPause=document.getElementById("pause");
var oRestart=document.getElementById("restart");
var oLevel=document.getElementById("level");
var oNext=document.getElementById("next");
var oTime=document.getElementById("time");
var oOl=oNext.getElementsByTagName("ol")[0];
var oAlert=document.getElementById("alert");
var oSur=document.getElementById("surrender");
var aLi=[]
var clock=null;
oSur.onclick=function()
{
oAlert.style.display="none";
};
function toDou(iNum)
{
if(iNum<10)
{
return"0"+iNum;
}
else return iNum;
}
var oDate=new Date();
var startTime=oDate.getTime();
clock=setInterval(function(){
var NowTime=new Date().getTime();
var hour=toDou(parseInt((NowTime-startTime)/1000/3600));
var minute=toDou(parseInt((NowTime-startTime)/1000%3600/60));
var second=toDou(parseInt((NowTime-startTime)/1000%3600%60));
oTime.innerHTML=hour+":"+minute+":"+second;
},1000);
oTime.innerHTML="00:00:00";
for(var i=0;i<40;i++)
{
aLi[i]=document.createElement("li");
oOl.appendChild(aLi[i]);
}
function clearNext()
{
for(var i=0;i<aLi.length;i++)
{
aLi[i].className="";
}
}
RussianDiamonds();
function RussianDiamonds()
{
var iRow=18;
var iCol=10;
var arr=[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
var diamond=[];
var aFinishedRow=[];
var aShape=[];
var nowShape=0;
var nextShape=0;
var iScore=0;
var iType=0;
var bRowFinished=true;
var bPause=false;
var bEnd=false;
var bOver=false;
var timer=null;
aShape.push(parseInt(Math.random()*6));
createBoard();
oScore.innerHTML=iScore;
autoDrop();
oPause.onclick=function()
{
if(!bOver)
{
if(bPause)
{
oPause.value="暂停";
bPause=false;
switch(iLevel)
{
case 1:
timer=setInterval(function(){
goDown();
},800);
break;
case 2:
timer=setInterval(function(){
goDown();
},600);
break;
case 3:
timer=setInterval(function(){
goDown();
},400);
break;
}
}
else
{
oPause.value="继续";
bPause=true;
clearInterval(timer);
}
}
};
oRestart.onclick=function()
{
window.location.reload();
};
function goDown()
{
bEnd=false;
for(var i=0;i<4;i++)
{
if(diamond[0][i]==iRow-1)
{
bEnd=true;
}
}
if(!bEnd)
{
for(var i=0;i<4;i++)
{
var belowDiamondCol=diamond[0][i]+1;
if(arr[belowDiamondCol][diamond[1][i]].className=="finished")
{
bEnd=true;
}
}
}
if(bEnd)
{
clearInterval(timer);
for(var i=0;i<iRow;i++)
{
for(var j=0;j<iCol;j++)
{
if(arr[i][j].className=="red")
{
arr[i][j].className="finished";
}
}
}
for(var i=0;i<iRow;i++)
{
bRowFinished=true;
for(var j=0;j<iCol;j++)
{
if(arr[i][j].className!="finished")
{
bRowFinished=false;
}
}
if(bRowFinished)
{
aFinishedRow.push(i);
}
}
while(aFinishedRow.length)
{
for(var i=0;i<aFinishedRow.length;i++)
{
for(var j=0;j<10;j++)
{
arr[aFinishedRow[i]][j].className="";
}
}
for(var i=0;i<aFinishedRow.length;i++)
{
for(var j=aFinishedRow[i]-1;j>=0;j--)
{
for(var h=0;h<iCol;h++)
{
if(arr[j][h].className=="finished")
{
arr[j][h].className="";
arr[j+1][h].className="finished"
}
}
}
}
for(var i=1;i<=aFinishedRow.length;i++)
{
iScore+=i*10;
}
oScore.innerHTML=iScore;
if(iScore>100)
{
iLevel=2;
oLevel.innerHTML=iLevel;
}
if(iScore>200)
{
iLevel=3;
oLevel.innerHTML=iLevel;
}
aFinishedRow.length=0;
}
autoDrop();
}
else
{
for(var i=0;i<4;i++)
{
diamond[0][i]++;
}
clearScreen();
showDiamond();
}
}
function autoDrop()
{
for(var i=0;i<iCol;i++)
{
if(arr[0][i].className=="finished")
{
bOver=true;
}
}
if(bOver)
{
clearInterval(clock);
oAlert.style.display="block";
}
else
{
createDiamond();
switch(iLevel)
{
case 1:
timer=setInterval(function(){
goDown();
},800);
break;
case 2:
timer=setInterval(function(){
goDown();
},600);
break;
case 3:
timer=setInterval(function(){
goDown();
},400);
break;
}
}
}
function createBoard()
{
for(var i=0;i<iRow;i++)
{
for(var j=0;j<iCol;j++)
{
var newDiv=document.createElement("div");
arr[i][j]=newDiv;
oWrap.appendChild(newDiv);
}
}
}
function createDiamond()
{
aShape.push(parseInt(Math.random()*6));
function enoughSpace(aNew)
{
for(var i=0;i<4;i++)
{
if(arr[aNew[0][i]][aNew[1][i]].className=="finished")
{
bOver=true;
}
}
if(!bOver)
{
diamond=aNew;
iType=0;
}
}
nowShape=aShape.shift();
nextShape=aShape[0];
switch(nextShape)
{
case 0:
clearNext();
aLi[14].className="pink";
aLi[15].className="pink";
aLi[24].className="pink";
aLi[25].className="pink";
break;
case 1:
clearNext();
aLi[13].className="pink";
aLi[23].className="pink";
aLi[24].className="pink";
aLi[25].className="pink";
break;
case 2:
clearNext();
aLi[13].className="pink";
aLi[14].className="pink";
aLi[15].className="pink";
aLi[16].className="pink";
break;
case 3:
clearNext();
aLi[14].className="pink";
aLi[23].className="pink";
aLi[24].className="pink";
aLi[25].className="pink";
break;
case 4:
clearNext();
aLi[13].className="pink";
aLi[14].className="pink";
aLi[24].className="pink";
aLi[25].className="pink";
break;
case 5:
clearNext();
aLi[15].className="pink";
aLi[16].className="pink";
aLi[24].className="pink";
aLi[25].className="pink";
break;
}
switch(nowShape)
{
case 0:
enoughSpace([[0,0,1,1],[4,5,4,5]]);
break;
case 1:
enoughSpace([[0,1,1,1],[4,4,5,6]]);
break;
case 2:
enoughSpace([[0,0,0,0],[3,4,5,6]]);
break;
case 3:
enoughSpace([[0,1,1,1],[5,4,5,6]]);
break;
case 4:
enoughSpace([[0,0,1,1],[4,5,5,6]]);
break;
case 5:
enoughSpace([[1,1,0,0],[4,5,5,6]]);
break;
}
showDiamond();
}
function clearScreen()
{
for(var i=0;i<iRow;i++)
{
for(var j=0;j<iCol;j++)
{
if(arr[i][j].className!="finished")
{
arr[i][j].className="";
}
}
}
}
function showDiamond()
{
for(var i=0;i<4;i++)
{
arr[diamond[0][i]][diamond[1][i]].className="red";
}
}
document.onkeydown=function(ev)
{
var oEvent=ev||event;
var bLeftOut=true;
var bRightOut=true;
switch(oEvent.keyCode)
{
case 37:
bLeftOut=false;
for(var i=0;i<4;i++)
{
if(diamond[1][i]==0)
{
bLeftOut=true;
}
else
{
var iLeftDiamond=diamond[1][i]-1;
if(arr[diamond[0][i]][iLeftDiamond].className=="finished")
{
bLeftOut=true;
}
}
}
if(!bLeftOut)
{
for(var i=0;i<4;i++)
{
diamond[1][i]--;
}
}
clearScreen();
showDiamond();
break;
case 38:
switch(nowShape)
{
case 1:
switch(iType)
{
case 0:
var r1=[
diamond[0][0],
diamond[0][1]-1,
diamond[0][2],
diamond[0][3]+1
];
var c1=[
diamond[1][0]+2,
diamond[1][1]+1,
diamond[1][2],
diamond[1][3]-1
];
if(arr[r1[0]][c1[0]].className!="finished"&&
arr[r1[1]][c1[1]].className!="finished"&&
arr[r1[3]][c1[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r1[i];
diamond[1][i]=c1[i];
}
iType=1;
clearScreen();
showDiamond();
}
break;
case 1:
var r2=[
diamond[0][0]+2,
diamond[0][1]+1,
diamond[0][2],
diamond[0][3]-1
];
var c2=[
diamond[1][0],
diamond[1][1]+1,
diamond[1][2],
diamond[1][3]-1
];
if(arr[r2[0]][c2[0]].className!="finished"&&
arr[r2[1]][c2[1]].className!="finished"&&
arr[r2[3]][c2[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r2[i];
diamond[1][i]=c2[i];
}
iType=2;
clearScreen();
showDiamond();
}
break;
case 2:
var r3=[
diamond[0][0],
diamond[0][1]+1,
diamond[0][2],
diamond[0][3]-1
];
var c3=[
diamond[1][0]-2,
diamond[1][1]-1,
diamond[1][2],
diamond[1][3]+1
];
if(arr[r3[0]][c3[0]].className!="finished"&&
arr[r3[1]][c3[1]].className!="finished"&&
arr[r3[3]][c3[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r3[i];
diamond[1][i]=c3[i];
}
iType=3;
clearScreen();
showDiamond();
}
break;
case 3:
var r0=[
diamond[0][0]-2,
diamond[0][1]-1,
diamond[0][2],
diamond[0][3]+1
];
var c0=[
diamond[1][0],
diamond[1][1]-1,
diamond[1][2],
diamond[1][3]+1
];
if(arr[r0[0]][c0[0]].className!="finished"&&
arr[r0[1]][c0[1]].className!="finished"&&
arr[r0[3]][c0[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r0[i];
diamond[1][i]=c0[i];
}
iType=0;
clearScreen();
showDiamond();
}
break;
}
break;
case 2:
switch(iType)
{
case 0:
var r1=[
diamond[0][0]-1,
diamond[0][1],
diamond[0][2]+1,
diamond[0][3]+2
];
var c1=[
diamond[1][0]+1,
diamond[1][1],
diamond[1][2]-1,
diamond[1][3]-2
];
if(arr[r1[0]][c1[0]].className!="finished"&&
arr[r1[2]][c1[2]].className!="finished"&&
arr[r1[3]][c1[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r1[i];
diamond[1][i]=c1[i];
}
iType=1;
clearScreen();
showDiamond();
}
break;
case 1:
var r0=[
diamond[0][0]+1,
diamond[0][1],
diamond[0][2]-1,
diamond[0][3]-2
];
var c0=[
diamond[1][0]-1,
diamond[1][1],
diamond[1][2]+1,
diamond[1][3]+2
];
if(arr[r0[0]][c0[0]].className!="finished"&&
arr[r0[2]][c0[2]].className!="finished"&&
arr[r0[3]][c0[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r0[i];
diamond[1][i]=c0[i];
}
iType=0;
clearScreen();
showDiamond();
}
break;
}
break;
case 3:
switch(iType)
{
case 0:
var r1=[
diamond[0][0]+1,
diamond[0][1]-1,
diamond[0][2],
diamond[0][3]+1
];
var c1=[
diamond[1][0]+1,
diamond[1][1]+1,
diamond[1][2],
diamond[1][3]-1
];
if(arr[r1[0]][c1[0]].className!="finished"&&
arr[r1[1]][c1[1]].className!="finished"&&
arr[r1[3]][c1[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r1[i];
diamond[1][i]=c1[i];
}
iType=1;
clearScreen();
showDiamond();
}
break;
case 1:
var r2=[
diamond[0][0]+1,
diamond[0][1]+1,
diamond[0][2],
diamond[0][3]-1
];
var c2=[
diamond[1][0]-1,
diamond[1][1]+1,
diamond[1][2],
diamond[1][3]-1
];
if(arr[r2[0]][c2[0]].className!="finished"&&
arr[r2[1]][c2[1]].className!="finished"&&
arr[r2[3]][c2[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r2[i];
diamond[1][i]=c2[i];
}
iType=2;
clearScreen();
showDiamond();
}
break;
case 2:
var r3=[
diamond[0][0]-1,
diamond[0][1]+1,
diamond[0][2],
diamond[0][3]-1
];
var c3=[
diamond[1][0]-1,
diamond[1][1]-1,
diamond[1][2],
diamond[1][3]+1
];
if(arr[r3[0]][c3[0]].className!="finished"&&
arr[r3[1]][c3[1]].className!="finished"&&
arr[r3[3]][c3[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r3[i];
diamond[1][i]=c3[i];
}
iType=3;
clearScreen();
showDiamond();
}
break;
case 3:
var r0=[
diamond[0][0]-1,
diamond[0][1]-1,
diamond[0][2],
diamond[0][3]+1
];
var c0=[
diamond[1][0]+1,
diamond[1][1]-1,
diamond[1][2],
diamond[1][3]+1
];
if(arr[r0[0]][c0[0]].className!="finished"&&
arr[r0[1]][c0[1]].className!="finished"&&
arr[r0[3]][c0[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r0[i];
diamond[1][i]=c0[i];
}
iType=0;
clearScreen();
showDiamond();
}
break;
}
break;
case 4:
switch(iType)
{
case 0:
var r1=[
diamond[0][0]-1,
diamond[0][1],
diamond[0][2],
diamond[0][3]-1
];
var c1=[
diamond[1][0]+2,
diamond[1][1],
diamond[1][2],
diamond[1][3]
];
if(arr[r1[0]][c1[0]].className!="finished"&&
arr[r1[3]][c1[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r1[i];
diamond[1][i]=c1[i];
}
iType=1;
clearScreen();
showDiamond();
}
break;
case 1:
var r0=[
diamond[0][0]+1,
diamond[0][1],
diamond[0][2],
diamond[0][3]+1
];
var c0=[
diamond[1][0]-2,
diamond[1][1],
diamond[1][2],
diamond[1][3]
];
if(arr[r0[0]][c0[0]].className!="finished"&&
arr[r0[3]][c0[3]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r0[i];
diamond[1][i]=c0[i];
}
iType=0;
clearScreen();
showDiamond();
}
break;
}
break;
case 5:
switch(iType)
{
case 0:
var r1=[
diamond[0][0]-2,
diamond[0][1],
diamond[0][2],
diamond[0][3]
];
var c1=[
diamond[1][0]+1,
diamond[1][1]+1,
diamond[1][2],
diamond[1][3]
];
if(arr[r1[0]][c1[0]].className!="finished"&&
arr[r1[1]][c1[1]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r1[i];
diamond[1][i]=c1[i];
}
iType=1;
clearScreen();
showDiamond();
}
break;
case 1:
var r0=[
diamond[0][0]+2,
diamond[0][1],
diamond[0][2],
diamond[0][3]
];
var c0=[
diamond[1][0]-1,
diamond[1][1]-1,
diamond[1][2],
diamond[1][3]
];
if(arr[r0[0]][c0[0]].className!="finished"&&
arr[r0[1]][c0[1]].className!="finished"
)
{
for(var i=0;i<4;i++)
{
diamond[0][i]=r0[i];
diamond[1][i]=c0[i];
}
iType=0;
clearScreen();
showDiamond();
}
break;
}
break;
}
break;
case 39:
bLeftOut=false;
for(var i=0;i<4;i++)
{
if(diamond[1][i]==9)
{
bLeftOut=true;
}
else
{
var iRightDiamond=diamond[1][i]+1;
if(arr[diamond[0][i]][iRightDiamond].className=="finished")
{
bLeftOut=true;
}
}
}
if(!bLeftOut)
{
for(var i=0;i<4;i++)
{
diamond[1][i]++;
}
}
clearScreen();
showDiamond();
break;
case 40:
goDown();
break;
}
};
};
};
</script>
<style>
*{margin:0;padding:0;list-style:none;}
body{font-size:24px;font-weight:bold;background:#CCC;}
#wrap{width:300px;overflow:hidden;position:absolute;left:50%;top:10px;margin-left:-240px;background:white;}
#wrap div{float:left;width:28px;height:28px;border:1px solid black;}
#wrap div.red{background:red;}
#wrap div.finished{background:#666;}
#next{width:300px;height:180px;position:absolute;left:50%;top:10px;margin-left:80px;border:1px solid black;background:white;}
#next h1{font-size:24px;height:30px;line-height:30px;}
#next ol li{width:30px;height:30px;float:left;}
#next ol li.pink{background:pink;width:28px;height:28px;border:1px solid black;}
#infor{width:300px;height:150px;position:absolute;left:50%;top:200px;margin-left:80px;border:1px solid black;background:white;}
#infor li{height:50px;padding-left:10px;line-height:50px;}
#operate{width:300px;height:150px;position:absolute;left:50%;top:370px;margin-left:80px;}
#operate li{height:50px;line-height:50px;margin-bottom:20px;}
#pause{float:left;height:48px;width:100px;border:1px solid black;cursor:pointer;text-align:center;font-size:24px;font-weight:bold;}
#restart{position:absolute;left:30px;top:90px;height:48px;width:100px;border:1px solid black;cursor:pointer;text-align:center;font-size:24px;font-weight:bold;}
#alert{width:298px;height:148px;background:white;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;border:1px solid black;display:none;}
#alert p{height:30px;position:absolute;left:20px;top:20px;}
#surrender{position:absolute;left:180px;top:90px;height:48px;width:100px;border:1px solid black;cursor:pointer;text-align:center;font-size:24px;font-weight:bold;}
</style>
</head>
<body>
<div id="wrap"></div>
<div id="next">
<h1>下一个（NEXT）：</h1>
<ol>
</ol>
</div>
<ul id="infor">
<li>当前关卡：<span id="level">1</span></li>
<li>已用时间：<span id="time"></span></li>
<li>当前得分：<span id="score"></span></li>
</ul>
<ul id="operate">
<li><input type="button"id="pause"value="暂停"/></li>
</ul>
<div id="alert">
<p>游戏结束，重新开始？</p>
<input type="button"id="restart"value="好的"/>
<input type="button"id="surrender"value="不了"/>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js版俄罗斯方块游戏

分类

游戏

描述

Js版经典的俄罗斯方块游戏，原生JavaScript技术实现，觉得不错，在此推荐给大家，源码爱好者网页特效栏目有不下5款网页版的JS俄罗斯方块游戏，都是出自不同作者之手，对于学习网页游戏编写思路还是有帮助的，有兴趣的可在网页特效栏目搜...