整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          純JS編寫打地鼠游戲
          
        
           
          
	
	
          
		
                        
          行效果：
          上代碼（HTML+JS）：
          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="utf-8" />
           <title></title>
           <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
           <script type="text/javascript">
           function $$(idName){
           return document.getElementById(idName);
           }
           </script>
           </head>
           <body>
           <div id="" class="top">
           <table>
           <tr><td>游戲時間</td><td><input type="text" id="inp0" value=""/> 分鐘</td></tr>
           <tr><td>倒計時間</td><td><span id="datetime"></span></td></tr>
           <tr><td>地鼠出現間隔</td><td><input type="text" id="inp1"/> 秒鐘</td></tr>
           <tr><td>停留時間</td><td><input type="text" id="inp2"/> 秒鐘</td></tr>
           <tr><td>得分情況</td><td><span id="grade">0</span> </td></tr>
           <tr><td><input type="button" value="開始游戲" id="st" /></td>
           <td><input type="button" value="退出游戲" id="over" disabled=""/></td></tr>
           </table>
           </div>
           <div id="heads" class="header">
           <span class="mouse1 dd">
           <a id="mouses1" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse2 dd">
           <a id="mouses2" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse3 dd">
           <a id="mouses3" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse4 dd">
           <a id="mouses4" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse5 dd">
           <a id="mouses5" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse6 dd">
           <a id="mouses6" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse7 dd">
           <a id="mouses7" onclick="addGrade()" href="#"></a>
           </span>
           <span class="mouse8 dd">
           <a id="mouses8" onclick="addGrade()" href="#"></a>
           </span>
           <span id="cuizi" class="c">
           </span>
           </div>
           <div class="rule">
           <h2>游戲說明</h2>點擊游戲開始按鈕，在下圖中隨機產生老鼠,老鼠消失前單機老鼠進行打擊， 
           打中一次即可獲得10積分，失敗一次不扣分，趕快行動吧！
           </div>
           <!--背景音樂-->
           <audio id="audio1" controls="controls" loop>
           <source src="mp3/music2.mp3" type="audio/mp3" />
           Your browser does not support the audio element.
           </audio>
           <audio id="audio2"><!--敲擊的聲音-->
           <source src="mp3/music1.mp3" type="audio/mp3" />
           Your browser does not support the audio element.
           </audio>
           <script type="text/javascript">
           var audioa= $$('audio1');
           window.onload=function(){
           audioa.play();
           }
           </script>
           <script type="text/javascript">
           //錘子在div里面跟蹤鼠標移動
           $$("heads").onmousemove=function(e){
           e = e||event;//獲事件對象
           var xx=e.x;
           var yy=e.y;
           $$("cuizi").style.left = xx+"px";
           $$("cuizi").style.top = yy+"px"; 
           }
           var timespace=0;//間隔
           var timestop=0;//停留時間
           var timesdaojishi=1000;
           var jg;
           var daoji;
           var stops;
           //點擊開始按鈕
           $$('st').onclick=function(){
           //禁用開始鍵 和開啟退出游戲
           $$('st').disabled='disabled';
           $$('over').disabled='';
           if(timesdaojishi!=0){
           //倒計時
           var mit=$$('inp0').value;
           mit*=60; 
           daoji= setInterval(function(){
           if(mit>=0){
           $$('datetime').innerHTML='倒計時：'+mit+'秒';
           }else{
           end();
           }
           mit--;
           },timesdaojishi);
           } 
           //時間間隔
           timespace = document.getElementById('inp1').value*1000;
           timestop = document.getElementById('inp2').value*1000;
           //不等于0就繼續
           if(timespace!=0)
           jg = setInterval(mouse,timespace);
           }
           //點擊退出游戲按鈕
           $$('over').onclick=function(){
           end();
           };
           //點擊地鼠加分
           function addGrade(){
           var g=$$('grade').innerHTML;
           $$('grade').innerHTML=parseInt(g)+10;
           //播放敲擊的聲音
           $$('audio2').play();
           //當前的老鼠隱身
           event.target.style.display='none';
           }
           //============================================以下是幫助函數
           //地鼠出現時間
           function mouse(){
           //不等于0就繼續
           if(timestop!=0){
           var dishuNum=['mouses1','mouses2','mouses3','mouses4','mouses5','mouses6','mouses7','mouses8'];
           var sj = parseInt(Math.random()*10%dishuNum.length);
           // alert(sj);
           $$(dishuNum[sj]).style.display='block';
           // alert(timestop);
           function datime() {
           $$(dishuNum[sj]).style.display='none';
           }
           stops=setTimeout(datime, timestop);
           }
           }
           //結束
           function end(){
           //禁用退出游戲鍵 和開啟開始游戲
           $$('over').disabled='disabled';
           $$('st').disabled='';
           $$('inp0').value=0;
           $$('grade').innerHTML=0;
           window.clearInterval(jg);
           window.clearInterval(daoji);
           window.clearTimeout(stops);
           }
           </script>
           </body>
          </html>
          css代碼：
          .top{
           width: 700px;
           margin: 0 auto;
          }
          /**{
           border: 1px solid lightgoldenrodyellow;
          }*/
          .header{
           width: 700px;
           height: 400px;
           margin: 0 auto;
           border: 1px dotted lightsalmon;
           background-image: url(../img/地鼠場地.gif);
           background-color: lightgreen;
          }
          .dd{
           /*display: none;*/
           width: 54px;
           height: 54px;
           /*background-image: url(../img/地鼠.gif);*/
           /*background-position: -159px -130px;*/ 
           display: block;
           /*border: 1px solid red;*/
          }
          .dd a{
           display: none;
           width: 53px;
           height: 53px;
           background-image: url(../img/地鼠.gif);
           background-position: -159px -130px;
           /*border: 1px solid lightgoldenrodyellow;*/
          }
          .mouse1{
           position: relative;
           z-index: 3px;
           left: 315px;
           top: 90px;
          }
          .mouse2{
           position: relative;
           z-index: 3px;
           left: 210px;
           top: 73px;
          }
          .mouse3{
           position: relative;
           z-index: 4px;
           left: 540px;
           top: 25px;
          }
          .mouse4{
           position: relative;
           z-index: 1px;
           left: 53px;
           top: 54px;
          }
          .mouse5{
           position: relative;
           z-index: 1px;
           left: 285px;
           top: -10px;
          }
          .mouse6{
           position: relative;
           z-index: 1px;
           left: 500px;
           top: -76px;
          }
          .mouse7{
           position: relative;
           z-index: 1px;
           left: 173px;
           top: -55px;
          }
          .mouse8{
           position: relative;
           z-index: 1px;
           left: 376px;
           top: -80px;
          }
          .c{
           position: absolute;
           z-index: 1000px;
           top:190px;
           display: block;
           width: 20px;
           height: 20px;
           background-image: url(../img/錘子.gif);
           background-size: 25px;
           background-repeat: no-repeat;
           background-position:-2px -3px;
           border-radius:10px ;
          }
          .rule{
           position: absolute;
           width: 200px;
           z-index: 10px;
           right: 5%;
           top: 0px;
           border: 1px dotted lightcoral;
           text-align: center;
           border-radius: 10px;
           background-color: lightgoldenrodyellow;
          }
          需要的圖片：
          ello,World.
          上線啦！上線啦！
          今天土土給大家分享的是用jquery的click()事件來簡單模擬打地鼠游戲

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
          那讓我們開始吧
          首頁(index.html)
          效果圖
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠</title>
    </head>
	
	<body style="background-image: url(img/index.jpg);">
		<div style="text-align: center;">
			<p style="font-size: 50px;">游戲首頁</p>
			<div>
				<img src="img/timg.gif">
				<a href="first.html" style="text-decoration: none;font-size: 40px;background: red;color: white;">
			      打地鼠
			    </a>
				<img src="img/timg.gif">
			</div>
		</div>
	</body>
