H5 打地鼠游戏

最新推荐文章于 2022-01-14 18:07:22 发布

polestar.wang

最新推荐文章于 2022-01-14 18:07:22 发布

阅读量3.6k

点赞数 2

分类专栏： H5 文章标签： html5

本文链接：https://blog.csdn.net/wangdingfeng5141/article/details/52311144

版权

H5 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

此游戏用到了jQuery，请自行下载

打地鼠

css样式

<style>
		body{
			height: 100%;
			
			width: 100%;
			/*设置背景图片*/
			background-image: url(image/bg.jpg);
			/*设置外间距为0*/
			margin: 0px; 
			/*更改鼠标样式*/
			cursor: url(image/cursor.png),auto;
			
			/*禁止用户选择标签上的文本；*/
			
			-moz-user-select:none; 
		}
		/*表单标签*/
		table
		{
			height: 600px; 
			
			width: 600px; 
			
			margin: 0px  auto; 
			/*设置背景色为黑色*/
			/*background: black;*/
			
			
			
		}
		
		/*表单列标签*/
		td{
			height: 100px;
			/*background:blue;*/
			
			background-image: url(image/hole.png);
			
			background-repeat:  no-repeat;
			
			background-size: 120px  62px;
			
			background-position: center bottom;
			/*设置垂直方向的状态    底部垂直*/
			vertical-align: bottom;
			
			
			
		}
		
		img{
			width: 80px; 
			
			height:0px;
/*			
			margin: 18px  45px; */
			
			position: relative;
			
			bottom: 8px;
			
			left:32px;
			/*设置动画匀速运动*/
			
			animation-timing-function: linear;
			/*让动画处于结束时的动作状态*/
			animation-fill-mode: both;
		}
		
		#score
		{
			
			text-align: center;
			/*设置左边内间距*/
			padding-left: 15px; 
			/*设置右边内间距*/
			padding-right: 15px; 
			/*设置該标签到上方的距离*/
			top:50px; 
			/*设置左上角弧度*/
			border-top-right-radius: 15px;
	/*设置右上角弧度*/
			border-bottom-right-radius: 15px;
			
			position: absolute;
		
			/*设置背景色*/
			background-color: rgba(100,100,100,0.7);
			/*设置文本字体大小*/
			font-size: 30px;
			/*设置行高*/
			line-height: 50px; 
		}
		/*表示地鼠出来时候的操作*/
		.mouseUp
		{
			animation-name:up;
			
			animation-duration: 0.3s; 
			
		}
		/*地鼠回去时的操作*/
		.mouseDown
		{
			/*地鼠回去时的动画*/
			animation-name:down;
			
			animation-duration: 0.1s; 
			
		}
		/*地鼠上升的具体操作*/
		@keyframes up
		{
			/*动画刚开始的状态*/
			0%
			{
				height:0px;
			}
			/*动画结束时的状态*/
			100%
			{
				height:70px;
			}
		}
		/*地鼠回洞的动画*/
		@keyframes down
		{
			0%
			{
				height: 70px;
			}
			100%
			{
				height:0px;
			}
		}
	</style>

html

<html>
<head>
	<meta charset="UTF-8">
	<title>class_打地鼠</title>
	<script src="jquery.js"></script>
</head>
<body>
	<main>
		<p id="score">得分：0</p>
		<audio src="audio/music.mp3" autoplay loop></audio>
	<audio id="dazhong"></audio>
	<table>
		<!--行标签-->
	
		<tr>
		<td><img src="image/mouse.png" alt="1"></td>
		<td><img src="image/mouse.png" alt="2" /></td>
		<td><img src="image/mouse.png" alt="2"></td>
		<td><img src="image/mouse.png" alt=""></td>
		
		</tr>
	  <tr>
		<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""> </td>
		</tr>
		  <tr>
			<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""</td>
		<td><img src="image/mouse.png" alt=""></td>
		</tr>
		  <tr>
			<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""></td>
		<td><img src="image/mouse.png" alt=""></td>
		
		</tr>
	</table>
	</main> 
	<script src="mouse.js"></script>
	
</body>
</html>

// 先获取所有的地鼠图片 $()
var mouses = $('img');
// 设置得分
var score = 0;
function show()
{
	// 获取一个0~15的随机数
	var a = Math.random() * 16;
	// 将获取的数 去掉小数位
	a = Math.floor(a);
	
	// 从所有地鼠图片中随即获取一张
	var mouse = mouses.get(a);
	// 让随即获取的地鼠出洞
	// addClass  为每一个找到的元素  增加一个指定的样式类名
	// removeClass 删除一个指定的样式类名
	
	$(mouse).addClass('mouseUp').removeClass('mouseDown');
	
	
	// setTimeout 延时多长时间后  调用一个方法
	// 参数一：方法名字   参数二：延迟的时长
	// 让地鼠显示一段时间后  缩回
	setTimeout(function(){
		
		$(mouse).addClass('mouseDown').removeClass('mouseUp');
		
	} , 4000);
	
}
function play()
{
	 setTimeout(show ,300);
	
	 setTimeout(show ,600);
	 
	 setTimeout(show ,900);
	 
	 setTimeout(show ,1200);
	 
	 setTimeout(show ,1500);
	 
	 setTimeout(show ,1800);
	  
	
}
setInterval(play,3000);


$('body').mousedown(function(){
	

	$('body').css('cursor','url(image/cursor-down.png),auto');
    	
 	
}).mouseup(function(){
	$('body').css('cursor','url(image/cursor.png),auto');
})

$('img').click(function(){
	console.log('点击了');
	// 播放击中声音
	$('#dazhong').attr('src','audio/dazhong.wav').get(0).play();
	//地鼠消失
	$(this).addClass('mouseDown').removeClass('mouseUp');
	var src=$('img').attr('src');
	
	score += 10;
	
	$('#score').text('得分：' + score);
	
	
	
	// 地鼠消失
	
});

源代码请私信微博（TryCatche）