jQuery夹娃娃小游戏
Posted 是小叶的呢.
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
以上是关于jQuery夹娃娃小游戏的主要内容,如果未能解决你的问题,请参考以下文章