jQuery夾娃娃小游戲

點擊開始，爪子開始往下移夾娃娃首先讓我們看一下它的效果圖如下：

頁面布局代碼如下：

<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);