jquery抓娃娃机代码

<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="images/toy117.png">
<img src="images/toy117.png">
<img src="images/toy117.png">
<img src="images/toy117.png">
<img src="images/toy117.png">
-->
</div>

<div id="uptoy">
<img src="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>

原文地址:https://www.cnblogs.com/blogst/p/10542088.html

时间: 2024-11-11 13:34:26

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

线上抓娃娃机日进斗金,你确定它真的是个风口吗?

去年开始,在资本市场的推动下,新一轮的线下娃娃机热潮兴起,而近期,线上抓娃娃App也走红起来,在App Store输入"抓娃娃"关键字,一下子就能跳出数十个搜索结果.据<IT时报>记者采访获悉,经营情况好的时候,线上一台娃娃机一天可能就有1000元以上的收入 线上娃娃机,将会是怎么样一个风口呢?IT时报记者丁晓东和笔者进行了一番交流. 愚以为,作为一种特别的游戏模式,线上娃娃机提供给玩家一种差异于纯粹线上游戏的体验,即线上抓娃娃,线下得娃娃.但这种体验也只是暂时的,或者说是

草根创业者下一个风口:娃娃机

引言:PC互联网.移动互联网这些时代,大家是不是发觉流量越来越难获取了?这几年线上流量被瓜分的所剩无几,几近枯竭.各个大佬们正着手抢夺线下流量,以支撑起大而强的身躯和持续的增长! 如果说微信群控是去年一个风口项目的话,那么今年最热门的项目应该是娃娃机了.娃娃机到底为什么那么热?仅仅是为了娱乐.没有你想的那么简单!小编发现最近在很多社群里,还有松松兄弟会的圈子里,有好几个朋友都是做这个项目.卢松松本人也订购了2台娃娃机做测试使用. 地铁门口,你还没走出去,已经有一台抓娃娃机等着你了.购物中心的每个

来看看最近火爆的在线推币机 在线娃娃机

前端: 成熟的APP+SDK+H5 方案,可定制二次开发硬件:推流方案+硬件主板方案+摄像头线下:娃娃机 推币机租赁+娃娃礼品仓储物流手机网络推币机特点:?1.操作简单:操作和线下相比简单一线上抓娃娃机之后,给各大公司带来的很大的商机,各大公司纷纷开发手机线上抓娃娃项目,并得到了丰厚的回报.现在依然是非常火爆的项目,然而,广州龙其仕已经在开发着新项目(线上推币机--手机推币机),并于2017年11月25号通过测试,成功对接上线. 点,线下还需要投币才能开始玩,线上推币机可以在线充值,充值后就能马

来看看最近火爆的在线推币机和在线娃娃机

前端: 成熟的APP+SDK+H5 方案,可定制二次开发硬件:推流方案+硬件主板方案+摄像头线下:娃娃机 推币机租赁+娃娃礼品仓储物流 手机网络推币机特点:?1.操作简单:操作和线下相比简单一线上抓娃娃机之后,给各大公司带来的很大的商机,各大公司纷纷开发手机线上抓娃娃项目,并得到了丰厚的回报.现在依然是非常火爆的项目,然而,广州增景物娱已经在开发着新项目(线上推币机--手机推币机),并于2017年11月25号通过测试,成功对接上线. 点,线下还需要投币才能开始玩,线上推币机可以在线充值,充值后就

即构科技在线抓娃娃H5方案正式上线,400ms超低延迟,完美兼容微信

近几个月,在线抓娃娃热席卷全国,除了原生app抓娃娃方案以外,H5在线抓娃娃方案也得到了不少创业者的青睐. H5在线抓娃娃方案独特的优势 1.开发成本低和开发周期短.H5页面的功能大都比较轻量.简易,开发起来非常便捷. 2.兼容性强,在微信和所有浏览器上都能用,开发一次所有的浏览器上都可以跑. 3.传播途径广.用户使用成本低. H5可以通过各种社交产品实现病毒式扩散,用户只需简单的打开链接即可达到宣传推广目的,特别是在微信公众号和朋友权重进行传播. 4.迭代速度快.相比原生APP, 迭代升级快,

增景物娱在线娃娃机

广州真正的一手在线娃娃机 推币机 解决方案商,拥有软硬件一体化解决方案,为番禺娃娃机厂商提供软硬件服务,是目前已上线的多款抓娃娃APP的实际开发者,我们是腾讯云.声网.即构的战略合作伙伴.我们能够为您提供APP定制开发,H5方案定制开发,保证15天内上线. 前端: 成熟的APP+SDK+H5 方案,可定制二次开发硬件:推流方案+硬件主板方案+摄像头线下:娃娃机 推币机租赁+娃娃礼品仓储物流 资深团队广州增景物娱科技有限公司,由一批来自网易.腾讯.阿里的资深技术大牛组建(核心团队成员均来自知名互联

windows 用wireshark抓本机的包

原文: http://bijian1013.iteye.com/blog/2299856 1.也可以用另外一个工具: RawCap 当然也不是说windows下就别想抓到本地回路的包了,肯定有别的方法,网上貌似说commview可以抓到本地回路的包. 还有一个绿色,小巧(17K)的开源软件RawCap也可以抓到.(下载地址:http://www.netresec.com/?page=RawCap),将抓到的包保存为pcap后缀,用wireshark打开,就可以继续分析了. -----------

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

效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base ta

jquery操作单选钮代码示例

jquery操作单选钮代码示例:radio单选按钮是最重要的表单元素之一,下面介绍一下常用的几个jquery对radio单选按钮操作.一.取消选中: $(".theclass").each(function(){ if($(this).attr('checked')) { $(this).attr('checked',false); } }); 以上代码可以将class属性值为theclass的被选中单选按钮取消选中.二.获取被选中的单选按钮的值: var val=$('.thecla