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

游戲規(guī)則：在指定時間內(nèi)抓到上圖四張卡片為挑戰(zhàn)成功。 現(xiàn)在直接說游戲主要內(nèi)容：娃娃滾動、爪子向下抓取、抓到卡片 廢話不多說直接上代碼?。ù藰邮绞歉鶕?jù)需求而定）

<!--布局樣式--><div class='game'> <!--爪子--> <div class='paw'> <div class='pawer'></div> <div class='pawerPic'> <img src='http://www.cgvv.com.cn/assets/img/zhuashou.png' /> <div v-if='gzShow2'> <img :src='http://www.cgvv.com.cn/bcjs/t_img' /> </div> </div> </div> <!--區(qū)域--> <div class='area'> <!--娃娃滾動--> <div ref='pack'> <div ref='imgs'> <img v-for='img in imgs' : :src='http://www.cgvv.com.cn/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%; } }

接下來就是卡片滾動，設(shè)置定時器，給卡片模塊設(shè)置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); },

再接著就是點(diǎn)擊按鈕控制爪子上下移動抓取卡片。 首先固定爪子的位置，上圖代碼中mounted里面的talon，然后設(shè)置爪子到下面的終止距離（差不多能夠到卡片），為爪子設(shè)置動畫改變top值，拉長繩子改變height值（因為爪子和繩子是分開的）。 當(dāng)爪子到達(dá)下面時，獲取每個卡片的位置，與爪子當(dāng)前位置作比較，看爪子是否在某個卡片的指定抓取區(qū)域內(nèi)來判斷是否抓到卡片，然后上升。 上代碼?。。?/p>

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

到此這篇關(guān)于vue制作抓娃娃機(jī)的示例代碼的文章就介紹到這了,更多相關(guān)vue 抓娃娃機(jī)內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！