</html>
          第一關（first.html）【主要，其余幾關類似。主要改變監聽的時間以及游戲范圍】
          第一關效果圖
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠第一關</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		i=-1;
		$("#yx ,#img").click(function(){
			if($("#cg").html()==20) {//20下就通關
				alert("通關")
				 $(location).attr('href','second.html');  //跳轉到第二關
			}
			$("#img").show();
			var width=new Array("0px","150px","300px","450px");//橫坐標數組
			var height=new Array("0px","150px","300px","450px");//縱坐標數組
			var width1=parseInt(Math.random() * width.length);	//隨機橫坐標
			var height1=parseInt(Math.random() * height.length);	//隨機縱坐標
			$("#img").css("margin-left",width[width1]);//圖像的橫坐標
			$("#img").css("margin-top",height[height1]);//圖像的縱坐標
			i++;//成功次數增加
			$("#cg").html(i);//成功次數刷新
			// 放在點擊事件里面防止未開始游戲就超時
			let currtentTime = new Date().getTime(),//記錄當前時間毫秒數
			     lastTime = new Date().getTime(), //記錄上一次操作的毫秒數
			     diff = 4000;//指定時間
			 $(document).on('mousedown',function(){//指定時間沒有點擊就執行函數
			 	lastTime = new Date().getTime();//記錄上一次操作的毫秒數
			 });
			 let timer = setInterval(function(){ //定時器
			 	currentTime = new Date().getTime();//記錄當前時間毫秒數
			 	if(currentTime - lastTime > diff){//沒有操作的時間與指定時間的比較
					alert("超時，游戲結束") 
					window.location.reload();//刷新頁面
			 	   clearInterval(timer);//清除定時器
				  
			 	}
			 },1000);
			
			})
			
			
	})
	</script>
	</head>
	
	<body>
		<!-- 游戲區域 -->
		<div style="display: flex;margin-top: 82px;margin-left: 87px;">
			<button id="yx"style="background-image: url(img/hb.gif);color: white;">游戲開始</button>
			<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通關)</p>
			<div style="width: 600px;height: 600px;border: 1px solid red;background-image: url(img/first.gif);">
				<img id="img"src="img/2.png" style="display: none;width: 150px;height: 150px;">
			</div>
			<img src="img/fi.gif">
		</div>
	</body>
