在正文的第一句加入“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”

兔兔配对小游戏

前言

最近发现“兔了个兔”创意投稿，之前项目里写过很多小游戏，发现其中有的小游戏萌萌的，刚好正对兔兔这个角色，想着就将老代码拉了出来，整吧，发现比较好玩，小游戏很简单，两两配对，配对成功则消失，可以一直翻卡牌！现在看看配对简化后是多么简单吧！

预览效果

小游戏讲解

每次可以翻一次，翻下一个时，当前会恢复，游戏时就是控制正面背景和背部背景，每个卡牌翻开时，给它展示当前位置兔子图片。

总共分三种状态：

1.default:未翻开，默认状态；

2.open:已翻开未和上次配对，展示兔子图片；

3.active:已翻开和上次配对，展示兔子图片，设置消失动画；

通过三个状态分解就很简单了，

正面和反面通过backface-visibility: hidden来控制，

是否配对根据点击当前卡牌信息和上次卡牌信息对比，

当然这些都是前端来实现动画逻辑，最终的状态肯定是后端存储和返回的，这时候我们只需要保留上一次翻开卡牌信息，当卡牌点击时和上次对比来确定卡牌所属状态。

小游戏核心代码

代码基本根据上面状态来走， 控制兔子的卡牌：

<li
          v-for="(item, index) in squares"
          :key="index"
          class="pair-li"
          :class="{
            active: item.action == 'match'
          }"
        >
          <div
            @click="handleItem(item)"
            class="item-group"
            :class="{
              cur: item.action == 'open',
              active: item.action == 'match',
              ie: isIE
            }"
          >
            <img
              src="https://img.csgo.com.cn/csgostatic/csgo/3bd010b4-dac2-4116-a3b9-2b3b4495e197.gif"
              alt=""
              class="item-gif"
              v-if="item.action == 'match'"
            />
            <div class="back"></div>
            <div class="just">
              <img :src="curImgs[item.target_asset - 1]" alt="" />
            </div>
          </div>
        </li>

卡牌消失动效就是动态显隐一个效果图；

点击handleItem()判断卡牌信息匹配这里简化了；

这样一个不到100行的原创配对小游戏就完成了！

后续

当然还有一些翻开就常显的，可以直接改改cur这个class的判断条件，存进所有翻过的卡牌index，简单打开思路，可以自己开发玩玩！