抓娃娃机vue版本和jquery版本

由于公司需求,着手研究H5抓娃娃，从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志。这个分享对我们这些非专职前端的phper来说很关键。虽然简单，但是功能也是都实现了的。不过该游戏是爪子不动，娃娃循环移动

但是公司需求是爪子左右移动，娃娃不移动。

笔者用vue进行重构

这里先把借鉴的代码给大家共享下，后面有时间再上vue二次重构的h5抓娃娃

百度网盘下载链接:

链接:百度网盘-抓娃娃（jquery版本）

密码:t28m

(1)jquery版本

<script>
window.onload=function(){var k=0;//可以点击var c=0;//娃娃的scrollLeft();//娃娃滚动var talon=$(".pawerPic").offset().left+55//首先获取爪子的位置(这里是固定的)console.log(talon)/*声明变量*/var areaHeight=$("body").height()-150//活动区域的高var long=areaHeight-115//爪子伸长的距离(目前娃娃的高度暂定为115px;)/*赋值给活动区域高度*/$(".area").css({height:areaHeight})/*娃娃滚动*/function scrollLeft(){var speed=20;var yu=$("#sel1").html();$("#sel2").html(yu);function Marquee(){c++if($("#sel2").width()-$("#pack").scrollLeft()<=0){c=0        $("#pack").scrollLeft(c);}else{$("#pack").scrollLeft(c);}}//Marquee结束var timer=setInterval(Marquee,speed);/*点击按钮*/$(".btn_star").bind('touchstart',function(){$(this).css({display:"none"})//单纯的按钮样式$(".pawer").animate({height:long},2000);//伸下去(绳子)$(".pawerPic").animate({top:long+20},2000);//伸下去(爪子)/*抓到娃娃*/function fn(t_img){$(".pawerPic").addClass("on");$(".win img").attr("src",t_img)};/*娃娃消失*/function end(){$(".pawerPic").removeClass("on")}/*按钮点击*/function btn(){$(".btn_star").css({display:"block"})}//控制按钮是否可以点击/*判断抓没抓到娃娃*/if_ok=setTimeout(ok_no,2000);function ok_no(){/*打印出此时此刻每个娃娃的位置*/for(var i=0;i<$("#pack img").length;i++){var l=$("#pack img").eq(i).offset().left+41.61//此时此刻每个娃娃的位置if(l-20<=talon&&talon<=l+20){alert("你抓到了狗屎")var t_img=$("#pack img").eq(i).attr("src")time_zz=setTimeout(fn(t_img),0)return}/*然后和爪子的位置进行比较*/console.log("狗屎都没抓到")}}/*事件调用*///time_zz=setTimeout(fn,2000);//抓到娃娃time_xs=setTimeout(end,4000);//娃娃消失time_ww=setTimeout(btn,4000);//按钮点击$(".pawer").animate({height:20},2000);//缩回来(绳子)$(".pawerPic").animate({top:40},2000);//缩回来(爪子)})}//scrollLeft结束
}//window.onload结束
</script>

(2)vue版本

(简单版)图片资源请到上面的百度网盘自取,请记得

npm install jquery --save

npm install mint-ui -S

目前vue版本复杂版的抓娃娃，已经写完，但是是公司业务，不便分享，大体思想还是一样的

