vue制作抓娃娃机的示例代码


Posted in Javascript onApril 17, 2020

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

vue制作抓娃娃机的示例代码

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

<!--布局样式-->
<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 抓娃娃机内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
js定时器实例分享
Dec 20 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
node.js实现的装饰者模式示例
Sep 06 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
tracking.js实现前端人脸识别功能
Apr 16 #Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 #Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 #Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 #Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 #Javascript
vue下canvas裁剪图片实例讲解
Apr 16 #Javascript
You might like
php URL验证正则表达式
2011/07/19 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
js form action动态修改方法
2008/11/04 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python 编写简单网页服务器的实例
2018/06/01 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python通过字典映射函数实现switch
2020/11/06 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers