去年為聯通制作雙十一活動，做四個小游戲：‘配對消消樂’、移動拼圖、抓娃娃、倒計時。 現在先做來分享一下制作抓娃娃游戲時的經驗 先上效果圖

游戲規則：在指定時間內抓到上圖四張卡片為挑戰成功。 現在直接說游戲主要內容：娃娃滾動、爪子向下抓取、抓到卡片 廢話不多說直接上代碼！（此樣式是根據需求而定）

<!--布局樣式--><div class='game'> <!--爪子--> <div class='paw'> <div class='pawer'></div> <div class='pawerPic'> <img src='http://m.b3g6.com/assets/img/zhuashou.png' /> <div v-if='gzShow2'> <img :src='http://m.b3g6.com/bcjs/t_img' /> </div> </div> </div> <!--區域--> <div class='area'> <!--娃娃滾動--> <div ref='pack'> <div ref='imgs'> <img v-for='img in imgs' : :src='http://m.b3g6.com/bcjs/img.img' :key='img.id' :alt='img.isSuc' /> </div> </div> </div> <span @click='zhua'></span> </div>

// 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值（因為爪子和繩子是分開的）。 當爪子到達下面時，獲取每個卡片的位置，與爪子當前位置作比較，看爪子是否在某個卡片的指定抓取區域內來判斷是否抓到卡片，然后上升。 上代碼！！！

代碼全部貼上了，很多功能都是因為自己的需求去加的。 第一次寫文章，可能具體的表述不清楚。

到此這篇關于vue制作抓娃娃機的示例代碼的文章就介紹到這了,更多相關vue 抓娃娃機內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！