卡片匹配游戏,一个平台上平铺N*N个卡片
点击翻转显示图案 匹配两个
相同就显示正确 不相同就显示错误
所有卡片全部匹配游戏结束 显示分数
分数:
- 时间
- 翻转次数
匹配2个
- 初级 4*4
- 中级 6*6
- 高级 8*8
- 超高级(6*6 匹配3个相同图案的????这个感觉难度太高了....)
- 超超超高级(也可以三个相同或不同图案的一组匹配..............................................数据的matchId和bg也随机分成6*6/3组)
display: flex
- 宽度不够自动换行 不用考虑 float 边距误差
- 一维数组
- icon
- 人物
- 动物
- id
- img/bg/div
- matchId?(如果是4*4 [id ?==id+8] )
- match
- 根据数据的length生成 元素对象 根据id随机摆放 position??
- 可以随机生成div的id然后 再匹配id后再生成卡片??
先翻转再匹配 给所有卡片添加点击事件
默认全部属性match为false 卡片背面
- 创建一个长度为2的空数组
- 点击第一次this的卡片的matchId 加到数组中 元素标记为ture
- 点击第二次this的卡片加到数组中 元素标记为ture
- 如果匹配成功 (arr[0] ?==arr[1]) 提示正确不再反转 清空arr 如果匹配不成功 提示错误 翻转到背面 清空arr
- 直到所有match 为true;
- 初始化