Js版俄罗斯方块游戏

2024-09-05 12:21:06

字体：大中小

来源：转载

供稿：网友

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

<!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=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>

上一篇：射击游戏代码

下一篇：再次发JS贪吃蛇代码