素材准备： 7张图片，一个背景图 界面的设计：两个区域 分析思路： 生成指定图片个数（总共7张图片，3个相同才会消除，必须是3的倍数） 生成之后，打乱位置和顺序 覆盖的逻辑： 是否被覆盖，如果被覆盖，呈现暗淡的效果以及不能被点击 点击功能: 点击上方的图片，把对应的图片放入收集的盒子中，判断？ 收集盒子内元素已经满了并且没有可以消除，表示游戏结束，输了 当收集盒子中的元素为空已经存放图片的区域也为空，胜利

显示区域中的块--->路径，位置，大小，是否被隐藏 第一步：将图片动态渲染在页面上 第二步：随机摆放图片，位置->坐标(x,y),x最小20，最大app-20-50,y最小20，最大app-200 第三步：判断是否被遮挡，逆反思维，两者没有交叉的情况（0表示当前元素，1表示目标元素） 1、0的x>1的x+自身宽度 1在0左边 2、0的x+自身宽度<1的x 1在0右边 3、0的y>1的y+自身高度 1在0下面 4、0的y+自身高度<1的y 1在0上面 第四步：实现点击的功能 一、移动到收集盒中 收集盒x-appx+5 1、获取到收集盒子存放第一张图片的位置 2、判断收集盒子是否为空 2.2、如果为空，直接放入Block块 2.1、如果不为空，判断是否有相同的元素存在 2.2.1、如果没有，直接放入 2.2.2、如果有，就将后面的元素向后移动一个位置，并且将当前点击的元素插入到当前位置 第五步：实现消除的功能 1、验证，是否已经有三个相同的 1.1、如果有，就清除 2、清除后，将后面的元素全部往前移动 3、判断收集盒中的元素以及allBlock中的元素 3.1如果收集盒中的元素以及达到了7个，输了 3.2如果收集盒和allBlock中也没有元素了，表示赢了 4、游戏结束