娃娃机项目框架html,移动端抓娃娃机
手机上的一个抓娃娃小游戏原型,有设定抓住的几率,这里就不做判断了,只实现抓取的效果!
zww.png
HTML
JS
$(function(){
move = true;//移动
odds = true;//几率
var claw = $('.claw');
var clawH = claw.find('.a');
var claw_a = claw.find('.a').height();
var claw_b = claw.find('.b').height();
var obj = $('.prize');
obj.bind('touchstart',function(){
var _this = $(this);
if(move){
var p_t = _this.offset().top;
var p_l = _this.offset().left;
var c_l = claw.offset().left;
var moveX = p_l - c_l;
var moveY = p_t - claw_b;
var num = obj.index(this);//当前选择的奖品
console.log(p_t,p_l,c_l);
//console.log(num);
if(num !== 1 && num !== 4){//排除中间2个
claw.css({"-webkit-transform":"translate3d(" + moveX + "px,0,0)"});
setTimeout(function(){
clawH.css({height:moveY + "px"});
setTimeout(function(){
clawH.css({height:claw_a + "px"});
},500)
},300)
oddsEvent(800);
}else{
clawH.css({height:moveY + "px"});
setTimeout(function(){
clawH.css({height:claw_a + "px"});
},500)
oddsEvent(500);
}
}
move = false;//只抓一次
function oddsEvent(time){//抓取成功失败事件
if(odds){
console.log('抓到啦!o(∩_∩)o 哈哈')
setTimeout(function(){
_this.css({"-webkit-transform":"translate3d(0,-" + (moveY-claw_a) + "px,0)"});
},time)
}else{
console.log('没抓到(┬_┬)')
}
}
})
})
CSS
body{background: #2a2a2a;}
.prize_box {position: relative;margin-top:6rem;}
.prize_box ul {display: table;width: 100%;margin-top: 2rem;}
.prize_box ul li {display: table-cell;width: 33%;vertical-align:middle;}
.prize {width: 1.2rem;height: 1.2rem;background: #f80;margin: 0 auto;
transition:all .5s ease-out;
-webkit-transition:all .5s ease-out;
}
.claw {width: 1.2rem;position: absolute;z-index:10;top:0;left:50%;margin-left:-0.6rem;
transition:all .3s ease-out;
-webkit-transition:all .3s ease-out;
}
.claw .a {width: 0.2rem;height:0.8rem;background: #5349ab;margin: 0 auto;
transition:height .5s ease-out;
-webkit-transition:height .5s ease-out;
}
.claw .b {width: 1.2rem;height:1.2rem;background: #5349ab;}
娃娃机项目框架html,移动端抓娃娃机相关推荐
- 项目:漫漫H5游戏-抓娃娃机
项目信息 时间:2016.2-2016.3 该项目是为漫漫App做营销推广的方式之一:在CentOS+Tomcat+JDK+MySQL的服务器环境下用Html5 canvas+JQuery+Java等 ...
- 抓娃娃机按钮按几下_抓娃娃机技巧
大家都很喜欢娃娃机吧 为此烧过不少钱吧 ....!!!所以我特地汇总了高手的经验们拿来跟大家分享一下!愿广大网友能如愿以偿,吊到好多好多娃娃-- 关于夹子 娃娃机的夹子一般都是3根组成.抓娃娃时,经常 ...
- 抓娃娃机c语言程序设计,vue制作抓娃娃机的示例代码
去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图 游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说 ...
- 抓娃娃机按钮按几下_抓娃娃机的技巧
每次去商场或者电影院看到摆在那里的抓娃娃机是不是都手痒想去玩上几把呢,抓娃娃到底有没有技巧呢.今天就来跟大家分析一下,祝你下次一抓必中. 转夹子 娃娃机的夹子一般都是3根组成.抓娃娃时,经常遇到爪子的 ...
- ios 抓娃娃开发_我爱抓娃娃appiOS版下载_我爱抓娃娃iOS版下载_18183软件下载
我爱抓娃娃iOS版下载是一款有趣的软件,喜欢的用户不要错过. 抓中几率超高,让你成为朋友圈人气王!新人注册立即送钻石,每日签到立即送钻石,在家躺着就能抓娃娃,款式多样每天上新,想抓就抓,全国均可邮寄到 ...
- 产品思考|为什么线上抓娃娃要用真机?
作者:宁白衣 全文共 2591 字,阅读需要 6 分钟 ---- / BEGIN / ---- 前几天,在一个群里,看大家都在玩在线抓娃娃,于是,我也尝试了几个. 目前所谓的在线抓娃娃机,基本都是通过 ...
- 线上抓娃娃机火了三个月了,你玩了吗?
作者:MMBellaaa 全文共 5237 字 13图,阅读需要 11 分钟 ---- / BEGIN / ---- 最近一段时间,线上抓娃娃机APP吸引了我的注意.不仅仅是因为它是个新兴产品,还因为 ...
- 微信H5视频抓娃娃,没你想的那么难,看完你也会
短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构.从盈利到投资.从运营到推广,全方位解读都有了.唯独H5抓娃娃(特指移动web.微信抓娃娃),仍然很神秘. H5抓娃娃真的有 ...
- 【MCtalk Live】5大维度拆解在线抓娃娃爆红背后的产品逻辑
杨狄 网易云信产品经理,负责音视频产品线 关注各种好玩的互联网产品.关注音视频产品的行业新玩法与趋势 作者简介 2017年下半年,"在线娃娃机"爆红!"千万流水,百万下载 ...
最新文章
- C++中 list容器的用法
- 标识位:可以用以确定鼠标点击的是哪一个按钮或者是文本框
- 第19课:知识挖掘与知识图谱概述
- QT c++ 中使用PostMessage/SendMessage实例
- 入门干货之用DVG打造你的项目主页-Docfx、Vs、Github
- mysql5.7.21备份脚本_Shell脚本使用汇总整理——mysql数据库5.7.8以后备份脚本
- pd17虚拟机 mac 无限使用
- 旷视周而进:人脸识别简史与距离对齐技术的应用
- AAAI 2020 Oral | 华科提出TANet:提升点云3D目标检测的稳健性
- android-ndk-aide,NDK安装教程20180605
- TIOBE 4 月榜单:上古编程语言 Fortran 击败 Objective-C,PHP、Go 下滑
- python开发k8s管理平台_运维开发和k8s运维如何选择,请各位大神指导一下?
- 巧用“搜索”解决自学编程遇到的难题
- I2S/PCM协议及TDM模式详解
- python-函数-圆形生成器
- win32com在wps上另存为SaveAs报错
- 如果非要回到古代,我会选择春秋战国
- C语言反汇编 - 多维数组与指针
- 【Qt学习笔记】包含头文件确报错 does not name a type
- [转贴]一位营销总监的辞职信(非常经典)
热门文章
- 仿新浪微博图片加载进度条——JLPieProgressView
- BioVision羟脯氨酸检测试剂盒和胶原蛋白检测试剂盒
- pytest框架的安装与使用
- R语言的数字信号处理
- canny检测matlab,matlab houghlines_matlab canny边缘检测_canny边缘检测simulink
- vivo系列某些机型的浏览器不支持Chrome调试
- java 跳转deeplink链接_Deeplink(深度链接)唤起App,怎样实现无缝跳转
- windows配置双网卡 windows同时使用内网和外网
- 【真·一篇就够了】网络优秀博文汇总
- 管易云对接打通金蝶云星空仓库查询接口与仓库新增接口