简友们,好久不见。最近一直忙于工作没时间来为大家分享经验,刚好上周为联*做了一个七夕活动,是vue做的一个翻牌配对小游戏,上线后吸引了无数广大好友前来挑战。也有好友问我这游戏制作难不难呢,可不可以分享一下呢。当然可以,今天它来了!
首先让大家看下最后效果图:
gif4.gif
简单介绍一下,开始游戏之后开始点击卡片进行翻转,在点击第二张卡片时去判断是否和第一张配对,如果配对成功直接用动画隐掉这两张,如果失败在点击第三张时让前两张翻转过去...以此类推
接下来先看页面布局部分:
:class="isRotate ? 'rotate' : ''"
v-for="img in imgs"
:key="img.id"
@click="flip(img)"
ref="card"
>
// 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;</