</html>

          第二關（second.html）
          第二關效果圖
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠第二關</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		i=-1;
		$("#yx ,img").click(function(){
			if($("#cg").html()==20) {
				alert("通關")
				 $(location).attr('href','three.html');  //跳轉到指定目錄，較第一關改變的地方
			}
			$("img").show();
			var width=new Array("0px","150px","300px","450px","600px","750px");//橫坐標數組
      //較第一關改變的地方
			var height=new Array("0px","150px","300px","450px");//縱坐標數組
			var width1=parseInt(Math.random() * width.length);	//隨機橫坐標
			var height1=parseInt(Math.random() * height.length);	//隨機縱坐標
			$("img").css("margin-left",width[width1]);//圖像的橫坐標
			$("img").css("margin-top",height[height1]);//圖像的縱坐標
			i++;//成功次數增加
			$("#cg").html(i);//成功次數刷新
			
			
			let currtentTime = new Date().getTime(),//記錄當前時間毫秒數
			     lastTime = new Date().getTime(), //記錄上一次操作的毫秒數
			     diff = 3000;//指定時間
			 $(document).on('mousedown',function(){//指定時間沒有點擊就執行函數
			 	lastTime = new Date().getTime();//記錄上一次操作的毫秒數
			 });
			 let timer = setInterval(function(){ //定時器
			 	currentTime = new Date().getTime();//記錄當前時間毫秒數
			 	if(currentTime - lastTime > diff){//沒有操作的時間與指定時間的比較
					alert("超時，游戲結束") 
					window.location.reload();
			 	   clearInterval(timer);//清除定時器
				  
			 	}
			 },1000);
			
			})
			
			
	})
	</script>
	</head>
	
	<body>
		<!-- 游戲區域 -->
		<div style="display: flex;margin-top: 82px;margin-left: 87px;" >
			<button id="yx" style="background-image: url(img/2.gif);color: white;">游戲開始</button>
			<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通關)</p>
			<div style="width: 900px;height: 600px;border: 1px solid red;background-image: url(img/2.jpg);">
				//較第一關改變的地方
        <img src="img/3.png" style="display: none;width: 150px;height: 150px;">
			</div>
		</div>
	</body>
</html>

          第三關（three.html）
          第三關效果圖
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠第三關</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		i=-1;
		$("#yx ,img").click(function(){
			if($("#cg").html()==20) {
				alert("通關")
				 $(location).attr('href','four.html');  //跳轉到指定目錄，較第一關改變的地方
			}
			$("img").show();
			var width=new Array("0px","150px","300px","450px","600px","750px","900px","1050px");//橫坐標數組
			//較第一關改變的地方
      var height=new Array("0px","150px","300px","450px");//縱坐標數組
			var width1=parseInt(Math.random() * width.length);	//隨機橫坐標
			var height1=parseInt(Math.random() * height.length);	//隨機縱坐標
			$("img").css("margin-left",width[width1]);//圖像的橫坐標
			$("img").css("margin-top",height[height1]);//圖像的縱坐標
			i++;//成功次數增加
			$("#cg").html(i);//成功次數刷新
			
			
			let currtentTime = new Date().getTime(),//記錄當前時間毫秒數
			     lastTime = new Date().getTime(), //記錄上一次操作的毫秒數
			     diff = 2000;//指定時間
			 $(document).on('mousedown',function(){//指定時間沒有點擊就執行函數
			 	lastTime = new Date().getTime();//記錄上一次操作的毫秒數
			 });
			 let timer = setInterval(function(){ //定時器
			 	currentTime = new Date().getTime();//記錄當前時間毫秒數
			 	if(currentTime - lastTime > diff){//沒有操作的時間與指定時間的比較
					alert("超時，游戲結束") 
					window.location.reload();
			 	   clearInterval(timer);//清除定時器
				  
			 	}
			 },1000);
			
			})
			
			
	})
	</script>
	</head>
	
	<body>
		<!-- 游戲區域 -->
		<div style="display: flex;margin-top: 82px;margin-left: 87px;">
			<button id="yx" style="background-image: url(img/blue.gif);color: white;">游戲開始</button>
			<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通關)</p>
			<div style="width: 1200px;height: 600px;border: 1px solid red;background-image: url(img/3.jpg);">
        //較第一關改變的地方
				<img src="img/4.png" style="display: none;width: 150px;height: 150px;">
			</div>
		</div>
	</body>
