連連看小遊戲項目梳理

項目難點:

進行遊戲面板的加載

如何保證每一個元素都能找到配對的元素而且遊戲能夠開始進行？

元素是否能夠相互抵消的判斷 直接經過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之中了 由於是離用戶最近的地方，用戶只經過點擊來進行操做