由於公司需求,著手研究H5抓娃娃，從網上找到一份簡單的jQuery手機H5抓娃娃機程式碼.先感謝下最初始分享程式碼的那位通知。這個分享對我們這些非專職前端的phper來說很關鍵。雖然簡單，但是功能也是都實現了的。不過該遊戲是爪子不動，娃娃迴圈移動

但是公司需求是爪子左右移動，娃娃不移動。

筆者用vue進行重構

這裡先把借鑑的程式碼給大家共享下，後面有時間再上vue二次重構的h5抓娃娃

百度網盤下載連結:

連結:百度網盤-抓娃娃  （jquery版本）

密碼:t28m

(1)jquery版本

<script>
window.onload=function(){
	var k=0;//可以點選
	var c=0;//娃娃的
	scrollLeft();//娃娃滾動
	var talon=$(".pawerPic").offset().left+55//首先獲取爪子的位置(這裡是固定的)
	console.log(talon)
	/*宣告變數*/
	var areaHeight=$("body").height()-150//活動區域的高
	var long=areaHeight-115//爪子伸長的距離(目前娃娃的高度暫定為115px;)
	/*賦值給活動區域高度*/
	$(".area").css({height:areaHeight})
	/*娃娃滾動*/
	function scrollLeft(){
	var speed=20;
	var yu=$("#sel1").html();
	$("#sel2").html(yu);
		function Marquee(){
		c++
		if($("#sel2").width()-$("#pack").scrollLeft()<=0){
		c=0        
		$("#pack").scrollLeft(c);
			}else{
			$("#pack").scrollLeft(c);
			}
		}//Marquee結束
		var timer=setInterval(Marquee,speed);
		/*點選按鈕*/
		$(".btn_star").bind('touchstart',function(){
			$(this).css({display:"none"})//單純的按鈕樣式
			$(".pawer").animate({height:long},2000);//伸下去(繩子)
			$(".pawerPic").animate({top:long+20},2000);//伸下去(爪子)
			/*抓到娃娃*/
			function fn(t_img){
			$(".pawerPic").addClass("on");
			$(".win img").attr("src",t_img)
		};
			/*娃娃消失*/
			function end(){
			$(".pawerPic").removeClass("on")
			}
			/*按鈕點選*/
			function btn(){
			$(".btn_star").css({display:"block"})
			}//控制按鈕是否可以點選
			/*判斷抓沒抓到娃娃*/
			if_ok=setTimeout(ok_no,2000);
			function ok_no(){
				/*打印出此時此刻每個娃娃的位置*/
				for(var i=0;i<$("#pack img").length;i++){
				var l=$("#pack img").eq(i).offset().left+41.61//此時此刻每個娃娃的位置
				if(l-20<=talon&&talon<=l+20){
					alert("你抓到了狗屎")
					var t_img=$("#pack img").eq(i).attr("src")
					time_zz=setTimeout(fn(t_img),0)
					return
				}
				/*然後和爪子的位置進行比較*/
					console.log("狗屎都沒抓到")
					
				}
			}
			/*事件呼叫*/
			//time_zz=setTimeout(fn,2000);//抓到娃娃
			time_xs=setTimeout(end,4000);//娃娃消失
			time_ww=setTimeout(btn,4000);//按鈕點選
			$(".pawer").animate({height:20},2000);//縮回來(繩子)
			$(".pawerPic").animate({top:40},2000);//縮回來(爪子)
			})
	}//scrollLeft結束
}//window.onload結束
</script>
 

 (2)vue版本

(簡單版)圖片資源請到上面的百度網盤自取,請記得

npm install jquery --save

npm install mint-ui -S

目前vue版本複雜版的抓娃娃，已經寫完，但是是公司業務，不便分享，大體思想還是一樣的

<template>
    <div class="amap-page-container">

        <div class="box">
            <!--爪子-->
            <div class="paw">
                <div class="pawer"></div>
                <div class="pawerPic">
                    <img src="../../assets/images/jiazi.png" class="lose" v-if="gzShow1">
                    <div class="win" v-if="gzShow2">
                        <img :src="t_img">
                    </div>
                </div>
            </div>
            <!--區域-->
            <div class="area">
                <!--娃娃滾動-->
                <div id="pack">
                    <div id="sel1">
                        <img src="../../assets/images/mks1.png" tr="1">
                        <img src="../../assets/images/mks2.png" tr="2">
                        <img src="../../assets/images/mks3.png" tr="3">
                        <img src="../../assets/images/mks4.png" tr="4">
                    </div>
                </div>
            </div>
            <!--按鈕(真)-->
            <div class="btn">
                <!--點選前-->
                <div class="btn_star" @click="start" v-show="startShow"></div>
                <!--點選後-->
                <div class="btn_end" v-show="endShow"></div>
            </div>
        </div>
    </div>
</template>

