卡牌翻翻乐这种小游戏相信大家都玩过,一组卡牌随机翻面平铺在面前,用户点击卡牌翻转,两两配对消除卡牌,游戏的玩法主要是通过玩家自己对卡牌位置的记忆,快速匹配出相同的卡牌予以消除。
那么我们自己来写一个这个小游戏,大致的思路会是什么呢?首先我们先找来卡牌素材,这里取的是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循环打印出来,其实没必要,毕竟6x4的布局我们可以通过css实现。
打乱顺序: