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学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
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 smarty模版引擎中的缓存应用
2009/12/11 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python实现图片中文字分割效果
2019/07/22 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
保安自我鉴定范文
2013/12/08 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
学校火灾防控方案
2014/06/09 职场文书
大学生就业自荐书
2014/06/16 职场文书
就业协议书
2014/09/12 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Python Flask实现进度条
2022/05/11 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android