打地鼠小游戏

最新推荐文章于 2023-01-08 15:43:06 发布

colorful_world_tian

最新推荐文章于 2023-01-08 15:43:06 发布

阅读量234

点赞数

分类专栏： h5 文章标签： h5小游戏

本文链接：https://blog.csdn.net/colorful_world_t/article/details/97136883

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

html和css样式代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<style type="text/css">
	html{
		height: 100%;
	}
	body{
		margin: 0;
		background-image: url("image/bg.jpg");
		/* 需要绑定鼠标的样式 */
		cursor: url("image/cursor.png"),auto;
		/* 禁止用户选中html文档中的内容 */
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	table{
		width: 600px;
		height: 600px;
		margin: 0 auto;
	}
	td{
		background-image: url("image/hole.png");
		height: 150px;
		background-size: 120px 50px;
		background-position: center bottom;
		text-align: center;
		vertical-align: bottom;
		background-repeat: no-repeat;
	}
	img{
		width: 80px;
		height: 0;/* 默认让老鼠隐藏起来 */
		position: relative;
		bottom: 8px;
		/* 添加动画属性 */
		animation-timing-function: linear;/* 运动规律 */
		/* 当动画结束时，保持当前状态不恢复到开始状态 */
		animation-fill-mode: both;
	}
	.mouseUp{
		animation-name: up;
		animation-duration: 0.3s;/* 完成一次动画需要0.3s */
	}
	.mouseDown{
		animation-name: down;
		animation-duration: 0.1s;
	}
	/* 添加两个动画关键帧 */
	@keyframes down{
		0%{
			height: 70px;
		}
		100%{
			height: 0;
		}
	}
	@keyframes up{
		0%{
			height: 0;
		}
		100%{
			height: 70px;
		}
	}
	#score{
		font-size: 30px;
		position: absolute;
		top: 50px;
		background-color: rgba(100,100,100,0.6);
		line-height: 50px;
		padding-left: 10px;
		padding-right:15px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
	<!-- 添加音频audio
		 添加视频  video
		 
		 autoplay自动播放
		 loop循环播放 -->
	<audio src="audio/music.mp3" autoplay loop></audio>
	<audio id="dazhong" src=""></audio>
	<p id="score">得分：0</p>
	<table>
		<tr>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
		</tr>
		<tr>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
		</tr>
		<tr>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
		</tr>
		<tr>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
			<td><img alt="" src="image/mouse.png"></td>
		</tr>
	</table>
	<script type="text/javascript" src="dadishu.js"></script>
</body>
</html>

js代码

//声明变量，记录得分值
var score = 0;
//让老鼠显示出来
function show(){
	//从16个同随机出来一个老鼠
	var a = Math.floor(Math.random()*16);
	//$("img").eq(a)等同于$("img:eq(" + a +")")
	$("img:eq(" + a +")").addClass("mouseUp").removeClass("mouseDown");
	//在2.5秒之后删除mouseUp
	setTimeout(function() {
		$("img:eq(" + a + ")").addClass("mouseDown").removeClass("mouseUp");
	},2500);
	
}
//让老鼠无限的生成,怎么生成多个，并且无限生成
function playing(){
	show();show();show();show();show();show();show();show();
}

setInterval(playing,2000);

//添加点击事件 打中老鼠
$("img").click(function(){
//	当老鼠被击中的时候，我们添加一个打中的声音
	$("#dazhong").attr("src","audio/dazhong.wav").get(0).play();
	//同时需要让打中的老鼠隐藏掉
//	this指代被击中的老鼠
	$(this).addClass("mouseDown").removeClass("mouseUp");
	//同时分数相应的增加10
	score+=10;
	//集中老鼠得分之后的值重新插入到页面中
	$("#score").text("得分："+score+"分");
})
//添加单击鼠标左键的时候，锤子下落，并且迅速上升
$("body").mousedown(function(){
	//当鼠标下落的时候，添加下落的锤子
	$("body").css("cursor","url(image/cursor-down.png),auto");
}).mouseup(function(){
	//当鼠标松开的时候，锤子上升
	$("body").css("cursor","url(image/cursor.png),auto");
})

colorful_world_tian

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
打地鼠小游戏

这里写自定义目录标题html和css样式代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>打地鼠</title><style type="text/css"> html{ height: 100%; } body{ ma...
复制链接

扫一扫

专栏目录