卡牌翻翻乐这种小游戏相信大家都玩过,一组卡牌随机翻面平铺在面前,用户点击卡牌翻转,两两配对消除卡牌,游戏的玩法主要是通过玩家自己对卡牌位置的记忆,快速匹配出相同的卡牌予以消除。
那么我们自己来写一个这个小游戏,大致的思路会是什么呢?首先我们先找来卡牌素材,这里取的是12张生肖图案【图片来源于网络侵删】。那么我们就一共要展示24张卡片,布局上我们就按6x4的格子摆放吧。那么接下来主要工作分为:
1、打乱顺序随机摆放卡牌
2、卡牌翻转动画
3、卡牌翻转后的匹配规则,如果未匹配,两张牌自行翻转回去;如果匹配,则消失
思路很清晰,就从第一步开始把!
为了方便图片渲染,我们给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++;
- }