jQuery夹娃娃小游戏

Posted 2022-01-08 是小叶的呢.

点击开始，爪子开始往下移夹娃娃首先让我们看一下它的效果图如下：

页面布局代码如下：

<div id="wrapper">
	<div id="rod"></div>
	<div id="hand"></div>
</div>

<div id="box">
	
</div>

<div id="uptoy">
	<img src="images/toy117.png">
</div>
<div id="btns">
</div>

这里只要注意他们的定位就可以了Css样式代码如下：

*
		margin:0px;
		border:0px;
		padding:0px;
	
	#wrapper
		width: 750px;
		height: 1109px;
		margin: 0 auto;
		background-image:url('img/bg.png');
		position:relative;
		z-index:1;
	
	#rod
		position:relative;
		top:235px;
		left:-20px;
		width:16px;
		height:3px;
		margin:0 auto;
		background-image: url(images/rod.png);
		background-repeat: repeat-y;
	
	#hand
		/*
		width: 124px;
		height: 83px;
		*/
		width: 150px;
		height: 83px;
		position:relative;
		top:235px;
		left:-20px;
		background-position:158px 0px;
		background-image: url(images/hand.png);
		margin:0 auto;
	
	
	#box
		height: 200px;
		width: 500px;
		margin:0 auto;
		overflow: hidden;
		position: relative;
		top:-550px;
		left:-20px;
	
	
	#uptoy
		width: 200px;
		height: 200px;
		margin: 0 auto;
		position: relative;
		z-index: 3;
		top:-750px;
		left:-20px;
		display: none;
	
	
	#btns
		width: 123px;
		height: 115px;
		background-image: url('img/start.png');
		background-position: -40px -20px;
		position: absolute;
		top:790px;
		left:1050px;
		z-index: 4;
		border:none;
		outline: none;
		cursor: pointer;
	

首先我们先给它 声明一个娃娃的数组和一个按钮默认可以点击。给开始按钮一个点击事件，再给他一个提示“不要连续点击，等夹玩一次再来”。接下来是刚刚被点击完的按钮不能连续的点击。通过改变摁下按钮的背景图片，摁下开始按钮之后动画的将绳子往下移动300个像素，当动画结束的时候将爪子合起来代码如下：

var toys = new Array();
	var flag = true;
	$("#btns").click(function()
		if(!flag)
			alert("不要连续点击，等夹完一次再夹");
			return;
		
		flag = false;
		$("#btns").css("backgroundPosition":"-40px -160px");	
		$("#rod").animate(height:"300px",1500,"linear",function()
			$("#hand").css("backgroundPosition":"0px 0px","width":"124px");
			$("#btns").css("backgroundPosition":"-40px -20px");
		);

判断爪子落下的时候才判断是否抓到娃娃，通过循环遍历数组判断，是否可以被夹起来，然后移除这个元素，把夹起来的娃娃显示出来，让让被夹起来娃娃和夹子一起上去，最后动画的将绳子移回原来的位置，爪子松开.

window.setTimeout(function()			
			for(var i = 0; i < toys.length; i++)
				if($(toys[i]).css("left").match(/\\d*/) > 300 && $(toys[i]).css("left").match(/\\d*/)  < 400)
					toys[i].remove();
					
					$("#uptoy").css("display","block");
	                $("#uptoy").animate("display":"block","top":"-1100px",1500,"linear",function()
						$("#uptoy").css("display":"none","top":"-750px");
					);
				
			
			$("#rod").animate(height:"3px",1500,"linear",function()		
				$("#hand").css("backgroundPosition":"158px 0px","width":"150px");
				flag = true;
			);
		, 1500);
	);

娃娃的生成：每隔一秒钟生成一个娃娃并且从左往右移动，首先创建娃娃元素的图片，通过push()方法把娃娃添加到数组的 末尾，再通过append（）方法把图片添加到box容器里面，让娃娃动起来，改变它的绝对定位 4秒钟动完之后移除元素防止元素太多页面卡死，将元素从页面上移除。这样就可以达到我们的效果。

window.setInterval(function()
		var img = $("<img style='position:absolute;left:0px;' src='images/toy117.png'>");
		toys.push(img);
		$("#box").append(img);
		$(img).animate(left:"900px",4000,"linear",function()
			this.remove();
		);
	, 1000);