原生js实现一个连连看小游戏(一)

前几天使用原生的js写了一个连连看小游戏,地址:连连看(js),基本功能都实现了,运行截图为:

根据游戏规则获取开发思路

  1. 创建棋盘格
  2. 生成随机不重复数字
  3. 映射到棋盘格
  4. 鼠标点击事件
  5. 寻路,无通路,则到 2,有通路则对消
  6. 判断棋盘格是否全部消亡

只要能完成以下几个小Demo就能完成一个连连看游戏了(大概有以下几部分组成)

  • 使用html ,css完成一个棋盘格(布局)
  • 对数组随机取数并且不放回(生成随机不重复的数字)
  • 点击一个列表某一项获取该项索引(当点击列表的某一项时,能返回该项在列表中是第几项)
  • 会操作数组,栈方法,队列方法,分割方法,迭代方法以及合并方法(push,pop,shift,splice,foreach,concat)
  • 棋盘格任意不重复两点所构成的井字型区域中寻找通路(无折点,一个折点,两个折点)

最难点:获取所有通路

 

posted @ 2018-04-23 21:14  mingL  阅读(1087)  评论(0编辑  收藏  举报