时间:2021-05-26
去年为联通制作双十一活动,做四个小游戏:‘配对消消乐'、移动拼图、抓娃娃、倒计时。 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图
游戏规则:在指定时间内抓到上图四张卡片为挑战成功。 现在直接说游戏主要内容:娃娃滚动、爪子向下抓取、抓到卡片 废话不多说直接上代码!(此样式是根据需求而定)
<!--布局样式--><div class="game"> <!--爪子--> <div class="paw"> <div class="pawer"></div> <div class="pawerPic"> <img src="./../assets/img/zhuashou.png" class="lose" /> <div class="win" v-if="gzShow2"> <img :src="t_img" /> </div> </div> </div> <!--区域--> <div class="area"> <!--娃娃滚动--> <div id="pack" ref="pack"> <div id="sel1" class="father" ref="imgs"> <img v-for="img in imgs" :class="img.isSuc ? 'yes' : 'no'" :src="img.img" :key="img.id" :alt="img.isSuc" /> </div> </div> </div> <span class="button" @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 抓娃娃机内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在当前时代,无论你是逛街还是逛商场,相信你总是会看到娃娃机的影子。娃娃机现在也成为了人们消遣娱乐的一种生活方式,因为在抓娃娃机的时候,能让人感受到在抓娃娃机
狼人杀的热度还没有下去,线上抓娃娃机又火了。线上抓娃娃机app开发之所以能够这么火,不仅是和市场需求有关,从另一个维度来看,超越时空限制的线上娃娃机具备了一
现在喜欢玩抓娃娃的伙伴还是很多的,而且现在手机上面很多抓娃娃软件,比如新浪微博新推出的微博抓娃娃,让伙伴都迫不及待的想玩,很多小伙伴都在问微博抓娃娃打不开怎
李先生在重庆经营着抓娃娃机生意。从去年春天以来,他一直想方设法认识重庆各大商场的负责人,尽可能找门路,把自己的娃娃机投放到商场。今年开始,李先生突然发现身边的竞
再来百度指数和微信指数,它们的数据显示,“幸运盒子”和口红机的搜索热度在刚开始时经历了一段迅猛的提升,现在逐渐下降趋于平缓,跟抓娃娃机的热度相当。自动贩卖机是新