vue制作抓娃娃机

2024-07-11 01:54| 来源: 网络整理| 查看: 265

去年为联通制作双十一活动，做四个小游戏：‘配对消消乐’、移动拼图、抓娃娃、倒计时。现在先做来分享一下制作抓娃娃游戏时的经验先上效果图

gif.gif

游戏规则：在指定时间内抓到上图四张卡片为挑战成功。现在直接说游戏主要内容：娃娃滚动、爪子向下抓取、抓到卡片废话不多说直接上代码！（此样式是根据需求而定）

// 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值（因为爪子和绳子是分开的）。当爪子到达下面时，获取每个卡片的位置，与爪子当前位置作比较，看爪子是否在某个卡片的指定抓取区域内来判断是否抓到卡片，然后上升。上代码！！！

zhua() { let that = this; that.t_img = ""; that.gzShow2 = false; var long = $(".game").height() - 230; //爪子伸长的距离 $(".pawer").animate( { height: long }, 1000 ); //伸下去(绳子) $(".pawerPic").animate( { top: long + 10 }, 1000 ); //伸下去(爪子) setTimeout(function() { that.ok_no(); }, 1000); /* 判断抓没抓到娃娃 */ $(".pawer").animate( { height: 10 }, 1000 ); //伸上去(绳子) $(".pawerPic").animate( { top: 20 }, 1000 ); //伸上去(爪子) }, ok_no() { let that = this; /* 打印出此时此刻每个娃娃的位置 */ let width = $("#sel1 img").width(); console.log(width); for (let i = 0; i < $("#sel1 img").length; i++) { let l = $("#sel1 img").eq(i).offset().left +width / 2; // 此时此刻每个娃娃的位置 if (l - 15

【本文地址】

vue制作抓娃娃机

vue制作抓娃娃机

今日新闻

推荐新闻