抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志。这个分享对我们这些非专职前端的phper来说很关键。虽然简单,但是功能也是都实现了的。不过该游戏是爪子不动,娃娃循环移动但是公司需求是爪子左右移动,娃娃不移动。笔者用vue进行重构这里先把借鉴的代码给大家共享下,后面有时间再上vue二次重构的h5抓娃娃百度网盘...
·
由于公司需求,着手研究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 = this
clearInterval(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 = true
this.endShow = false
},
/* 娃娃消失 */
end () {
$('.pawerPic').removeClass('on')
this.gzShow1 = true
this.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 = this
let 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分份代码所实现的效果图
已完成公司产品图:
更多推荐
已为社区贡献9条内容
所有评论(0)