<script>
  import $ from 'jquery'

  import { Toast, MessageBox } from 'mint-ui'
  export default {
    data () {
      return {
        showDialogStyle: false, // 顯示抓到的禮物
        gzShow1: true, // 初始下拉的鉤子
        gzShow2: false, // 上拉的鉤子
        long: '',
        areaHeight: '',
        talon: '',
        startShow: true, // 開始按鈕的顯示
        endShow: false,
        interval: '', // 設定的週期
        screenHeight: document.documentElement.clientHeight, // 螢幕尺寸
        startXDirection: 0, // x軸是否返回的狀態，0是值++即向右邊移動，1是值--即向左邊返回
        t_img: '../../assets/images/mks1.png'// 抓起的禮物圖片
      }
    },
    mounted: function () {
      // 活動區域的高
      this.areaHeight = this.screenHeight - 150
    // 爪子伸長的距離(目前娃娃的高度暫定為115px;)
      this.long = this.areaHeight - 115
    /* 賦值給活動區域高度 */
      $('.area').css({height: this.areaHeight})
      this.setGrabInterval()
    },
    components: {
      Toast,
      MessageBox
    },
    methods: {
      /* 點選按鈕 */
      start () {
        let _this = this
        clearInterval(this.interval)// 去除鉤子左右滑動週期事件

        _this.talon = $('.pawerPic').offset().left + 55// 首先獲取爪子的位置(這裡是固定的)
        _this.startShow = false
        _this.endShow = true

        $('.pawer').animate({height: this.long}, 2000)// 伸下去(繩子)
        $('.pawerPic').animate({top: this.long + 30}, 2000, '', function () {
          _this.gzShow2 = true
        })// 伸下去(爪子)

        // /*事件呼叫*/
        setTimeout(function () { _this.ok_no() }, 2000)/* 判斷抓沒抓到娃娃 */
        setTimeout(function () { _this.end() }, 4000)// 娃娃消失
        setTimeout(function () { _this.btn() }, 4000)// 按鈕點選

        $('.pawer').animate({height: 20}, 2000)// 縮回來(繩子)
        $('.pawerPic').animate({top: 40}, 2000, '', function () {
          _this.setGrabInterval()
          // MessageBox.confirm('確定執行此操作?').then(action => {
          //   console.log(action)
          // });
        })// 縮回來(爪子)
      },
      /* 抓到娃娃 */
      fn (img) {
        $('.win img').attr('src', img)
        $('.pawerPic').addClass('on')
      },
      btn () {
        this.startShow = true
        this.endShow = false
      },
      /* 娃娃消失 */
      end () {
        $('.pawerPic').removeClass('on')
        this.gzShow1 = true
        this.gzShow2 = false
      },
      ok_no () {
        let _this = this
      /* 打印出此時此刻每個娃娃的位置 */
        for (let i = 0; i < $('#pack img').length; i++) {
          let l = $('#pack img').eq(i).offset().left + 41.61// 此時此刻每個娃娃的位置
          if (l - 10 <= this.talon && this.talon <= l + 10) {
            this.t_img = $('#pack img').eq(i).attr('src')

            setTimeout(function () { _this.fn(_this.t_img) }, 0)
            return
          }
          /* 然後和爪子的位置進行比較 */
        }
        Toast('狗屎都沒抓到')
      },
      // 爪子設定週期左右滑動
      setGrabInterval () {
        let _this = this
        let objPaw = $('.pawerPic') // 爪子
        let objGrab = $('.pawer') // 繩子
        let pawLeft = objPaw.offset().left + 50// 爪子距離左部的位置
        let grabLeft = objGrab.offset().left// 繩子距離左部的位置
        let winWidth = $(window).width()// 頁面的寬
        this.interval = setInterval(function () {
          if (_this.startXDirection == 0) {
            objPaw.css('left', pawLeft++)
            objGrab.css('left', grabLeft++)
          } else if (_this.startXDirection == 1) {
            objPaw.css('left', pawLeft--)
            objGrab.css('left', grabLeft--)
          }
          if (pawLeft - 55 <= 0) {
            _this.startXDirection = 0
          } else if (pawLeft >= winWidth - 55) {
            _this.startXDirection = 1
          }
        }, 10)
      }
    }
  }
</script>

<style lang="less" scoped>
    .amap-page-container {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .box{
        width:100%;
        height:100%;
        background:url(../../assets/images/zwwbj.jpg) no-repeat center;
        background-size:cover;
    }
    .paw{
        width:100%;
        height:20px;
        background:#8d3835;
        position:relative;
        box-shadow:2px 2px 5px rgba(0,0,0,0.3)
    }
    .pawer{
        width:10px;
        background:#565656;
        height:20px;
        position:absolute;
        top:20px;
        left:50%;
        margin-left:-5px;
        box-shadow:2px 2px 5px rgba(0,0,0,0.3)
    }
    .pawerPic{
        width:110px;
        height:85px;
        position:absolute;
        top:40px;
        left:50%;
        margin-left:-55px;
    }
    .lose{
        width:100px;
        height:85px;
        display:block;
        margin:0 auto;
    }
    .pawerPic.on .lose{
        display:none;
    }
    .pawerPic.on .win{
        display:block;
    }
    .win{
        width:110px;
        height:105px;
        display:none;
        margin:0 auto;
        background:url(../../assets/images/jiazi2.png);
        background-size:cover;overflow:hidden;
    }
    .win img{
        display:block;
        margin:0 auto;
        margin-top:12px;
    }
    .btn{
        width:120px;
        height:120px;
        position:absolute;
        bottom:0;
        left:50%;
        margin-left:-60px;
    }
    .btn.on .btn_star{
        display:none;
    }
    .btn_star{
        background:url(../../assets/images/kaishi.png) no-repeat center;
        background-size:contain;
        width:120px;
        height:120px;
    }
    .btn_end{
        background:url(../../assets/images/kaishi2.png) no-repeat center;
        background-size:contain;
        width:120px;
        height:120px;
    }
    .area{
        width:100%;
        height:auto;
        overflow:hidden;
        position:absolute;
        top:40px;
        left:0;
    }
    /*娃娃滾動*/
    #pack{
        width:100%;
        height:90px;
        white-space:nowrap;
        overflow:hidden;
        position:absolute;
        bottom:0;
        left:0;
    }
    #sel1{
        display:inline;
    }
    #pack img{
        display:inline-block;
        height:90px;
    }
</style>
 

上面2分份程式碼所實現的效果圖

已完成公司產品圖: