移动端抓娃娃机

手机上的一个抓娃娃小游戏原型，有设定抓住的几率，这里就不做判断了，只实现抓取的效果！

zww.png

HTML

    <div class="claw">
        <div class="a"></div>
        <div class="b"></div>
    </div>
    <div class="prize_box">
        <ul>
            <li><div class="prize prize_1"></div></li>
            <li><div class="prize prize_2"></div></li>
            <li><div class="prize prize_3"></div></li>
        </ul>
        <ul>
            <li><div class="prize prize_4"></div></li>
            <li><div class="prize prize_5"></div></li>
            <li><div class="prize prize_6"></div></li>
        </ul>
    </div>

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