打地鼠游戏

于 2019-03-10 15:55:12 发布
阅读量201 收藏
点赞数
分类专栏： 前端 文章标签： css html JavaScript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43226394/article/details/88379526
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打地鼠</title>

<style type="text/css">
<!--设置光标的图片路径为'images/mouse.ani'-->
img{cursor:url('images/mouse.ani');}
</style>

<script language="JavaScript">
// 定义定时执行程序的变量
var no1,no2,no3,no4;
// 声明游戏时间变量、地鼠出现的时间间隔、停留时间变量
var gameTime,spaceTime,stayTime;
// 声明开始按钮、结束按钮
var button1,button2;
// 声明倒计时间变量
var time;
// 声明地鼠总个数
var sum=0;
// 声明打中了的变量
var mouse=0;


// 开始游戏，执行init方法并设置 每隔1秒钟执行showTime和showImage方法
function onGame(){
	init();
	no1=window.setInterval("showTime()",1000);	
	no2=setInterval("showImage()",1000);
}


// 在输入框输入值后的初始化方法，主要是设置各个输入框和按钮的禁用和不禁用
function init(){
	// 得到id为gameTime的引用
	gameTime=document.getElementById("gameTime");
	// 得到id为spaceTime的引用
	spaceTime=document.getElementById("spaceTime");
	// 得到id为stayTime的引用
	stayTime=document.getElementById("stayTime");
	// 禁用gametime输入框
	gameTime.disabled=true;
	// 禁用spaceTime输入框
	spaceTime.disabled=true;
	// 禁用stayTime输入框
	stayTime.disabled=true;
	// 得到id为button1的引用
	button1=document.getElementById("button1"); 
	// 得到id为button1的引用
	button2=document.getElementById("button2");
	// 禁用button1按钮
	button1.disabled=true;
	// 不禁用button2按钮
	button2.disabled=false;
	// 把输入的游戏时间转换为整数后赋值给倒计时
	time=parseInt(gameTime.value)*60;
	// 设置地鼠总数变量为0
	sum=0;
	// 打中的地鼠个数为0
	mouse=0;
}   
	

// 倒计时自减1，如果小于0就调用esc方法关闭游戏，
function showTime(){  
	// 获得倒计时时间，并输出显示
	document.getElementById("time").innerHTML=time;
	time-=1;
	if(time<=0){
		esc();
	}
	// 输出得分情况
	var str="打中："+mouse+"只  漏掉："+(sum-mouse)+"只"+"<br>"+" 总分："+sum*100+"  得分："+(mouse*100-(sum-mouse)*100);
	// 获得得分，并输出显示
	document.getElementById("score").innerHTML=str;
}

//+-----------------------------------------------
//| images/00.jpg为原始背景图片、images/01.jpg为地鼠图片、images/02.jpg为击中地鼠图片
//+-----------------------------------------------

// 随机把某个单元格的背景图片更换为地鼠图片
function showImage(){  
	 // 获得名字为image的图像集合
     var images=document.getElementsByName("image");
	 // 获得随机数并转型为整数，赋值给index
     var index=Math.floor(Math.random()*25);
	 // 将得到的随机整数当做图像集合的下标得到对应的图像，并且赋给它新的图片路径，更改图片为地鼠
     images[index].src="images/01.jpg";
	 // 每更改图片为地鼠图片1次，地鼠总数自增1个
	 sum+=1;
	 // 把获得的随机整数和页面输入的停留时间当做参数写入stopImage()方法，再当做参数放入定时执行程序的settime()方法，最后赋值给no3变量
	 no3=setTimeout("stopImage("+index+")",parseInt(stayTime.value)*1000);
}    


// 把打中地鼠的图片更换为原始背景图片，参数为产生的随机整数
function stopImage(index){
     
	 document.images[index].src="images/00.jpg";
	
}  


// 当鼠标点击结束后，把打击的地鼠或击中的地鼠图片更换为原始的背景图片
function leaveImage(o){
     
	 o.src="images/00.jpg";
	
}