</html>

          第四關（four.html）
          第四關效果圖
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠第四關</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		i=-1;
		$("#yx ,img").click(function(){
			if($("#cg").html()==20) {
				if(confirm('全部通關.是否回首頁？')){
				 $(location).attr('href','index.html');  //跳轉到指定目錄，較第一關改變的地方
			}
			}
			$("img").show();
			var width=new Array("0px","150px","300px","450px","600px","750px","900px","1050px","1200px","1350");//橫坐標數組
			//較第一關改變的地方
      var height=new Array("0px","150px","300px","450px");//縱坐標數組
			var width1=parseInt(Math.random() * width.length);	//隨機橫坐標
			var height1=parseInt(Math.random() * height.length);	//隨機縱坐標
			$("img").css("margin-left",width[width1]);//圖像的橫坐標
			$("img").css("margin-top",height[height1]);//圖像的縱坐標
			i++;//成功次數增加
			$("#cg").html(i);//成功次數刷新
			
			
			let currtentTime = new Date().getTime(),//記錄當前時間毫秒數
			     lastTime = new Date().getTime(), //記錄上一次操作的毫秒數
			     diff = 1000;//指定時間
			 $(document).on('mousedown',function(){//指定時間沒有點擊就執行函數
			 	lastTime = new Date().getTime();//記錄上一次操作的毫秒數
			 });
			 let timer = setInterval(function(){ //定時器
			 	currentTime = new Date().getTime();//記錄當前時間毫秒數
			 	if(currentTime - lastTime > diff){//沒有操作的時間與指定時間的比較
					alert("超時，游戲結束") 
					window.location.reload();
			 	   clearInterval(timer);//清除定時器
				  
			 	}
			 },1000);
			
			})
			
			
	})
	</script>
	</head>
	
	<body>
		<!-- 游戲區域 -->
		<div style="display: flex;margin-top: 82px;margin-left: 87px;">
			<button id="yx" style="background-image: url(img/h.gif);color: white;">游戲開始</button>
			<p style="margin-top: 292px;">成功打中<span id="cg">0</span>次(打中20次通關)</p>
			<div style="width: 1500px;height: 600px;border: 1px solid red;background-image: url(img/4.jpg);">
        //較第一關改變的地方
				<img src="img/1.png" style="display: none;width: 150px;height: 150px;">
			</div>
		</div>
	</body>
