DiomandCrack / match-game

match card game

Home Page:http://zhangkun.org.cn/match-game/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

卡片游戏

简介

卡片匹配游戏,一个平台上平铺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;
  • 初始化

星级

计时

About

match card game

http://zhangkun.org.cn/match-game/


Languages

Language:CSS 73.8%Language:JavaScript 18.9%Language:HTML 5.4%Language:Ruby 2.0%