<template><div class="amap-page-container"><div class="box"><!--爪子--><div class="paw"><div class="pawer"></div><div class="pawerPic"><img src="../../assets/images/jiazi.png" class="lose" v-if="gzShow1"><div class="win" v-if="gzShow2"><img :src="t_img"></div></div></div><!--区域--><div class="area"><!--娃娃滚动--><div id="pack"><div id="sel1"><img src="../../assets/images/mks1.png" tr="1"><img src="../../assets/images/mks2.png" tr="2"><img src="../../assets/images/mks3.png" tr="3"><img src="../../assets/images/mks4.png" tr="4"></div></div></div><!--按钮(真)--><div class="btn"><!--点击前--><div class="btn_star" @click="start" v-show="startShow"></div><!--点击后--><div class="btn_end" v-show="endShow"></div></div></div></div>
</template><script>import $ from 'jquery'import { Toast, MessageBox } from 'mint-ui'export default {data () {return {showDialogStyle: false, // 显示抓到的礼物gzShow1: true, // 初始下拉的钩子gzShow2: false, // 上拉的钩子long: '',areaHeight: '',talon: '',startShow: true, // 开始按钮的显示endShow: false,interval: '', // 设置的周期screenHeight: document.documentElement.clientHeight, // 屏幕尺寸startXDirection: 0, // x轴是否返回的状态，0是值++即向右边移动，1是值--即向左边返回t_img: '../../assets/images/mks1.png'// 抓起的礼物图片}},mounted: function () {// 活动区域的高this.areaHeight = this.screenHeight - 150// 爪子伸长的距离(目前娃娃的高度暂定为115px;)this.long = this.areaHeight - 115/* 赋值给活动区域高度 */$('.area').css({height: this.areaHeight})this.setGrabInterval()},components: {Toast,MessageBox},methods: {/* 点击按钮 */start () {let _this = thisclearInterval(this.interval)// 去除钩子左右滑动周期事件_this.talon = $('.pawerPic').offset().left + 55// 首先获取爪子的位置(这里是固定的)_this.startShow = false_this.endShow = true$('.pawer').animate({height: this.long}, 2000)// 伸下去(绳子)$('.pawerPic').animate({top: this.long + 30}, 2000, '', function () {_this.gzShow2 = true})// 伸下去(爪子)// /*事件调用*/setTimeout(function () { _this.ok_no() }, 2000)/* 判断抓没抓到娃娃 */setTimeout(function () { _this.end() }, 4000)// 娃娃消失setTimeout(function () { _this.btn() }, 4000)// 按钮点击$('.pawer').animate({height: 20}, 2000)// 缩回来(绳子)$('.pawerPic').animate({top: 40}, 2000, '', function () {_this.setGrabInterval()// MessageBox.confirm('确定执行此操作?').then(action => {//   console.log(action)// });})// 缩回来(爪子)},/* 抓到娃娃 */fn (img) {$('.win img').attr('src', img)$('.pawerPic').addClass('on')},btn () {this.startShow = truethis.endShow = false},/* 娃娃消失 */end () {$('.pawerPic').removeClass('on')this.gzShow1 = truethis.gzShow2 = false},ok_no () {let _this = this/* 打印出此时此刻每个娃娃的位置 */for (let i = 0; i < $('#pack img').length; i++) {let l = $('#pack img').eq(i).offset().left + 41.61// 此时此刻每个娃娃的位置if (l - 10 <= this.talon && this.talon <= l + 10) {this.t_img = $('#pack img').eq(i).attr('src')setTimeout(function () { _this.fn(_this.t_img) }, 0)return}/* 然后和爪子的位置进行比较 */}Toast('狗屎都没抓到')},// 爪子设置周期左右滑动setGrabInterval () {let _this = thislet objPaw = $('.pawerPic') // 爪子let objGrab = $('.pawer') // 绳子let pawLeft = objPaw.offset().left + 50// 爪子距离左部的位置let grabLeft = objGrab.offset().left// 绳子距离左部的位置let winWidth = $(window).width()// 页面的宽this.interval = setInterval(function () {if (_this.startXDirection == 0) {objPaw.css('left', pawLeft++)objGrab.css('left', grabLeft++)} else if (_this.startXDirection == 1) {objPaw.css('left', pawLeft--)objGrab.css('left', grabLeft--)}if (pawLeft - 55 <= 0) {_this.startXDirection = 0} else if (pawLeft >= winWidth - 55) {_this.startXDirection = 1}}, 10)}}}
</script><style lang="less" scoped>.amap-page-container {width: 100%;height: 100%;position: absolute;}.box{width:100%;height:100%;background:url(../../assets/images/zwwbj.jpg) no-repeat center;background-size:cover;}.paw{width:100%;height:20px;background:#8d3835;position:relative;box-shadow:2px 2px 5px rgba(0,0,0,0.3)}.pawer{width:10px;background:#565656;height:20px;position:absolute;top:20px;left:50%;margin-left:-5px;box-shadow:2px 2px 5px rgba(0,0,0,0.3)}.pawerPic{width:110px;height:85px;position:absolute;top:40px;left:50%;margin-left:-55px;}.lose{width:100px;height:85px;display:block;margin:0 auto;}.pawerPic.on .lose{display:none;}.pawerPic.on .win{display:block;}.win{width:110px;height:105px;display:none;margin:0 auto;background:url(../../assets/images/jiazi2.png);background-size:cover;overflow:hidden;}.win img{display:block;margin:0 auto;margin-top:12px;}.btn{width:120px;height:120px;position:absolute;bottom:0;left:50%;margin-left:-60px;}.btn.on .btn_star{display:none;}.btn_star{background:url(../../assets/images/kaishi.png) no-repeat center;background-size:contain;width:120px;height:120px;}.btn_end{background:url(../../assets/images/kaishi2.png) no-repeat center;background-size:contain;width:120px;height:120px;}.area{width:100%;height:auto;overflow:hidden;position:absolute;top:40px;left:0;}/*娃娃滚动*/#pack{width:100%;height:90px;white-space:nowrap;overflow:hidden;position:absolute;bottom:0;left:0;}#sel1{display:inline;}#pack img{display:inline-block;height:90px;}
</style>

上面2分份代码所实现的效果图

已完成公司产品图:

抓娃娃机vue版本和jquery版本相关推荐

jquery抓娃娃机代码
<html> <head> <title>jQuery抓娃娃机游戏代码 - 源码之家</title> <meta name="conte ...
抓娃娃机c语言程序设计,vue制作抓娃娃机的示例代码
去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验先上效果图游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说 ...
线上抓娃娃机火了三个月了，你玩了吗？
作者:MMBellaaa 全文共 5237 字 13图,阅读需要 11 分钟 ---- / BEGIN / ---- 最近一段时间,线上抓娃娃机APP吸引了我的注意.不仅仅是因为它是个新兴产品,还因为 ...
从街机到抓娃娃机，硬币经济也将被移动支付取代？
在人们对消费娱乐需求的扩增下,一个与硬币有关的街头经济早已形成. 国民经济水平提升后,人们的注意力从温饱到"欲"上.而在欲的追求上,消费者对环境.时间.可操作性等体验需求的不同,衍 ...
最近两周我们接触到的两种线上抓娃娃机的技术实现方案（一种RTSP/一种RTMP）
线上抓娃娃机需求最近线上抓娃娃机的项目火爆了,陆陆续续几十款线上抓娃娃机上架,还有一大波正在开发上线中,各大视频云提供商都在蹭热度发布自己的线上抓娃娃机方案,综合了一下,目前线上抓娃娃机的视频需求无 ...
电脑版抓娃娃机/怎样在电脑上实现娃娃机（抓娃娃）效果
电脑版抓娃娃机/怎样在电脑上实现娃娃机(抓娃娃)效果这个抓娃娃机本质上是由两部分构成的:一部分是硬件(用来代替键盘那种按钮(相当于映射)),一部分是软件,用来实现游戏.因为游戏大家写的都不一样,同时 ...
抓娃娃机爪不动怎么办_夹娃娃的方法攻略抓娃娃机有没有漏洞
原标题:夹娃娃的方法攻略抓娃娃机有没有漏洞夹娃娃机几乎是游乐场的标配,但是有很多人都觉得苦恼,为什么被人拎着一堆娃娃走,而自己每次都空手而归!其实这可以通过一些游戏厅夹娃娃技巧来帮助你解决.现在就 ...
抓娃娃机按钮按几下_娃娃机上有几个按钮?怎么操作,比如投币之后先干什么,当爪子......
最佳答案发布于2016.09.11 下面开始先介绍抓娃娃机:纯粹探讨夹子和娃娃类型来研究该下手的位置.1.首先就是要看爪子是否有抓力了,如果爪子很松,你可以直接换机器了,因为那没有抓起来的可能. 之前 ...
抓娃娃机按钮按几下_抓娃娃机的技巧
每次去商场或者电影院看到摆在那里的抓娃娃机是不是都手痒想去玩上几把呢,抓娃娃到底有没有技巧呢.今天就来跟大家分析一下,祝你下次一抓必中. 转夹子娃娃机的夹子一般都是3根组成.抓娃娃时,经常遇到爪子的 ...

抓娃娃机vue版本和jquery版本

抓娃娃机vue版本和jquery版本相关推荐

最新文章

热门文章