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