娃娃机项目框架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;}