</html>

          圖片文件（img）
          鏈接：https://pan.baidu.com/s/1bv_n8fpHkCsI9OfrgyHlFA 
          提取碼：0725
          收尾
          完成。
          收工。
          有興趣的同學可以關注微信公眾號三人之一。
          站的一些基本操作步驟在這幾天的文章中已經和大家講過了，希望文章中所講的內容能夠給大家提供幫助，幫助各位朋友成為一名優秀的個人站長。
          個人站長
          今天主要是把仿站是的一些常用性代碼總結在一起，和大家一起分享：
          第一步：確定目標網站并分析網站（頁面種類）
          第二步：本地搭建環境（賬號、數據庫密碼）（非本地數據庫賬號密碼的來源－－空間服務商）
          第三步：替換默認模板
          第四步：本地還原目標網站（css js img路徑）
          第五步：用phpcms標簽替換修改模板（測試）
          常用phpcms標簽:
          1:css路徑 默認：\haha\statics\css (haha文件夾名可以自己設置) 新路徑：\haha\statics\css\haha 
           調用默認路徑：{CSS_PATH} 新路徑：{CSS_PATH}haha
          2:js路徑 默認：\haha\statics\js (haha文件夾名可以自己設置) 新路徑：\haha\statics\js\haha 
           調用默認路徑：{JS_PATH} 新路徑：{JS_PATH}haha
          3:images路徑 默認：\haha\statics\images (haha文件夾名可以自己設置) 新路徑：\haha\statics\images\haha 
           調用默認路徑：{IMG_PATH} 新路徑：{IMG_PATH}haha
          4:后臺登陸地址：http://www.XXXXXX.com/admin.php (網址后+admin.php)
           phpcms默認賬號密碼：phpcms
          5:phpcms調用標題：<title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title>
           phpcms調用標題：<meta name="keywords" content="{$SEO['keyword']}" />
           phpcms調用描述：<meta name="description" content="{$SEO['description']}" />
          6：包含頭部：{template "content","header"}
           包含尾部：{template "content","footer"}
          7：導航代碼調用：
           {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
           <ul class="nav-site">
           <li><a href="{siteurl($siteid)}"><span>首頁</span></a></li>
           {loop $data $r}
           <li><a href="{$r[url]}"><span>{$r[catname]}</span></a></li>
           {/loop}
           </ul>
           {/pc}
          8：欄目列表調用：
           {pc:content action="lists" catid="$catid" order="id" num=""cache="3600"}
           {loop $data $r}
           <a href="{$r[url]}" target="_blank">{$r[title]}</a>
           {/loop}
           {/pc}
          9：縮略圖調用
           {pc:content action="lists" catid="$catid" thumb="1" order="id" num=""cache="3600"}
           {loop $data $r}
           <a href="{$r[url]}" target="_blank">{$r[title]}</a>
           {/loop}
           {/pc}
          10：分頁調用：
           {pc:content action="lists" catid="$catid" thumb="1" order="id" page="$page" num=""cache="3600"}
           {loop $data $r}
           <a href="{$r[url]}" target="_blank">{$r[title]}</a>
           {/loop}
           {/pc}
           <div>{$pages}</div>
          11:面包屑導航:<a href="{siteurl($siteid)}">首頁</a><span> &gt; </span>{catpos($catid)} 正文
          12:當前欄目名稱：{$CAT[catname]}
          13：當前標題調用：{$title}
          14：文章內容：{$content}
          15:當前標題調用：{$description}
          16:網站地址調用：{siteurl($siteid)}
          17：上一篇：<a href="{$previous_page[url]}">{$previous_page[title]}</a>
          下一篇：<a href="{$next_page[url]}">{$next_page[title]}</a>
          18：日期調用：{$inputtime}
          以上就是比較常用的后臺代碼，基本上在仿制網站的時候都會用到，如果有需要的朋友看到了我的文章可以收藏并轉發。仿制網站的文章基本結束了，小編會在以后的文章中涉及一些和網站優化優化的操作，敬請關注。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲国产精品一区二区三区在线观看|
伊人精品视频一区二区三区|
国产成人综合一区精品|
国产福利电影一区二区三区久久老子无码午夜伦不
|
爆乳无码AV一区二区三区
|
中文字幕精品亚洲无线码一区|
国产精品一区二区久久不卡|
三上悠亚亚洲一区高清|
日本高清一区二区三区|
精品免费久久久久国产一区|
亚洲制服丝袜一区二区三区
|
亚洲av一综合av一区|
国产观看精品一区二区三区|
激情综合丝袜美女一区二区
|
亚洲变态另类一区二区三区
|
3D动漫精品啪啪一区二区下载|
精品无码日韩一区二区三区不卡|
人妻少妇久久中文字幕一区二区|
亚洲熟女综合色一区二区三区|
一级毛片完整版免费播放一区|
中文字幕一区二区三区有限公司|
亚洲国产日韩一区高清在线|
夜夜高潮夜夜爽夜夜爱爱一区|
中文字幕在线无码一区二区三区|
国产精品av一区二区三区不卡蜜|
免费一区二区三区|
日本一区二区高清不卡|
国产第一区二区三区在线观看|
国产AV一区二区三区传媒|
日韩精品无码一区二区三区AV|
无码人妻精一区二区三区|
日本激情一区二区三区|
国产在线精品一区二区在线观看|
人成精品视频三区二区一区|
亚洲中文字幕丝袜制服一区
|
国产精品小黄鸭一区二区三区|
亚洲综合一区无码精品|
成人免费观看一区二区|
91亚洲一区二区在线观看不卡|
国模少妇一区二区三区|
国产成人精品视频一区二区不卡|