jquery抓娃娃机代码

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

<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>

<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>

转载于:https://www.cnblogs.com/blogst/p/10542088.html

jquery抓娃娃机代码相关推荐

抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志.这个分享对我们这些非专职前端的phper来说很关键.虽然简单,但是功能也是都实 ...
抓娃娃机c语言程序设计,vue制作抓娃娃机的示例代码
去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验先上效果图游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说 ...
抓娃娃机爪不动怎么办_抓娃娃机常见故障,娃娃机天车故障处理
娃娃机天车故障是抓娃娃机出现得最多的一个问题,也是很关键的一个问题.因为娃娃机天车出现问题,会直接影响到玩家的体验感.试问如果玩家在操控天车的时候,爪子不听使唤,有延迟,这会造成多大的体验感的流失.所 ...
线上抓娃娃机火了三个月了，你玩了吗？
作者:MMBellaaa 全文共 5237 字 13图,阅读需要 11 分钟 ---- / BEGIN / ---- 最近一段时间,线上抓娃娃机APP吸引了我的注意.不仅仅是因为它是个新兴产品,还因为 ...
从街机到抓娃娃机，硬币经济也将被移动支付取代？
在人们对消费娱乐需求的扩增下,一个与硬币有关的街头经济早已形成. 国民经济水平提升后,人们的注意力从温饱到"欲"上.而在欲的追求上,消费者对环境.时间.可操作性等体验需求的不同,衍 ...
最近两周我们接触到的两种线上抓娃娃机的技术实现方案（一种RTSP/一种RTMP）
线上抓娃娃机需求最近线上抓娃娃机的项目火爆了,陆陆续续几十款线上抓娃娃机上架,还有一大波正在开发上线中,各大视频云提供商都在蹭热度发布自己的线上抓娃娃机方案,综合了一下,目前线上抓娃娃机的视频需求无 ...
电脑版抓娃娃机/怎样在电脑上实现娃娃机（抓娃娃）效果
电脑版抓娃娃机/怎样在电脑上实现娃娃机(抓娃娃)效果这个抓娃娃机本质上是由两部分构成的:一部分是硬件(用来代替键盘那种按钮(相当于映射)),一部分是软件,用来实现游戏.因为游戏大家写的都不一样,同时 ...
抓娃娃机爪不动怎么办_夹娃娃的方法攻略抓娃娃机有没有漏洞
原标题:夹娃娃的方法攻略抓娃娃机有没有漏洞夹娃娃机几乎是游乐场的标配,但是有很多人都觉得苦恼,为什么被人拎着一堆娃娃走,而自己每次都空手而归!其实这可以通过一些游戏厅夹娃娃技巧来帮助你解决.现在就 ...
抓娃娃机按钮按几下_娃娃机上有几个按钮?怎么操作,比如投币之后先干什么,当爪子......
最佳答案发布于2016.09.11 下面开始先介绍抓娃娃机:纯粹探讨夹子和娃娃类型来研究该下手的位置.1.首先就是要看爪子是否有抓力了,如果爪子很松,你可以直接换机器了,因为那没有抓起来的可能. 之前 ...

jquery抓娃娃机代码

jquery抓娃娃机代码相关推荐

最新文章

热门文章