整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

纯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}

以上就是比较常用的后台代码，基本上在仿制网站的时候都会用到，如果有需要的朋友看到了我的文章可以收藏并转发。仿制网站的文章基本结束了，小编会在以后的文章中涉及一些和网站优化优化的操作，敬请关注。


在线咨询
上一篇：如何解析html标签内容？手写正则表达式？htmlparser模块帮你解决
下一篇：Javascript 将html转成pdf,支持多页哦（html2canvas 和 jsPDF）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 定边县 汉滨区 盐都区 隆尧县 河口瑶族自治县 青岛 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服