100行代码教你写个卡牌翻翻乐小游戏

卡牌翻翻乐这种小游戏相信大家都玩过，一组卡牌随机翻面平铺在面前，用户点击卡牌翻转，两两配对消除卡牌，游戏的玩法主要是通过玩家自己对卡牌位置的记忆，快速匹配出相同的卡牌予以消除。

那么我们自己来写一个这个小游戏，大致的思路会是什么呢？首先我们先找来卡牌素材，这里取的是12张生肖图案【图片来源于网络侵删】。那么我们就一共要展示24张卡片，布局上我们就按6x4的格子摆放吧。那么接下来主要工作分为：

1、打乱顺序随机摆放卡牌

2、卡牌翻转动画

3、卡牌翻转后的匹配规则，如果未匹配，两张牌自行翻转回去；如果匹配，则消失

思路很清晰，就从第一步开始把！

1、打乱顺序随机摆放卡牌

为了方便图片渲染，我们给12张图片取名为1.png，2.png……12.png。把12x2=24张牌放到一个数组里就是[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12]，这个数组手敲起来眼花还容易写错，用个函数生成吧：

const generateArr = useCallback((): Array => {
      let cur = 1;
      const initArr = Array(24).fill(1).map((item, index) => {
         if (index % 2 === 1) {
            item = cur - 1;
         } else {
            item = cur++;
         }