// 当击中地鼠时，为防止击中的图片错误，所以先截取到的打击地鼠的图片名是否等于"01.jpg"，如果是就赋值给它一个新的路径images/02.jpg（击中地鼠的图片），同时击中地鼠的次数mouse加1，最后每过0.5秒再把路径改为"images/00.jpg"，更改为原始的背景图片;
function clickMouse(o){
	  // 截取
      var str=o.src.substr(o.src.length-6,6);
	  if(str=="01.jpg"){
	   o.src="images/02.jpg";
	   mouse+=1;
	   
	   no4=setInterval("leaveImage(o)",500);
	  }
}
// 关闭游戏
function esc(){
	// 关闭no1计时器
	window.clearInterval(no1);
	window.clearInterval(no2);
	window.clearTimeout(no3);
	window.clearInterval(no4);
	// 不禁用gameTime输入框
	gameTime.disabled=false;
	spaceTime.disabled=false;
	stayTime.disabled=false;
	// 不禁用button1按钮
	button1.disabled=false;
	// 获得name为image的图像集合
	var images=document.getElementsByName("image");
	// 遍历赋值所有的图片路径为："images/00.jpg"，更改为原始的背景图片
	for(var i=0;i<images.length;i++){
		images[i].src="images/00.jpg";
	}
}
</script>
</head>
<!---->
<!--设置背景图片-->
<body background="images/bg.jpg" >
<!--设置背景音乐-->
<bgsound  src="images/bgsound.mp3" loop="-1">
<!--设置表位置居中-->
<table align="center">
	<tr>
		<td><font color="#0066FF">游戏说明:</font></td>
	</tr>
	<tr>
		<td>
			<font color="#0066FF">点击“开始游戏”按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，<br>打中一次即可获得100的积分，没有打中老鼠，扣取100积分。快快行动吧，考验您的<br>反应和眼力！</font>
		</td>
	</tr>
    <!--设置改行靠右对齐-->
	<tr align="right">
		<td><font color="#0066FF">作者：xxx<br></font></td>
	</tr>
</table>

<br />
<br />
<!--设置该表居中对齐，单元格间距为5-->
<table align="center" cellspacing="5">
	<tr>
		<td>
        	<!--设置单元格间距为3-->
			<table cellspacing="3">
				<tr>
					<td>--游戏时间:--</td>
                    <!--设置该输入框类型为文本类型，宽度为6px，id为gameTime,默认值为1分钟-->
					<td><input type="text" width="6" id="gameTime" value="1"/> 分钟</td>
				</tr>
				<tr>
					<td>--倒计时间:--</td>
					<td><div id="time"></div></td>
				</tr>
				<tr>
					<td>--地鼠出现间隔:--</td>
					<td><input type="text" width="6" id="spaceTime" value="1"/> 秒钟</td>
				</tr>
				<tr>
					<td>--停留时间:--</td>
					<td><input type="text" width="6" id="stayTime" value="1"/> 秒钟</td>
				</tr>
				<tr>
					<td>--得分情况:--</td>
					<td><div id="score"></div></td>
				</tr>
                <!--设置改行位置居中-->
				<tr align="center">
                	<!--设置该单元格类型为button，id为button1，单击的调用的是开始游戏方法onGame-->
					<td ><input type="button" value="开始游戏" id="button1" onclick="onGame()"/></td>
					<!--设置该单元格类型为button，id为button2，单击的调用的是结束游戏方法esc-->
                    <td><input type="button" value="退出游戏" id="button2" disabled onclick="esc()"/></td>
				</tr>
			</table>
		</td>
		<td>
        	<!--设置该表边框宽度为1，单元格间距为3，背景颜色为白色-->
			<table border="1"  cellspacing="3" bgcolor="white">
				<tr>
                	<!--设置单元格中的内容为一张图片-->
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
				</tr>
				<tr>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
				</tr>
				<tr>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
				</tr>
				<tr>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
				</tr>
				<tr>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
					<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</body>
