H5抽奖小游戏万圣节抓南瓜

效果如下：

游戏规则：

1. 把行走的南瓜拖到下方的"锅里"
2. 游戏倒计时30s，时间越短南瓜速度越快，抓住的南瓜积分达到120分即可获得抽奖机会

整体思路：

1. 圈出南瓜行走区和煮锅区
2. 南瓜从行走区右方随机位置出现
3. 给南瓜添加“跳走”的动画
4. 南瓜“跳出”行走区后删除
5. 拖曳南瓜的时候检测touchmove事件，实时改变南瓜的位置
6. 拖曳的南瓜到达煮锅区的时候，南瓜被煮增加积分，删除南瓜
7. 时间到判断积分是否获得抽奖机会，然后抽奖或是再玩一次

关键代码：

<script>
    var param={
        ppkTime:30,//单次游戏总时间
        t:300,//跳一下需要的时间
        ppkNum:0,//抓到的南瓜数量
        out_time:500,//南瓜出来的速度
        inter:10//抓一个南瓜所得积分
    };
    function CatchPumpkin(fig){
        this.out_time=fig.out_time;
        this.ppkTime=fig.ppkTime;
        this.ppkNum=fig.ppkNum;
        this.inter=fig.inter;
        this.t=fig.t;
        this.init=function(){
          let that=this;
            that.jump();
            that.randomOut();
            that.timer();
            $(".catchNum").html(that.ppkNum)
        };
        var timer2,timer3;
//        南瓜跳
        this.jump=function(){
            let that=this;
            var leftN=(Math.random()*20+20);
            timer2=setInterval(function(){
                $(".pumpkin").removeClass("on").animate({"left":"-="+leftN+"px","top":"-=20px"},that.t/2);
                $(".pumpkin").animate({"left":"-="+leftN+"px","top":"+=20px"},that.t/2,function(){
                    $(".pumpkin").addClass("on");
                });
            },that.t);
        };
//        随机南瓜
        this.randomOut=function(){
            let that=this;
            timer3=setInterval(function(){
                var topN=(Math.random()*3);
                $(".run-pumpkin").append("<span class='pumpkin on' style='top:"+topN+"rem;'</span>");
                that.catch();
                that.jump();
            },that.out_time)
        };
//        倒计时
        this.timer=function(){
            let that=this;
            $(".time span").html(that.ppkTime);
            var timer1=setInterval(function(){
                that.t-=5;
                $(".pumpkin").each(function(i,e){
                    if(e.offsetLeft<-155){
                        e.remove();
                    }
                });
                clearInterval(timer2);
                if(that.ppkTime>0){
                    that.ppkTime-=1;
                    if(that.ppkTime<10){
                        that.ppkTime="0"+that.ppkTime;
                    }
                }else{
                    $(".pumpkin").remove();
                    clearInterval(timer1);
                    clearInterval(timer2);
                    clearInterval(timer3);
                    //游戏时间到
                    var totalInter = that.ppkNum*that.inter;
                    //本轮总积分
                    $(".inter").html(totalInter+"积分")
                    //判断是否满120积分
                    if(totalInter<120){
                       $(".drawNow").hide();
                    }else {
                        $(".onceAgain").hide()
                    }
                    $(".gameOver").show();
                }
                $(".time span").html(that.ppkTime);
            },1000)
        };
//        抓南瓜
        this.catch=function() {
            var that=this;
            // 拖曳
            $(".pumpkin").each(function(){
                var this_ = $(this)
                var pan,pumpkin_top,
                        pan_left, pan_right, pan_top,
                        this_left,this_top;
                this_.on('touchstart', function(evt) {
                    pan=$(".pan");
                    pumpkin_top = this_.parent().position().top;
                    pan_left = pan.position().left;//锅的左边距
                    pan_right = pan.position().left+pan.width();//锅的右边距
                    pan_top = pan.position().top;//锅的上边距
                    var e = event || evt;
                    e.preventDefault();
                }).on('touchmove', function(evt) {
                    var e = event || evt;
                    e.preventDefault();
                    if (e.targetTouches.length == 1) {
                        var touch = e.targetTouches[0];  // 把元素放在手指所在的位置
                        this_.css("left",(touch.pageX- parseInt(this_.width())/2 + 'px'));
                        this_.css("top",(touch.pageY -pumpkin_top - parseInt(this_.height())/2 + 'px'));
                        this_.stop();
                        this_left = this_.position().left;
                        this_top = this_.position().top;
                        //到达锅的区域
                        if(this_left>pan_left && this_left<pan_right && this_top+pumpkin_top>pan_top){
                            this_.remove();
                            $(".catchNum").html(that.ppkNum+=1);
                        }
                    }
                }).on('touchend', function(evt) {
                    var e = event || evt;
                    e.preventDefault();
                })
            });
        }
    }
   var start = new CatchPumpkin(param);
   start.init();
</script>

小白菜一枚，欢迎指正(〃‘▽’〃)
完整代码：https://github.com/bestjhh/pumpkin