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

最新推荐文章于 2024-12-06 09:38:19 发布

原创

最新推荐文章于 2024-12-06 09:38:19 发布 · 3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了如何使用JavaScript制作卡牌翻翻乐小游戏，包括随机打乱卡牌顺序、实现翻转动画及匹配规则。通过CSS布局完成6x4的卡牌展示，并详细讲解了点击卡牌时的翻转效果以及匹配逻辑。

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

那么我们自己来写一个这个小游戏，大致的思路会是什么呢？首先我们先找来卡牌素材，这里取的是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<number> => {
      let cur = 1;
      const initArr = Array(24).fill(1).map((item, index) => {
         if (index % 2 === 1) {
            item = cur - 1;
         } else {
            item = cur++;
         }
         return item
      })
      return initArr // 输出[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12]
   }, [])

好了，接下来的步骤就是把24张牌通过洗牌算法打乱顺序。之前说展示6x4的布局，会有人想到说把一维数组转成二维数组然后双层for循环