簡友們，好久不見。最近一直忙于工作沒時間來為大家分享經(jīng)驗，剛好上周為聯(lián)*做了一個七夕活動，是vue做的一個翻牌配對小游戲，上線后吸引了無數(shù)廣大好友前來挑戰(zhàn)。也有好友問我這游戲制作難不難呢，可不可以分享一下呢。當然可以，今天它來了！
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循環(huán)來進行卡片的布局。動態(tài)設置的class樣式是卡片消失的動畫，樣式也是簡單的布局設置。
接下來看圖片的json數(shù)據(jù)：
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來代表各張圖片，后續(xù)可判斷is_sign是否一致來判斷是否配對成功。
// 隨機圖片位置
randomRender() {
let imgs = this.imgs,
results = [];
results = imgs.sort(() => {
return Math.random() > 0.5 ? -1 : 1;
});
this.imgs = results;
},
圖片數(shù)據(jù)定好之后，我們初始隨機圖片位置，確保每次游戲的圖片位置不一樣。
點擊卡片事件代碼如下（講解在每一步的注釋中）：
// 點擊翻牌
flip(img) {
// 判斷是否點擊開始游戲
if (this.isStar) {
// 初始在data中定義空數(shù)組 ids；
// 判斷是否連續(xù)點擊相同的牌 不同時添加到數(shù)組中
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);
}
// 當已經(jīng)存進兩張卡片時，去判斷兩張是否配對，如配對成功就將兩張卡片消失，并記錄一次
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 時 挑戰(zhàn)成功
this.success++;
if (this.success == 10) {
clearInterval(this.timer);
// 游戲成功 關閉計時器 展示成功彈窗
}
}
} else if (this.ids.length > 2) {
// 若前兩張未配對成功 當翻開三張牌時 讓前兩張翻過去 并將數(shù)組中這倆卡片數(shù)據(jù)刪除
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("請點擊開始游戲");
}
}
代碼每一步的具體思路講解在代碼中的注釋里（想的是根據(jù)代碼來講解每一步可能會更清楚一點 -.-!!）
邏輯其實很簡單，就是判斷點擊的兩張是否配對，成則消失敗則回翻。
游戲代碼大致就是這樣啦~
如果有不懂的可以評論說出你的疑問哦~或者你有更好的見解也可以共同研究研究哦