</html>
weixin_43226394
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android游戏源码带道具购买的打地鼠游戏
07-29
这是一款基于安卓的打地鼠游戏，界面简洁，有level模式打地鼠和无尽模式打地鼠两种游戏模式，并可以通过商店使用金币进行道具的购买，道具可以让你更容易通关；同时金币可以在游戏通关的时候获取。工程中有较为详细的注释说明，可以供你参考学习。项目中使用了自定义动画和数据库操作。默认使用GBK编码，编译版本为4.2.2,之前也介绍过几个免费的打地鼠游戏源码，感兴趣的可以在首页搜索打地鼠
一个由java实现的打地鼠游戏
热门推荐
阿骏的专栏
03-06 2万+
注释很明了，直接就上代码的哈！ 打地鼠游戏“` package test;import java.awt.EventQueue; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent;import javax.swing.ImageIcon; import javax.swing.JFrame; impor
简易无限打地鼠 课上小作业
12-23
简单的打地鼠代码，无限地鼠，没有积分
深入理解Android5源代码
05-09
深入理解Android5源代码
打地鼠游戏源代码+素材
05-30
打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏...
labview游戏 打地鼠
05-13
labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview游戏 打地鼠 labview...
android实现打地鼠游戏
08-19
在Android平台上实现打地鼠游戏是一项有趣的编程挑战，它涉及到用户界面设计、事件处理、随机数生成以及游戏逻辑等多个方面。下面将详细讲解如何利用Android SDK来构建这个游戏。 首先，我们要理解打地鼠游戏的基本...
经典街机打地鼠游戏-html实现.zip
05-10
【标题】"经典街机打地鼠游戏-html实现.zip"是一个包含了使用HTML、CSS和JavaScript技术实现的在线版街机打地鼠游戏的压缩文件。这个项目旨在展示如何利用前端技术构建一个互动游戏，使用户可以在网页上体验到类似于...
基于AndroidStudio的打地鼠游戏设计源码
最新发布
04-18
本项目是基于AndroidStudio的打地鼠游戏设计源码，包含30个文件，其中主要包含12个xml配置文件，10个webp图片文件，3个java源代码文件等。系统采用了Java编程语言，实现了打地鼠游戏的功能，包括游戏界面的设计和...
打地鼠源码（商用）
05-15
轻快的节奏，伴随着优美的音乐，让人眼前一亮的优质画面，不仅给人带来一种怡乐的心情，同时还能消除一天工作所带来的压抑。此游戏不仅成年人玩，而且还能大人和他的小孩一起玩，更能促进彼此之间的感情
从github下载Android源码的脚本
09-23
该压缩包包含两个脚本：一个bash脚本负责从github.com/android抓取页面，并调用python脚本，解析抓取下来的每个页面，输出git clone命令。 具体过程参考：http://blog.csdn.net/xusiwei1236/article/details/39395359
《打地鼠》
12-05
一个用appinventor制作的安卓小游戏。适合幼儿园到小学1年级的孩子使用
打地鼠源码
12-09
安卓版打地鼠，使用as开发。...................................................
js小游戏打地鼠
01-25
javascript/jquery制作的打地鼠小游戏，好玩还能自己编写，开心中。
java 线程游戏 打地鼠
12-10
java 线程游戏 打地鼠 适合新人入门锻炼。。。。。。。
Android源码下载脚本
03-31
网上抢来的，出处：http://fanhongtao.iteye.com/blog/1427719 Android 官方建议使用Python脚本 repo 来管理代码，并且建议在Linux下执行该脚本。 大部分人其实都不会去修改Android代码，仅仅是想下载来看看而已。为了这小小的需求而去倒腾一个Linux 或 cygwin 都不太合算。所以才有了本文。 repo 只是对Git命令进行了封装，所以我们可以绕过repo直接使用Git命令来下载。 为了方便大家，这里提供了一个Bash脚本，实现一个命令下载完整的Android代码。 脚本模拟了repo的下载功能和部分更新功。在Android目录结构没有变化的情况下，脚本能够很好的工作，如果有一天Android将一个Git目录移动到另一个目录下，则本脚本会下载新的目录，但老目录下的代码不会被删除。 虽然有些限制，但毕竟胜在简单，只需要安装一个 msysgit 就可以正常工作。 使用方法： 进入 msysgit 命令行界面，在目标目录下执行附件的脚本（需要先解压）即可。 如：在 D:\android 目录下，执行： ./sync_android_repos.sh 执行完成后，会将代码下载到 D:\android 目录下。 如果下载过程中网络不好而中断，还可以多次执行该脚本，直到成功为止。
VB编程：打地鼠游戏设计与实现
"该资源是一个VB编程的课程设计实例，主要教授如何设计一款打地鼠游戏。通过这个项目，学生可以巩固和应用所学的可视化编程技术，特别是VB6.0的基本语法和技巧。课程设计的目标是提升学生独立开发应用程序的能力，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值