实训篇-JavaScript-打地鼠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			
		-->
		<style type="text/css">
			/*给body添加背景图片*/
			body{
				background: url(img/bg.jpg);
			}
			table{
				margin-left: 150px;
				margin-top: 100px;	
			}
			
		</style>
		<script type="text/javascript">
		//开始游戏的方法
			var imgs;
			var gameTime=0;		//游戏时间
			var chImg;
			var cutTime;
			var mouseBk;
			var cnt=0;
			function start(){
				//要求一秒钟调用一次  使用定时器来实现
				chImg=window.setInterval("changeImg()",1000);
//				changeImg();
				cnt=0;
				gameTime=20;
				cutTime=window.setInterval("countTime()",500);
				
			}
			//每隔一秒钟随机切换表格中某一个格子的图片，切换成地鼠钻出来
			function changeImg(){
				//获得所有的img对象
				imgs= document.getElementsByTagName("img");
//				alert(imgs.length);25
				//获得一个随机的数组的索引下标  floor:向下取整
				var index=Math.floor(Math.random()*imgs.length);
				//获得随机的一个图片对象
				var img=imgs[index];
				//去切换img的图片资源
				img.src="img/01.jpg";
				//一秒钟之后 被切换的资源还原
				mouseBk=window.setTimeout("mouseBack("+index+")",1000);
			}
			//让随机的出现的地鼠资源还原为初始状态 
			function mouseBack(index){
				var img=imgs[index];
				img.src="img/00.jpg";
			}
			//当使用鼠标点击25个图片资源的时候
			function hit(img){
				//如果当前的img对象是01.jpg对象的时候 才进行切换
				var name=img.src;
				//求字符串的字串  只获得最后的六个字符
				var subName=name.substr(name.length-6);
				//当被点击的图片是01.jpg的时候 进行资源的切换
				if(subName=="01.jpg"){
				img.src="img/02.jpg";
				cnt++;
				}
				
			}
			//计时的方法  该方法要求游戏启动后 每隔一秒钟执行一次
			function countTime(){
				gameTime--;
				var game= document.getElementById("gametime");
				game.innerHTML=gameTime;
				if(gameTime==0){
					//游戏结束
					gameOver();
				}
			}
			//游戏结束 清理资源
			function gameOver(){
			//停掉我们的计时器
			window.clearInterval(chImg);
			window.clearInterval(cutTime);
			window.clearInterval(mouseBk);
				//将表格中所有的图片资源 重置
				for(var i in imgs){
					imgs[i].src="img/00.jpg";
				}
				alert("游戏结束，count="+cnt);
			}
		</script>
	</head>
	<body>
		
		<!--添加游戏时间的文本-->
		剩余时间：<span id="gametime">0</span><br />
		<!--定义开始按钮-->
		<input type="button" value="开始" onclick="start()"/>
		<!--定义一个五行五列的表格 使用背景图片填充表格-->
		<!--快速生成一个五行五列的表格：table>ts*5>td*5  tab键-->
		<!--快速生成一个五行五列的表格：table>ts*5>td*5>img[src='img/00.jpg']  tab键-->
		
		
		<table border="1px">
			<tr>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
			</tr>
			<tr>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
			</tr>
			<tr>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
			</tr>
			<tr>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
			</tr>
			<tr>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>
			</tr>
		</table>
	</body>
</html>
用到的图片资源

原文地址：https://www.cnblogs.com/52dxer/p/12167220.html