我写的js俄罗斯方块，求助一下，重新开始游戏如何解决的啊,现在用的是刷新

来源：互联网发布：windows系统编程百度云编辑：程序博客网时间：2024/06/05 09:12
</pre><pre name="code" class="html"></pre><pre name="code" class="html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>els</title><style>*{margin: 0px;padding: 0px;}body{background: #949494;width: 220px;height: 400px;margin:0 auto;}#wrap{width: 200px;padding: 10px;box-shadow: 0 0 10px #000000 inset;margin: 0px auto;border-radius: 5px;position: relative;}#wrap>.mark{position: absolute;top: 0;left: 220px;width: 100px;height: 60px;background: #fff;box-shadow:0 0 20px #000 inset;border-radius: 10px;text-align: center;padding-top: 30px;}#wrap #box{width: 200px;height: 380px;position: absolute;top: 10px;left: 10px;}#wrap i{width: 20px;height: 20px;position: absolute;top: 0;left: 0;background: #FF4040;border-radius: 5px;box-shadow: 0 0 2px #fff inset;}#wrap>.filt{width: 200px;height: 380px;position: absolute;top: 10px;left: 10px;background: rgba(255,255,255,0.2)}#wrap>.filt>span{position: absolute;top: 30%;left: 50%;width: 200px;height:60px;margin-left: -100px;color: #000000;font-weight: bold;font-size: 30px;white-space: nowrap;line-height: 60px;display: none;}#btn{position: absolute;top: 50%;left: 50%;background: #FFE4C4;color: #000;border: none;width: 80px;height: 30px;border-radius: 50%;margin:-15px 0 0 -40px;outline: none;cursor: pointer;}#tb{position: relative;background: #282828;}#tb tr{height: 20px;width: 100%;box-sizing: border-box;}#tb td{width: 20px;height: 20px;position: relative;}#tb tr .tag{background: #FF4040;border-radius: 5px;box-shadow: 0 0 2px #fff inset;}#creat{width: 100px;height: 100px;position: absolute;top: 0px;left: -103px;text-align: center;background: #fff;box-shadow:0 0 20px #000 inset;border-radius: 43px 96px 1px 92px/112px 42px 1px 95px;overflow: hidden;}#creat>div:nth-child(2){width: 200px;height: 1px;position: absolute;left:50%;top:95%;margin-left: -100px;background: none;}#creat>span{color: #CD00CD;}</style><script>window.onload=function(){var oTable=document.getElementById('tb');var aTd=oTable.getElementsByTagName('td');var oBtn=document.getElementById('btn');var oBox=document.getElementById('box');var aI=oBox.getElementsByTagName('i');var oCreat=document.getElementById('creat');var oMark=document.getElementById('mark');var icurr=oTable.tBodies[0].rows[0].cells[0].offsetWidth;//单元格宽高var trLength=oTable.tBodies[0].rows.length;//表格行长度var tdLength=oTable.tBodies[0].rows[0].cells.length;//表格列长度var arrx=[],arry=[],num=null,timer=null,newImg=null,oldImg=null,left=false,right=false,x=tdLength/2,y=-2,mark=0;var time=1000;//图片生成function imgs(){var img=[];num=rNum(0,6);switch(num){case 0:img[0]={'x':x-2,'y':y};img[1]={'x':x-1,'y':y};img[2]={'x':x,'y':y};img[3]={'x':x+1,'y':y};break;case 1:img[0]={'x':x-1,'y':y};img[1]={'x':x,'y':y};img[2]={'x':x+1,'y':y};img[3]={'x':x+1,'y':y-1};break;case 2:img[0]={'x':x-1,'y':y};img[1]={'x':x,'y':y};img[2]={'x':x+1,'y':y};img[3]={'x':x-1,'y':y-1};break;case 3:img[0]={'x':x-1,'y':y};img[1]={'x':x,'y':y};img[2]={'x':x+1,'y':y};img[3]={'x':x,'y':y-1};break;case 4:img[0]={'x':x,'y':y-1};img[1]={'x':x,'y':y};img[2]={'x':x-1,'y':y};img[3]={'x':x-1,'y':y+1};break;case 5:img[0]={'x':x-1,'y':y-1};img[1]={'x':x-1,'y':y};img[2]={'x':x,'y':y};img[3]={'x':x,'y':y+1};break;case 6:img[0]={'x':x-1,'y':y};img[1]={'x':x-1,'y':y-1};img[2]={'x':x,'y':y-1};img[3]={'x':x,'y':y};break;}return img;}oBtn.onclick=function(){oldImg=imgs();this.style.display='none';this.parentNode.style.display='none';document.onkeydown=function(ev){//键盘按下var ev=ev||event;switch(ev.keyCode){case 38:rotate();break;case 37:left=true;aboutLeft();break;case 39:right=true;aboutRight();break;case 40:verticals();break;}}document.onkeyup=function(ev){//键盘抬起var ev=ev||event;switch(ev.keyCode){case 37:left=false;break;case 39:right=false;break;case 40:vertical();break;}}point();create();//生成图像vertical();//垂直运动}function point(){//提示框生成图形removeElement(oCreat.children[1]);//清除上一个提示图形newImg=imgs();for(var i=0;i<newImg.length;i++){var di=document.createElement('i');//创建节点di.style.left=newImg[i].x*icurr+'px';di.style.top=newImg[i].y*icurr+'px';oCreat.children[1].appendChild(di);}setTimeout(function(){oldImg=newImg;//提示框预判处理},30);}//游戏区创建节点生成图形function create(){for(var i=0;i<oldImg.length;i++){//放置图像var ai=document.createElement('i');//创建节点ai.style.left=oldImg[i].x*icurr+'px';ai.style.top=oldImg[i].y*icurr+'px';ai.indexX=oldImg[i].x;ai.indexY=oldImg[i].y;//记录旋转中心点oBox.appendChild(ai);//插入节点}}//垂直运动function vertical(){clearInterval(timer);timer=setInterval(function(){impact();//垂直的碰撞判断for(var i=0;i<aI.length;i++){aI[i].style.top=aI[i].offsetTop+icurr+'px';arry[i]=aI[i].offsetTop;//存放当前位置arrx[i]=aI[i].offsetLeft;}},time);}function verticals(){//下键加速clearInterval(timer);timer=setInterval(function(){impact();//垂直的碰撞判断for(var i=0;i<aI.length;i++){aI[i].style.top=aI[i].offsetTop+icurr+'px';arry[i]=aI[i].offsetTop;//存放当前位置arrx[i]=aI[i].offsetLeft;}},30);}//左右运动function aboutLeft(){aboutL();//左右的碰撞判断if(left){for(var i=0;i<aI.length;i++){aI[i].style.left=aI[i].offsetLeft-icurr+'px';arry[i]=aI[i].offsetTop;//存放当前位置arrx[i]=aI[i].offsetLeft;}}}function aboutRight(){aboutL();//左右的碰撞判断if(right){for(var i=0;i<aI.length;i++){aI[i].style.left=aI[i].offsetLeft+icurr+'px';arry[i]=aI[i].offsetTop;//存放当前位置arrx[i]=aI[i].offsetLeft;}}}//触底执行事件function botm(){for(var j=0;j<aI.length;j++){if(aI[j].offsetTop<=0){//游戏结束判断reloadPage();//刷新}oTable.tBodies[0].rows[aI[j].offsetTop/icurr].cells[aI[j].offsetLeft/icurr].className='tag';//表格上色}removeElement(oBox);//删除oBox子元素removeTr();//清除整行}//触底清行function removeTr(){for(var i=0;i<trLength;i++){var sn=0;for(var z=0;z<tdLength;z++){//计算每行有填色td的个数if(oTable.tBodies[0].rows[i].cells[z].className=='tag'){sn++;if(sn==tdLength){oTable.tBodies[0].removeChild(oTable.tBodies[0].rows[i]);mark++;oMark.innerHTML=mark;createTr();//增行}}}}}//增行function createTr(){var oTr=document.createElement('tr');for(var i=0;i<tdLength;i++){aTd=document.createElement('td');oTr.appendChild(aTd);}oTable.tBodies[0].insertBefore(oTr,oTable.tBodies[0].children[0]);}//左右边界和左右运动碰撞function aboutL(){for(var i=0;i<aI.length;i++){var nowW=aI[i].offsetLeft/icurr;//当前列var nowT=aI[i].offsetTop/icurr;//当前行nowW<=0&&(left=false);nowW>=tdLength-1&&(right=false);//到达边界键盘控制if(nowW>0&&nowT>0){oTable.tBodies[0].rows[nowT].cells[nowW-1].className=='tag'&&(left=false);//方块碰撞控制if(nowW<tdLength-1){oTable.tBodies[0].rows[nowT].cells[nowW+1].className=='tag'&&(right=false);}}}}//图行碰撞,包括触底判断function impact(){for(var i=0;i<aI.length;i++){var nowT=aI[i].offsetTop/icurr;//当前行var nowW=aI[i].offsetLeft/icurr;//当前列if(nowT>=0&&nowW>=0){if(!oTable.tBodies[0].rows[nowT+1]){//当前行的下一行有无trclearInterval(timer);botm();//触底执行point();//预提示框create();//游戏区vertical();//下落}else if(oTable.tBodies[0].rows[nowT+1].cells[nowW].className=='tag'){//当前行的下一行的tr有无填充clearInterval(timer);botm();point();create();vertical();}}}}//上键旋转function rotate(){var arrl=[],arrt=[];var x1=center().offsetLeft;//中心点位置var y1=center().offsetTop;for(var i=0;i<aI.length;i++){var x2=aI[i].offsetLeft;var y2=aI[i].offsetTop;var xx=x1-y1+y2;var yy=x1+y1-x2;//旋转公式if(xx<0||xx>(tdLength-1)*icurr||yy>(trLength-1)*icurr){//边界旋转问题解决for(var j=0;j<aI.length;j++){//这里不重新给位置方块会变形aI[j].style.left=arrx[j]+'px';aI[j].style.top=arry[j]+'px';}return false;}else if(xx>=0&&yy>=0){<span style="font-family: Arial, Helvetica, sans-serif;">//方块之间旋转碰撞问题解决</span>if(oTable.tBodies[0].rows[yy/icurr].cells[xx/icurr].className=='tag'){for(var j=0;j<aI.length;j++){//这里不重新给位置方块会变形aI[j].style.left=arrx[j]+'px';aI[j].style.top=arry[j]+'px';}return false;}}for(var j=0;j<aI.length;j++){arrl.push(aI[j].offsetLeft);//存放旋转之前的位置arrt.push(aI[j].offsetTop);}del(arrl);del(arrt);//去重if(arrl.length==2){//判断图形是不是田，是则终止循环if(arrt.length==2){return false;}}aI[i].style.left=xx+'px';aI[i].style.top=yy+'px';}}//寻找旋转中心点function center(){var obj=aI[0];for(var i=0;i<aI.length;i++){if(aI[i].indexX==x){aI[i].indexY==y&&(obj=aI[i]);}}return obj;}};//移除节点function removeElement(obj){var childs=obj.children;for(var i=childs.length-1;i>=0;i--){obj.removeChild(childs[i]);}}//随机数生成function rNum(x,y){return Math.round(Math.random()*(y-x)+x);}//数组去重function del(arr){for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){if(arr[i]==arr[j]){arr.splice(j,1);j--;}}}}function reloadPage(){window.location.reload();}</script></head><body><div id="wrap"><div class="mark"><p>当前分数</p><span id="mark">0</span></div><table id="tb" width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table><div id="box"></div><div id="creat"><span>下一波</span><div></div></div><div class="filt"><button id="btn">开始游戏</button><span>游戏结束！！！</span></div></div></body></html>
0 0