<html>
<head>
<title>jQuery抓娃娃机游戏代码 - 源码之家</title>
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/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;
}

#babys{
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;
}

#start_btn{
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;
}
</style>
</head>

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

<div id="babys">
<!--
<img src="data:images/toy117.png">
<img src="data:images/toy117.png">
<img src="data:images/toy117.png">
<img src="data:images/toy117.png">
<img src="data:images/toy117.png">
-->
</div>

<div id="uptoy">
<img src="data:images/toy117.png">
</div>
<div id="start_btn">
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var toys = new Array();//娃娃数组
var flag = true;//按钮默认可以点击
$("#start_btn").click(function(){
if(!flag){
alert("不要连续点击，等夹完一次再夹");
return;
}
flag = false;//刚刚被点击完，按钮不能连续点击
//改变按钮的位置
$("#start_btn").css({"backgroundPosition":"-40px -160px"});
//动画将绳子往下移动到200像素
$("#rod").animate({height:"300px"},1500,"linear",function(){
//当动画结束的时候，将爪子合起来
$("#hand").css({"backgroundPosition":"0px 0px","width":"124px"});
$("#start_btn").css({"backgroundPosition":"-40px -20px"});
});

//要等爪子落下的时候才判断是否抓到娃娃，需要等待1500号码才执行判断，不管有没有抓到娃娃绳子都还要升上去
window.setTimeout(function(){
//循环遍历数组判断，是否可以被夹起来http://www.hiry.cn/a/hainantechan海南特产http://www.hiry.cn/a/ningxiatechan宁夏特产http://www.hiry.cn/a/sichuantechan四川特产
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);
});
//在准备事件的时候让娃娃自动生成并且从左到右移动
//每隔一秒钟生成一个娃娃并且往右移动
window.setInterval(function(){
//创建娃娃元素的图片
var img = $("<img style='position:absolute;left:0px;' src='images/toy117.png'>");
toys.push(img);//将图片放入到数组最后
//将娃娃元素追加到框中
$("#babys").append(img);
//让娃娃动起来，改变它的绝对定位 4秒钟动完之后移除元素防止元素太多页面卡死
$(img).animate({left:"900px"},4000,"linear",function(){
this.remove();//将元素从页面上移除
toys.shift();//删除数组的第一个元素
});
}, 1000);
</script>
<div style="text-align:center;">
<p>更多小游戏：http://www.hiry.cn/a/xinjiangtechan新疆特产</p>
</div>
</body>
</html>

jquery抓娃娃机代码的更多相关文章

  1. 最近两周我们接触到的两种线上抓娃娃机的技术实现方案（一种RTSP/一种RTMP）

    线上抓娃娃机需求 最近线上抓娃娃机的项目火爆了,陆陆续续几十款线上抓娃娃机上架,还有一大波正在开发上线中,各大视频云提供商都在蹭热度发布自己的线上抓娃娃机方案,综合了一下,目前线上抓娃娃机的视频需求无 ...

  2. EasyPlayerPro RTMP播放器助力远程娃娃机直播抓娃娃技术方案

    远程娃娃机 目前市面上娃娃机的方案有很多种.核心的技术流程就是实现远程直播加上对娃娃机手臂的远程操作.其中最主要的技术还是视频直播方案,需要低延时,视频秒开等流媒体技术. 最简单的直播方案 视频直播方 ...

  3. windows 用wireshark抓本机的包

    原文: http://bijian1013.iteye.com/blog/2299856 1.也可以用另外一个工具: RawCap 当然也不是说windows下就别想抓到本地回路的包了,肯定有别的方法 ...

  4. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  5. '/test.txt'; // 把抓取的代码写入该文件

      将获得的代码直接写入某个文件 代码如下:<?php $urls = array( 'http://www.sina.com.cn/', 'http://www.sohu.com/', 'ht ...

  6. jquery树形菜单完整代码

    本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...

  7. 10 个实用的 jQuery 表单操作代码片段

    jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...

  8. jQuery select的操作代码

    jQuery對select的操作的实际应用代码. //改變時的事件  复制代码代码如下: $("#testSelect").change(function(){ //事件發生  j ...

  9. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. XML一

    HTML(HyperText Markup Language),即超文本标记语言,是用于描述网页文档的一种描述标记语言.                                  而XML(E ...

  2. Arch Linux root密码忘记了怎么办

    https://wiki.archlinux.org/index.php/Reset_root_password_(简体中文)https://wiki.archlinux.org/index.php/ ...

  3. springboot 缓存架构

    线程内部缓存:a. 局部变量HashMap, 方法间传递  b. 使用ThreadLocal 本地缓存:单jvm内共享 可以使用(Concurrent)HashMap自己实现,也可以使用GuavaCa ...

  4. 【java多线程】队列系统之PriorityBlockingQueue源码

    一.二叉堆 如题,二叉堆是一种基础数据结构 事实上支持的操作也是挺有限的(相对于其他数据结构而言),也就插入,查询,删除这一类 对了这篇文章中讲到的堆都是二叉堆,而不是斜堆,左偏树,斐波那契堆什么的  ...

  5. python 【winerror2】系统找不到指定的路径

    # _*_ coding:utf-8_*_from selenium import webdriver driver = webdriver.Firefox()driver.get("htt ...

  6. Vue-项目之免费课和购物车实现

    调整首页细节 固定头部 App.vue中代码 <style> body{ padding: 0; margin:0; margin-top: 80px; } </style> ...

  7. istream不是std的成员

    如果报错信息为:istream不是std的成员,那么有两种可能 1.没有包含iostream库文件 2.#ifndef 和#endif使用错误,致使包含的iostream的头文件没有被主函数包含

  8. Azure CosmosDB (1) 概述

    <Windows Azure Platform 系列文章目录> Azure CosmosDB是一个全球分布式数据库服务(Global Distributed Database),提供低延迟 ...

  9. 【python】脚本连续发送QQ邮件

    今天习得用python写一个连续发送QQ邮件的脚本,经过测试,成功给国内外的服务器发送邮件,包括QQ邮箱.163邮箱.google邮箱,香港科技大学的邮箱和爱丁堡大学的邮箱.一下逐步解答相关技巧. 首 ...

  10. sqlserver存储过程sp_send_dbmail邮件（html）实际应用

    前段时间因工作需求,特地学习了下sp_send_dbmail的使用,发现网上的示例对我这样的菜鸟太不友好/(ㄒoㄒ)/~~,好不容易完工来和大家分享一下,不谈理论,只管实践! 如下是实际需求: -- ...