jQuery夹娃娃小游戏

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

页面布局代码如下：

<div id="wrapper"><div id="rod"></div><div id="hand"></div>
</div><div id="box"></div><div id="uptoy"><img src="data: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夹娃娃小游戏相关推荐

php夹娃娃小游戏,jQuery手机夹娃娃机微信游戏
jQuery手机夹娃娃机微信游戏 jQuery手机夹娃娃机微信游戏是一款容易扩展,拿来就能用的抓娃娃机游戏代码. var k=0;//可以点击 var c=0;//娃娃的 scrollLeft();/ ...
娃娃机微信php源码,jQuery手机微信夹娃娃机游戏代码
jQuery手机微信夹娃娃机游戏代码 js代码 window.οnlοad=function(){ var k=0;//可以点击 var c=0;//娃娃的 scrollLeft();//娃娃滚动 v ...
娃娃机微信php源码,CSS3+jQuery手机微信夹娃娃机游戏代码
CSS3+jQuery手机微信夹娃娃机游戏代码 js代码 window.οnlοad=function(){ var k=0;//可以点击 var c=0;//娃娃的 scrollLeft();//娃 ...
[原创]jQuery推箱子小游戏（100关且可扩展可选关）,休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全（附源码）
Sokoban 介绍 [原创]jQuery推箱子小游戏(100关且可扩展可选关),休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全(附源码) 游戏说明经典的推箱子是一个来自日本的古 ...
jquery青蛙过河小游戏源码
下载地址jquery实现的青蛙过河小游戏源码,js小游戏源码. dd:
用javascript+jquery编写的小游戏-贪吃蛇(双人对战版)
前言这是我在多年前初学jquery, 并结合javascript, 编写的一个小游戏.那洋洋洒洒几千行的js代码时刻提醒着我"不忘初心!". 效果演示代码引入文件由于用到了 ...
jquery制作html小游戏,JQuery手速测试小游戏实现思路详解
(-1)写在前面我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个 ...
jQuery 打气球小游戏点击气球爆炸效果
最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class=" ...
jQuery打字练习小游戏代码带音效
下载地址 jQuery键盘打字练习游戏代码带音效,类似于金山打字练习键盘游戏源码下载. dd:

jQuery夹娃娃小游戏

jQuery夹娃娃小游戏相关推荐

最新文章

热门文章