本篇主要介绍了web前端开发入门到实战--jQuery夹娃娃小游戏，通过具体的内容展现，希望对前端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);

✅  扫码免费获取—— IT技术干货 · 答疑解惑 · 职业测评