去年为联通制作双十一活动，做四个小游戏：‘配对消消乐'、移动拼图、抓娃娃、倒计时。 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图
游戏规则：在指定时间内抓到上图四张卡片为挑战成功。 现在直接说游戏主要内容：娃娃滚动、爪子向下抓取、抓到卡片 废话不多说直接上代码！（此样式是根据需求而定）
<!--布局样式--> <div class="game"> <!--爪子--> <div class="paw"> <div class="pawer"></div> <div class="pawerPic"> <img src="/UploadFiles/2021-04-02/zhuashou.png">// css .game { width: 80%; height: 730px; background: url(./../assets/img/interface_1.png) no-repeat; background-size: 100%; animation: bg infinite 0.6s; position: relative; top: -60px; left: 0; z-index: 2; .paw { position: relative; top: 10%; } .pawer { width: 20px; background: rgb(170, 219, 254); height: 10px; position: absolute; top: 20px; left: 51%; margin-left: -15px; border-left: 1px solid rgba(42, 59, 156, 0.7); border-right: 1px solid rgba(42, 59, 156, 0.7); } .pawerPic { width: 95px; // height:85px; position: absolute; top: 30px; left: 51%; margin-left: -55px; img { width: 100%; } .win { position: absolute; bottom: -60px; } } .area { width: 100%; height: 500px; // overflow:hidden; position: absolute; // top:40px; left: 0; bottom: 40px; } /*娃娃滚动*/ #pack { width: 80%; white-space: nowrap; overflow: hidden; position: absolute; bottom: 60px; left: 10%; #sel1 { display: block; img { display: block; width: 130px; height: 150px; float: left; margin-left: 20px; } } } .button { display: block; width: 130px; height: 90px; background: url(./../assets/img/button.png) no-repeat; background-size: 100%; position: absolute; bottom: 20px; left: 40%; } }接下来就是卡片滚动，设置定时器，给卡片模块设置transform 让卡片从右向左匀速移动。
mounted() { this.wawa(); this.talon = $(".pawerPic").offset().left + 100; // 首先获取爪子的位置(这里是固定的) } wawa() { var pack = this.$refs.pack, width = $("#pack").width(), imgsWidth = (this.imgs.length * width) / 3, initLeft = 0; this.chatTimer = setInterval(function() { initLeft++; if (imgsWidth - initLeft < width + 60) { initLeft = 0; } $("#sel1").css({ width: imgsWidth, transform: "translateX(-" + initLeft + "px)" }); }, 15); },再接着就是点击按钮控制爪子上下移动抓取卡片。 首先固定爪子的位置，上图代码中mounted里面的talon，然后设置爪子到下面的终止距离（差不多能够到卡片），为爪子设置动画改变top值，拉长绳子改变height值（因为爪子和绳子是分开的）。 当爪子到达下面时，获取每个卡片的位置，与爪子当前位置作比较，看爪子是否在某个卡片的指定抓取区域内来判断是否抓到卡片，然后上升。 上代码！！！
代码全部贴上了，很多功能都是因为自己的需求去加的。 第一次写文章，可能具体的表述不清楚。