手机上的一个抓娃娃小游戏原型,有设定抓住的几率,这里就不做判断了,只实现抓取的效果!
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;}