ITjean 2016-09-29 12:23 采纳率: 100%
浏览 1044
已采纳

这游戏运行两次为什么就会出现停止不了

<!DOCTYPE html>





锅打灰太狼
<br> *{<br> margin: 0;<br> padding: 0;<br> list-style: none;<br> }<br> .container{<br> width: 446px;<br> height: 720px;<br> margin: 0 auto;<br> position: relative;<br> }<br> .background{<br> position: absolute;<br> z-index: -100;<br> width: 100%;<br> }<br> .pro{<br> position: absolute;<br> width:251px;<br> height: 24px;<br> border-radius: 20px; <br> left: 88px;<br> top: 92px;<br> background: url(&#39;img/progress.png&#39;) 0 0 no-repeat;<br> background-size: 100%;<br> background-position-x: 0px;<br> }<br> .start{<br> width: 150px;<br> border: 0;<br> border-radius: 30px;<br> background: linear-gradient(#E55C3D,#C50000);<br> margin: 0 auto;<br> font-size: 32px;<br> position: absolute;<br> color: #fff;<br> left: 0;<br> right: 0;<br> margin: 0 auto;<br> top:400px;<br> }<br> .start:hover{<br> background: linear-gradient(#C50000,#E55C3D);<br> }<br> .score{<br> position: absolute;<br> left: 100px;<br> top: 14px;<br> color: #fff;<br> }<br> .over{<br> text-align: center;<br> position: relative;<br> top: 300px;<br> font-weight: bold;<br> display: none;<br> font-size: 50px;<br> text-shadow: 3px 3px 0 #fff;<br> background: -webkit-gradient(linear, 0 0, 0 bottom,);<br> -webkit-background-clip: text;<br> -webkit-text-fill-color: transparent;<br> }<br> .restart{<br> width: 150px;<br> border: 0;<br> border-radius: 30px;<br> background: linear-gradient(#74ACCF,#007DDC);<br> margin: 0 auto;<br> font-size: 32px;<br> position: absolute;<br> color: #fff;<br> left: 0;<br> right: 0;<br> margin: 0 auto;<br> top:400px;<br> display: none;<br> }<br> .restart:hover{<br> background: linear-gradient(#007DDC,#74ACCF);<br> }<br> .rules{<br> border: 0;<br> width: 100%;<br> position: absolute;<br> bottom: 0px;<br> }<br> .rule{<br> position: absolute;<br> width: 100%;<br> height: 500px;<br> text-align: center;<br> background: #000;<br> opacity: 0.8;<br> padding-top: 200px;<br> }<br> .rule p{<br> padding: 20px 0;<br> font-size: 20px;<br> color: #fff;<br> }<br> .rule{<br> padding-bottom: 20px;<br> display: none;<br> position: absolute;<br> z-index: 1000000000000;<br> }<br> a{<br> font-size: 20px;<br> color: red;<br> }<br>



0




开始

GAME OVER


重新开始
游戏规则

游戏规则:


1.游戏时间:60s


2.拼手速,殴打灰太狼+10分


3.殴打小灰灰-10分


[关闭]




<br> var progress=document.querySelector(&#39;.pros&#39;);<br> var start=document.querySelector(&#39;.start&#39;);<br> var pros=document.getElementsByClassName(&#39;pro&#39;)[0];<br> var over=document.getElementsByClassName(&#39;over&#39;)[0];<br> var restart=document.getElementsByClassName(&#39;restart&#39;)[0];<br> var container=document.querySelector(&#39;.container&#39;);<br> var scores=document.querySelector(&#39;h1&#39;);<br> var s=0;<br> var rules=document.querySelector(&#39;.rules&#39;);<br> var rule=document.querySelector(&#39;.rule&#39;);<br> var close=document.querySelector(&#39;a&#39;);<br> // 开始游戏<br> start.onclick=function(){<br> // 按钮移除<br> this.remove();<br> // 进度条<br> var proLeft=0;<br> var timer_pro=setInterval(function(){<br> proLeft-=0.045;<br> pros.style.backgroundPositionX=proLeft+&#39;px&#39;;<br> if (proLeft&lt;=-270) {<br> clearInterval(timer_pro);<br> clearInterval(circle);<br> over.style.display=&#39;block&#39;;<br> restart.style.display=&#39;block&#39;;<br> }<br> },5)<br> star();// 第一次游戏的函数<br> res(); // 调用重新开始的函数<br> }</p> <pre><code>// 游戏开始函数 function star(){ circle=setInterval(function(){ //灰太狼随机出现的位置 var arrPos = [ {left:&quot;154px&quot;,top:&quot;190px&quot;},//第二个洞 {left:&quot;37px&quot;,top:&quot;252px&quot;},//第一个洞 {left:&quot;36px&quot;,top:&quot;342px&quot;},//第四个洞 {left:&quot;57px&quot;,top:&quot;442px&quot;},//第七个洞 {left:&quot;184px&quot;,top:&quot;412px&quot;},//第八个洞 {left:&quot;308px&quot;,top:&quot;443px&quot;},//第九个洞 {left:&quot;298px&quot;,top:&quot;326px&quot;},//第六个洞 {left:&quot;280px&quot;,top:&quot;228px&quot;},//第三个洞 {left:&quot;163px&quot;,top:&quot;300px&quot;}//第五个洞 ]; // 将图片存进数组 var wolf_1=[&#39;img/h0.png&#39;,&#39;img/h1.png&#39;,&#39;img/h2.png&#39;,&#39;img/h3.png&#39;,&#39;img/h4.png&#39;,&#39;img/h5.png&#39;,&#39;img/h6.png&#39;,&#39;img/h7.png&#39;,&#39;img/h8.png&#39;,&#39;img/h9.png&#39;]; var wolf_2=[&#39;img/x0.png&#39;,&#39;img/x1.png&#39;,&#39;img/x2.png&#39;,&#39;img/x3.png&#39;,&#39;img/x4.png&#39;,&#39;img/x5.png&#39;,&#39;img/x6.png&#39;,&#39;img/x7.png&#39;,&#39;img/x8.png&#39;,&#39;img/x9.png&#39;]; var appearWolf=[&#39;img/h0.png&#39;,&#39;img/x0.png&#39;]; var newImg=document.createElement(&#39;img&#39;); container.appendChild(newImg); var wfLocation=rand(0,8); // 狼的随机位置 newImg.style.left=arrPos[wfLocation].left; newImg.style.top=arrPos[wfLocation].top; newImg.style.position=&#39;relative&#39;; var X=rand(0,2); // 选择灰太狼还是小灰灰 if (X&lt;2){ X=&#39;h&#39;; }else{ X=&#39;x&#39;; } var y=0; newImg.style.display=&#39;block&#39;; var appear0=setInterval(function(){ newImg.src=&#39;img/&#39;+X+y+&#39;.png&#39;; y++; var indexs=0; newImg.onclick=function(){ indexs++; if (indexs&gt;1) { return false; // 鼠标只能点击1次 而不能无限点 } y=5; for (var i=0;i&lt;4;i++) { y++; newImg.src=wolf_1[y]; if(y&gt;9){ y--; } } if (X==&#39;h&#39;) { s+=10; scores.innerHTML=s; }else if (X==&#39;x&#39;){ s-=10; if (s&lt;=0) { s=0; } scores.innerHTML=s; } } if (y&gt;5) { clearInterval(appear0); setTimeout(function(){ y=5; var appear1=setInterval(function(){ newImg.src=&#39;img/&#39;+X+y+&#39;.png&#39;; console.log(y); y--; if (y&lt;0) { clearInterval(appear1); // newImg.style.display=&#39;none&#39;; newImg.remove(); } },50) },stay) } },50); },secs) s=0; scores.innerHTML=s; } // 重新开始函数 function res(){ restart.onclick=function(){ // 按钮移除 restart.style.display=&#39;none&#39;; over.style.display=&#39;none&#39;; var proLeft=0; var timer_pro=setInterval(function(){ proLeft-=0.045; pros.style.backgroundPositionX=proLeft+&#39;px&#39;; if (proLeft&lt;=-270) { clearInterval(timer_pro); over.style.display=&#39;block&#39;; restart.style.display=&#39;block&#39;; } },5) star(); } </code></pre> <p>}<br> rules.onclick=function(){<br> rule.style.display=&#39;block&#39;;<br> }<br> close.onclick=function(){<br> rule.style.display=&#39;none&#39;;<br> }</p> <p>// 随机函数<br> function rand(min,max){<br> return Math.round(Math.random()*(max-min)+min);<br> }<br> var secs=rand(1200,1500);<br> var stay=rand(150,250);<br>
  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥30 AndroidBench&eMMC内存测试速度&Android
      • ¥15 W10 文件共享失败 怎么解决
      • ¥20 b站私信完整导出的方法
      • ¥15 边界图中的x、y轴解释
      • ¥30 如何用matlab求解复杂方程
      • ¥15 VUE TS中怎么调用第三方js
      • ¥15 Activiti如何将值传入textValue
      • ¥20 在linux里安装lummps时 在make mpi里找不到rpc
      • ¥25 python先到先得调度和轮询调度
      • ¥15 SDK Manager闪退