连连看小游戏项目梳理

项目难点:

进行游戏面板的加载

如何保证每个元素都能找到配对的元素并且游戏可以开始进行？

元素是否可以相互抵消的判断 直接通过game.js 文件中定义的judge() function进行判断

直接相连的元素,需要拐一个弯的元素,需要拐两个弯的元素 如果有拐角的话,拐角的线是怎么画出来的 -> 路径是怎么找到的？

直接相连的元素: 属于同一行和同一列上的
需要拐一个弯的: 在一个矩形的对边的位置上, 找到矩形的另外一组对角线,判断before-el以及el-after是否可以直接相连
需要拐两个弯的: 属于同一行和列上并且有遮挡的 将before 向
showLine() function
必须保证相连且中间没有元素阻挡

html文件 和 js文件的功能分配问题

js文件之中直接生成html语句来进行 DOM元素的生成？？ // 这种写法应该不是正规的写法吧？

需要清楚 html文件的结构才方便进行 js文件的书写,这样会

js文件的相互调用关系

项目文件内容梳理:

config.js: 写的是一些辅助配置参数 比如 行数 列数 执行的时间
itemDirectionHTML 是干嘛用的？

event.js: 写的是所有的监听事件 依赖于 game.js

定义了3个on() 如何进行区分和调用？ on() 只是用来监听事件的
第一个on() 监听的是gridContainer上发生的 click事件
先用 e.target定位触发event的对象是否是img 标签
后两个简单的btn直接监听'click'事件

view.js: 写的是show disapper等与界面显示直接有关的function 比如初始化所有元素, 消除元素,展示相连的线

将元素消失只是用了一个 hidden的css属性？

game 和 view又是怎么扯上关系的?
在Game.setup方法之中定义this.view = new View()

核心的逻辑都在event.js之中了 因为是离用户最近的地方，用户只通过点击来进行操作