羊了个羊游戏前端原生js实现

使用代码语言Html5+css3+Js

实现思路

第一步生成所有的卡片总数

实现步骤1.根据行列数和层数判断共有多少张卡片  

               2.根据卡片的数量判断共有多少组需要消除

               3.使用随机数生成卡片的种类然后随机填充到地图数组中的三个位置（确保所有卡片都可以消除）

第二步：初始化地图

实现步骤：1.规定每张图片的长和宽

                  2.每加一层上一层的图片向右移动一段距离

                   3.使用id属性记录(layer,count)(想象成一维地图     只需要记录第几层的几个)

                        

第三步:生成覆盖关系(核心问题) 

采用的是谁覆盖着我的思想：只要有卡片覆盖着自己 就将那张卡片放入数组中存储

使用for循环将所有的覆盖关系生成并放入总的数组中(注意总数组和获取所有卡片节点的那个nodelist的下标是相同的这样覆盖关系就可以一一对应起来)

注意：containspoint函数是判断是否有覆盖关系的函数(建议仔细研究)

 第四步 根据点击卡片判断然后清除依赖关系

使用两次for循环

第一次将所点击的卡片覆盖着的覆盖关系消除

第二次将所有空的有覆盖的数组暴露出来并加入点击事件

 最后一步判断被点击的卡片中是否有三个相同种类如果有则删除

最后一步我写的这个方法有点笨重  如果有大佬有更好的方法欢迎私信一起交流

最后实现的效果图就是这样啦

最后我是大二学生写的代码有点拉欢迎大佬指点