用android做图片翻牌小游戏,vue制作翻牌配对小游戏

简友们，好久不见。最近一直忙于工作没时间来为大家分享经验，刚好上周为联*做了一个七夕活动，是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;</