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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
RxJS在TypeScript中的简单使用详解
Apr 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Firefox div高度自适应
2009/04/28 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
原生js封装运动框架的示例讲解
2017/10/01 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python实现倒计时的示例
2014/02/14 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python简单读取json文件功能示例
2017/11/30 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
flask实现验证码并验证功能
2019/12/05 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
在校生党员自我评价
2013/09/25 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js