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

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

复制代码

// 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值(因为爪子和绳子是分开的)。 当爪子到达下面时，获取每个卡片的位置，与爪子当前位置作比较，看爪子是否在某个卡片的指定抓取区域内来判断是否抓到卡片，然后上升。 上代码！！！

zhua() {

let that = this;

that.t_img = "";

that.gzShow2 = false;

var long = $(".game").height() - 230; //爪子伸长的距离

$(".pawer").animate(

{

height: long

},

1000

); //伸下去(绳子)

$(".pawerPic").animate(

{

top: long + 10

},

1000

); //伸下去(爪子)

setTimeout(function() {

that.ok_no();

}, 1000); /* 判断抓没抓到娃娃 */

$(".pawer").animate(

{

height: 10

},

1000

); //伸上去(绳子)

$(".pawerPic").animate(

{

top: 20

},

1000

); //伸上去(爪子)

},

ok_no() {

let that = this;

/* 打印出此时此刻每个娃娃的位置 */

let width = $("#sel1 img").width();

console.log(width);

for (let i = 0; i < $("#sel1 img").length; i++) {

let l =

$("#sel1 img").eq(i).offset().left +width / 2; // 此时此刻每个娃娃的位置

if (l - 15 <= that.talon && that.talon <= l + 15) { // 这里的15是用来控制爪子的位置到卡片的哪些区域算抓到，可自行修改

that.gzShow2 = true;

that.t_img = $("#pack img") .eq(i - 1).attr("src");

let isSuc = $("#pack img").eq(i - 1).attr("alt");

if (isSuc !== undefined) {

switch (isSuc) {

case "1":

that.isE = false;

break;

case "2":

that.isS = false;

break;

case "3":

that.isI = false;

break;

case "4":

that.isM = false;

break;

default:

break;

}

that.isSuc.push(parseInt(isSuc));

}

let ok = that.isContained(that.isSuc, that.success);

if (ok == true) {

console.log('成功')

} else {

console.log("狗屎都没抓到");

}

}

},

// 判断抓到的数组是否中奖

isContained(a, b) {

if (!(a instanceof Array) || !(b instanceof Array)) return false;

if (a.length < b.length) return false;

var aStr = a.toString();

for (var i = 0, len = b.length; i < len; i++) {

if (aStr.indexOf(b[i]) == -1) return false;

}

return true;

},

复制代码

代码全部贴上了，很多功能都是因为自己的需求去加的。 第一次写文章，可能具体的表述不清楚。

点个赞吧~~