网罗一个JS版俄罗斯方块特此分享
时间：2010-05-14
来源：互联网
<HTML> <HEAD> <title>俄罗斯方块</title> <style> <!-- BODY { } .MB { BACKGROUND-COLOR: firebrick; CURSOR: default; HEIGHT: 22px; WIDTH: 22px } .SB { BACKGROUND-COLOR: slategray; CURSOR: default; HEIGHT: 22px; WIDTH: 22px } .BK { BACKGROUND-COLOR: white; CURSOR: default; HEIGHT: 22px; WIDTH: 22px } .GT { BORDER-BOTTOM: deepskyblue thin solid; BORDER-LEFT: deepskyblue thin solid; BORDER-RIGHT: deepskyblue thin solid; BORDER-TOP: deepskyblue thin solid; CURSOR: default } --> </style> <script> <!-- var BX=new Array(4); var BY=new Array(4); var PX=new Array(4); var PY=new Array(4); var mTimer var firstView function beginGame() { gameState=0; speed=1; outTime=1100-speed*100; score=0; if(gameState!=0)return; firstView=true; for(j=0;j<16;j++) for(i=0;i<10;i++) setClass(i,j,"BK"); randBar(); gameState=1; Play.disabled=true; window.clearInterval(mTimer); mTimer=window.setInterval("moveBar()",outTime); } function keyControl() { if(gameState!=1)return; switch(event.keyCode){ case 37:{ //left for(i=0;i<4;i++)if(BX[i]==0)return; for(i=0;i<4;i++)if(getClass(BX[i]-1,BY[i])=="SB")return; for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK"); for(i=0;i<4;i++)BX[i]=BX[i]-1; for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB"); break;} case 38:{ //up var preMBarX=new Array(4); var preMBarY=new Array(4); var cx=Math.round((BX[0]+BX[1]+BX[2]+BX[3])/4); var cy=Math.round((BY[0]+BY[1]+BY[2]+BY[3])/4); for(i=0;i<4;i++){ preMBarX[i]=Math.round(cx-cy+BY[i]); preMBarY[i]=Math.round(cx+cy-BX[i]); if(preMBarX[i]<0 || preMBarX[i]>9 || preMBarY[i]<0 || preMBarY[i]>15)return; if(getClass(preMBarX[i],preMBarY[i])=="SB")return; } for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK"); for(i=0;i<4;i++){ BX[i]=preMBarX[i]; BY[i]=preMBarY[i]; } for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB"); break;} case 39:{ //right for(i=0;i<4;i++)if(BX[i]==9)return; for(i=0;i<4;i++)if(getClass(BX[i]+1,BY[i])=="SB")return; for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK"); for(i=0;i<4;i++)BX[i]=BX[i]+1; for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB"); break;} case 40:{ //down moveBar(); break;} } } function delLine() { for(i=0;i<4;i++)setClass(BX[i],BY[i],"SB"); for(j=0;j<16;j++){ dLine=true; for(i=0;i<9;i++){ if(getClass(i,j)!="SB"){ dLine=false; break; } } if(dLine){ score=score+100; for(k=j;k>0;k--) for(l=0;l<10;l++) setClass(l,k,getClass(l,k-1)); for(l=0;l<10;l++)setClass(l,0,"BK"); } } randBar(); speed=Math.floor(score/3000)+1; outTime=1100-speed*100; scoreBar.innerHTML="Score : " + score; speedBar.innerHTML="Speed : " + speed; window.clearInterval(mTimer); mTimer=window.setInterval("moveBar()",outTime); } function getClass(x,y){return GameBar.children[y].children[x].className;} function setClass(x,y,cName){GameBar.children[y].children[x].className=cName;} function moveBar() { if(gameState!=1)return; dropLine=true; for(i=0;i<4;i++)if(BY[i]==15)dropLine=false; if(dropLine)for(i=0;i<4;i++)if(getClass(BX[i],BY[i]+1)=="SB")dropLine=false; if(!dropLine){ window.clearInterval(mTimer); delLine(); return; } for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK"); for(i=0;i<4;i++)BY[i]=BY[i]+1; for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB"); } function pauseGame() { if(gameState==0)return; if(event.srcElement.value=="Pause"){ gameState=2; event.srcElement.value="Continue"; window.clearInterval(mTimer); } else{ gameState=1; event.srcElement.value="Pause"; mTimer=window.setInterval("moveBar()",outTime); } } function fMnu(){return false;} document.oncontextmenu=fMnu; function preview() { if(previewBar.style.display!="none") previewBar.style.display="none"; else previewBar.style.display="block"; } function replayGame() { if(gameState!=1)return; if(!confirm("真的要重新开始?"))return; gameState=0; window.clearInterval(mTimer); beginGame(); } function randBar() { randNum=Math.floor(Math.random()*20)+1; if(!firstView) for(i=0;i<4;i++){ BX[i]=PX[i]; BY[i]=PY[i]; } switch(randNum){ case 1:{ PX[0]=4; PY[0]=0; PX[1]=4; PY[1]=1; PX[2]=5; PY[2]=1; PX[3]=6; PY[3]=1; break;} case 2:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=4; PY[2]=1; PX[3]=4; PY[3]=2; break;} case 3:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=6; PY[2]=0; PX[3]=6; PY[3]=1; break;} case 4:{ PX[0]=5; PY[0]=0; PX[1]=5; PY[1]=1; PX[2]=5; PY[2]=2; PX[3]=4; PY[3]=2; break;} case 5:{ PX[0]=6; PY[0]=0; PX[1]=6; PY[1]=1; PX[2]=4; PY[2]=1; PX[3]=5; PY[3]=1; break;} case 6:{ PX[0]=4; PY[0]=0; PX[1]=4; PY[1]=1; PX[2]=4; PY[2]=2; PX[3]=5; PY[3]=2; break;} case 7:{ PX[0]=4; PY[0]=0; PX[1]=4; PY[1]=1; PX[2]=5; PY[2]=0; PX[3]=6; PY[3]=0; break;} case 8:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=5; PY[2]=1; PX[3]=5; PY[3]=2; break;} case 9:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=5; PY[2]=1; PX[3]=6; PY[3]=1; break;} case 10:{ PX[0]=5; PY[0]=0; PX[1]=5; PY[1]=1; PX[2]=4; PY[2]=1; PX[3]=4; PY[3]=2; break;} case 11:{ PX[0]=4; PY[0]=1; PX[1]=5; PY[1]=1; PX[2]=5; PY[2]=0; PX[3]=6; PY[3]=0; break;} case 12:{ PX[0]=4; PY[0]=0; PX[1]=4; PY[1]=1; PX[2]=5; PY[2]=1; PX[3]=5; PY[3]=2; break;} case 13:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=6; PY[2]=0; PX[3]=5; PY[3]=1; break;} case 14:{ PX[0]=4; PY[0]=0; PX[1]=4; PY[1]=1; PX[2]=4; PY[2]=2; PX[3]=5; PY[3]=1; break;} case 15:{ PX[0]=5; PY[0]=0; PX[1]=5; PY[1]=1; PX[2]=4; PY[2]=1; PX[3]=6; PY[3]=1; break;} case 16:{ PX[0]=5; PY[0]=0; PX[1]=5; PY[1]=1; PX[2]=5; PY[2]=2; PX[3]=4; PY[3]=1; break;} case 17:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=4; PY[2]=1; PX[3]=5; PY[3]=1; break;} case 18:{ PX[0]=4; PY[0]=0; PX[1]=5; PY[1]=0; PX[2]=4; PY[2]=1; PX[3]=5; PY[3]=1; break;} case 19:{ PX[0]=3; PY[0]=0; PX[1]=4; PY[1]=0; PX[2]=5; PY[2]=0; PX[3]=6; PY[3]=0; break;} case 20:{ PX[0]=5; PY[0]=0; PX[1]=5; PY[1]=1; PX[2]=5; PY[2]=2; PX[3]=5; PY[3]=3; break;} } if(firstView){ firstView=false; randBar(); return; } for(i=0;i<4;i++){ for(j=0;j<4;j++){ previewBar.children[j].children[i].className="BK"; } } for(i=0;i<4;i++)previewBar.children[PY[i]].children[PX[i]-3].className="MB"; for(i=0;i<4;i++){ if(getClass(BX[i],BY[i])!="BK"){ alert("Game Over!"); window.clearInterval(mTimer); Play.disabled=false; gameState=0; return; } } for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB"); } // --> </script> </HEAD> <BODY bgcolor=Black onkeydown="return keyControl();"> <center> <P><b><font color=red>俄罗斯方块</font></b></P> <table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:220px;top:53px;"> <Tbody id=GameBar> <tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr> </tbody> </table> </center> <table style="position:absolute;top=100px;left:50px"> <tr><td id=scoreBar style="color:white">Score : 0</td></tr> <tr><td id=speedBar style="color:white">Speed : 1</td></tr> </table> <table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:570px;top:53px;"> <Tbody id=previewBar> <tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr> </tbody> </table> <table style="position:absolute;left:570px;top:180px;"> <tr><td><input type=button id="Play" style="width:100px" value="Play" onclick="return beginGame();"></td></tr> <tr><td><input type=button id="Pause" style="width:100px" value="Pause" onclick="return pauseGame();"></td></tr> <tr><td><input type=button id="Preview" style="width:100px" value="Preview" onclick="preview();"></td></tr> <tr><td><input type=button id="Replay" style="width:100px" value="Replay" onclick="replayGame();"></td></tr> <tr><td><input type=button id="Quit" style="width:100px" value="Quit" onclick="window.close();"></td></tr> </table> </BODY> </HTML> <script> function unSel() { document.execCommand("Unselect"); window.setTimeout("unSel()",10); } unSel(); window.onunload=rel; function rel() { location.reload(); return false; } </script>
提示：您可以先修改部分代码再运行
兼容IE，FF下好像不行。要是有能人会修改的帮忙修改完善下 谢谢~提示：您可以先修改部分代码再运行
作者: cwq2jxl 发布时间: 2010-05-14
强悍.........
作者: ycq312 发布时间: 2010-05-14
大家不喜欢么 都快沉到大西洋底了- -！赶紧捞起来额~~
作者: cwq2jxl 发布时间: 2010-05-14
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
