连连看小游戏项目梳理

项目难点:

进行游戏面板的加载

如何保证每一个元素都能找到配对的元素而且游戏能够开始进行？

元素是否能够相互抵消的判断 直接经过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之中了 由于是离用户最近的地方，用户只经过点击来进行操做