打僵尸小游戏

最新推荐文章于 2024-07-25 11:52:08 发布

想不挂科的黄某

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量59

点赞数 1

文章标签： html 游戏

本文链接：https://blog.csdn.net/weixin_60287645/article/details/132845257

版权

学习一周的html,css,js，通过所学知识做一个简单的打僵尸的小游戏

僵尸就是网上找的gif图片，当鼠标碰到僵尸的时候，僵尸消失，当僵尸进到屋子里面超过200个，则游戏结束，僵尸是通过定时器来进行定时生成的

<!DOCTYPE html>
<html>
<head>
	<title>ghost</title>
	<style type="text/css">
		body{
			/*背景花园图片*/
			background-image: url(../zoom/bg.jpg);
			background-repeat: no-repeat;
			background-size: 1800px 800px;
		}
		/*僵尸定位*/
		img{
			/*绝对定位：控制图片在页面的任意位置*/
			position: absolute;
			width: 109px;
			height: 138px;
		}
		#x_h1{
			float: right;/*右浮*/
			color: blue;
		}
		#j_h1{
			float: left;
			color: blue;
		}
	</style>
</head>
<body>
<h1 id="j_h1">进屋数量：0</h1>
<h1 id="x_h1">消灭数量：0</h1>


<script type="text/javascript" src="../Jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //定义消灭和进屋的僵尸数量
    var xCount=0;//消灭/成功的数量
    var jCount=0;//进屋的数量

	//jquery获得浏览器可见范围
	var w=$(window).width();
	var h=$(window).height();
	alert("点击确定游戏开始");
	//1536++++711
	//设置背景图片的大小和浏览器的可见范围大小相同
	$("body").css("background-size",w+"px "+h+"px");
	//在浏览器大小调整的时候保持背景大小和浏览器可见范围一致
	onresize=function  () {
		w=$(window).width();
		h=$(window).height();
		$("body").css("background-size",w+"px "+h+"px");
	}
	//生成僵尸
	//定时器
	var timer=setInterval(function(){
     //生成图片
     var x = 9;
     var y = 0;
     var type = parseInt(Math.random()*(x-y+1)+y);
     var ghostImg= $("<img src='../zoom/zoomb"+type+".gif'>");
     var left=w-500;//x轴
     var top=parseInt(Math.random()*(h-60));//y轴
     ghostImg.css("left",left+"px").css("top",top+"px");
     $("body").append(ghostImg);

     //给ghostimg添加鼠标移入事件
     ghostImg.mouseover(function(){
     	//移除图片
     	 ghostImg.remove();
     	 //xconut++
     	 xCount++;
     	 $("#x_h1").text("消灭数量:"+xCount);
     })

	},500);
	var t=10;
	var p=3;
	var timove=setInterval(function(){
		var ghostImg=$("<img src='../zoom/zoomb0.gif'>");
		//遍历ghostIMG
		$("img").each(function(){
			//每个img元素都从当前位置向左移动5像素
			//获取当前img的left属性
			var oldleft=parseInt($(this).css("left"));
			//定义向左移动5像素之后产生的新的left
			$(this).css("left",(oldleft-5)+"px");

			//判断僵尸的位置是否进屋
			if (oldleft<=100) {
				//进屋数量增加
				$(this).remove();
				jCount++;
				//如果进屋的僵尸**个则结束游戏
				if (jCount>=200) {
					window.confirm("游戏结束");
					//重新页面刷新
					location.reload();
				}
				$("#j_h1").text("进屋数量"+jCount);
			}
		});
	},t);
</script>
</body>
</html>