简友们，好久不见。最近一直忙于工作没时间来为大家分享经验，刚好上周为联*做了一个七夕活动，是vue做的一个翻牌配对小游戏，上线后吸引了无数广大好友前来挑战。也有好友问我这游戏制作难不难呢，可不可以分享一下呢。当然可以，今天它来了！
gif4.gif
简单介绍一下，开始游戏之后开始点击卡片进行翻转，在点击第二张卡片时去判断是否和第一张配对，如果配对成功直接用动画隐掉这两张，如果失败在点击第三张时让前两张翻转过去...以此类推
接下来先看页面布局部分：
<ul class="gameTab father">
<li
:class="isRotate ? 'rotate' : ''"
v-for="img in imgs"
:key="img.id"
@click="flip(img)"
ref="card"
>
<img :src="img.img" class="card front" ref="cardz" /> <!-- 卡片正面图片 -->
<div class="card back" ref="cardf"></div> <!-- 卡片背面背景 -->
</li>
</ul>
// css部分：
// 消失动画
@keyframes vanish {
0% {
transform: rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: rotate(360deg) scale(0);
opacity: 0;
}
}
.gameTab {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 95%;
margin: 20px auto 20px auto;
.rotate {
animation: vanish 0.5s forwards;
}
li {
width: 24%;
height: 150px;
margin: 2px;
position: relative;
cursor: pointer;
perspective: 800px;
.card {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
line-height: 130px;
text-align: center;
cursor: pointer;
transition: 0.3s ease-in-out;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
background-color: #3949c0;
z-index: 2;
transform: rotateY(-180deg);
}
.back {
background: url('./../assets/img/peidui.png') no-repeat;
background-size: 100% 100%;
z-index: 1;
transform: rotateY(0);
}
}
}
在这里我们可以看到布局其实很简单，用ul>li 以及vue的v-for循环来进行卡片的布局。动态设置的class样式是卡片消失的动画，样式也是简单的布局设置。
接下来看图片的json数据：
imgs: [
{
id: 1,
img: require("./../assets/img/男1.png"),
is_sign: 1,
},
{
id: 2,
img: require("./../assets/img/男2.png"),
is_sign: 2,
},
{
id: 3,
img: require("./../assets/img/男3.png"),
is_sign: 3,
},
{
id: 4,
img: require("./../assets/img/男4.png"),
is_sign: 4,
},
{
id: 5,
img: require("./../assets/img/男5.png"),
is_sign: 5,
},
{
id: 6,
img: require("./../assets/img/男6.png"),
is_sign: 6,
},
{
id: 7,
img: require("./../assets/img/男7.png"),
is_sign: 7,
},
{
id: 8,
img: require("./../assets/img/男8.png"),
is_sign: 8,
},
{
id: 9,
img: require("./../assets/img/男9.png"),
is_sign: 9,
},
{
id: 10,
img: require("./../assets/img/男10.png"),
is_sign: 10,
},
{
id: 11,
img: require("./../assets/img/女1.png"),
is_sign: 1,
},
{
id: 12,
img: require("./../assets/img/女2.png"),
is_sign: 2,
},
{
id: 13,
img: require("./../assets/img/女3.png"),
is_sign: 3,
},
{
id: 14,
img: require("./../assets/img/女4.png"),
is_sign: 4,
},
{
id: 15,
img: require("./../assets/img/女5.png"),
is_sign: 5,
},
{
id: 16,
img: require("./../assets/img/女6.png"),
is_sign: 6,
},
{
id: 17,
img: require("./../assets/img/女7.png"),
is_sign: 7,
},
{
id: 18,
img: require("./../assets/img/女8.png"),
is_sign: 8,
},
{
id: 19,
img: require("./../assets/img/女9.png"),
is_sign: 9,
},
{
id: 20,
img: require("./../assets/img/女10.png"),
is_sign: 10,
},
],
这里用is_sign来代表各张图片，后续可判断is_sign是否一致来判断是否配对成功。
// 随机图片位置
randomRender() {
let imgs = this.imgs,
results = [];
results = imgs.sort(() => {
return Math.random() > 0.5 ? -1 : 1;
});
this.imgs = results;
},
图片数据定好之后，我们初始随机图片位置，确保每次游戏的图片位置不一样。
点击卡片事件代码如下（讲解在每一步的注释中）：
// 点击翻牌
flip(img) {
// 判断是否点击开始游戏
if (this.isStar) {
// 初始在data中定义空数组 ids；
// 判断是否连续点击相同的牌 不同时添加到数组中
if (img !== this.ids[0]) {
// 翻转卡片
this.$refs.cardz[img.id - 1].style.transform = "rotateY(0)";
this.$refs.cardf[img.id - 1].style.transform = "rotateY(180deg)";
this.ids.push(img);
}
// 当已经存进两张卡片时，去判断两张是否配对，如配对成功就将两张卡片消失，并记录一次
if (this.ids.length == 2) {
if (this.ids[0].is_sign === this.ids[1].is_sign) {
for (let i = 0; i < this.ids.length; i++) {
this.$refs.card[this.ids[i].id - 1].className = "rotate";
}
this.ids.splice(0, 2);
// 配对成功记录一次 当success = 10 时 挑战成功
this.success++;
if (this.success == 10) {
clearInterval(this.timer);
// 游戏成功 关闭计时器 展示成功弹窗
}
}
} else if (this.ids.length > 2) {
// 若前两张未配对成功 当翻开三张牌时 让前两张翻过去 并将数组中这俩卡片数据删除
let x = this.ids.find((value, index, arr) => {
if (index < 2) {
return arr[index] == img;
}
});
if (x == undefined) {
for (let i = 0; i < this.ids.length - 1; i++) {
this.$refs.cardz[this.ids[i].id - 1].style.transform =
"rotateY(180deg)";
this.$refs.cardf[this.ids[i].id - 1].style.transform =
"rotateY(0)";
}
this.ids.splice(0, 2);
} else {
this.ids.splice(this.ids.length - 1, 1);
}
}
} else {
Toast("请点击开始游戏");
}
}
代码每一步的具体思路讲解在代码中的注释里（想的是根据代码来讲解每一步可能会更清楚一点 -.-!!）
逻辑其实很简单，就是判断点击的两张是否配对，成则消失败则回翻。
游戏代码大致就是这样啦~
如果有不懂的可以评论说出你的疑问哦~或者你有更好的见解也可以共同研究研究哦
