哇赃额，終于寫完了鬼吵，算是初步實(shí)現(xiàn)連連看的基本功能吧罐盔，其他的等以后在慢慢完善吧~
記錄一下李剖，這次代碼實(shí)現(xiàn)中遇到的一些問題和想法吧，要不然時(shí)間久了锭部，自己怎么寫的也沒印象了
言歸正傳暂论，開始：
功能的實(shí)現(xiàn)主要是：javascript + vue2.js + jquery 來實(shí)現(xiàn)的
文件目錄如下圖所示：
1、第一步拌禾，是界面的實(shí)現(xiàn)空另，準(zhǔn)備工作總要做好的，先來放一張目標(biāo)圖片蹋砚，然后照著圖片一步一步來
根據(jù)上圖可以看到，界面的實(shí)現(xiàn)其實(shí)和 table 差不多摄杂，行(row) 里 包含 列(col)? 坝咐，每個(gè)人寫代碼的風(fēng)格不一樣，我是通過ul 來實(shí)現(xiàn)析恢。 第一個(gè) li 是 行(row) 墨坚，里面的 ul 下所包含的 li 是 列(col) 。html代碼如下圖所示：
2映挂、第二步泽篮，構(gòu)造假數(shù)據(jù) ，界面基于數(shù)據(jù)來實(shí)現(xiàn)柑船，通過數(shù)據(jù)讓頁面豐富起來
繪制界面不可或缺的需要用到 各種圖片帽撑、行、列鞍时，其實(shí)開始這三種（type亏拉、row扣蜻、col）是單獨(dú)定義的，在寫 createData 這個(gè)函數(shù)時(shí)及塘，將這三個(gè)做為參數(shù)傳進(jìn)去莽使，根據(jù)傳進(jìn)來的值創(chuàng)建 行 和 列。不過為了防止后期增加其他的參數(shù)或者參數(shù)過多造成混亂 所以直接定義成一個(gè) json 笙僚，也就是上面定義的 pGroup數(shù)組 來存儲(chǔ)這些 json數(shù)據(jù) 芳肌。包括后面要實(shí)現(xiàn)的增加游戲的難易程度都可以通過這組數(shù)據(jù)來實(shí)現(xiàn)。
下面來寫 創(chuàng)建數(shù)據(jù)函數(shù) (createData) 肋层，函數(shù)調(diào)用默認(rèn) createData(pGroup[0]) 亿笤，（相當(dāng)于關(guān)卡1）
循環(huán) count ；用 i % 總數(shù)據(jù)的一半槽驶， 得到 一組相同 的數(shù)據(jù)责嚷；用得到的數(shù)據(jù)? % 傳參進(jìn)來的圖片類型數(shù)量 ；然后添加到數(shù)組中掂铐。這樣能保證數(shù)組中的 數(shù)據(jù)都是成對(duì) 出現(xiàn)罕拂，且范圍都在傳參進(jìn)來的類型數(shù)量以內(nèi)。
將 arr 里的同類型的數(shù)據(jù)進(jìn)行隨機(jī)排序全陨，這樣爆班，每次獲取數(shù)據(jù)時(shí)，圖片的排列順序都不一樣辱姨，展示效果也不一樣柿菩。
循環(huán)傳參進(jìn)來的 parameter.row 和 parameter.col 并分別 加2 。界面上格子數(shù)量如下圖所示雨涛。在循環(huán) col 里 聲明 定義 json ,每一個(gè)json代表一個(gè)格子所包含的信息枢舶，當(dāng)兩個(gè)格子鏈接時(shí)，起始格子通過自己本身的上替久，下凉泄，左，右四個(gè)方向的格子 json 下的 isRemove 的值是 true 或者 false 來判斷線路是否可以到達(dá)蚯根。
而最外層（上后众，下，左颅拦，右）四個(gè)方向的格子是缺少一個(gè)或兩個(gè)相鄰的格子的蒂誉，所以在循環(huán)時(shí)給行和列分別 加2 ,相當(dāng)于在外面包上一層，這樣處于 上部距帅，下部右锨，左部，右部的格子就可以不受沒有相鄰格子的方向的限制且默認(rèn)設(shè)置為 isRemove = true ( 也就是隱藏 )碌秸。這樣四邊的格子在鏈接時(shí)陡蝇，也有四個(gè)方向用來判斷痊臭，而因?yàn)槟J(rèn)是隱藏，而不會(huì)影響正常的顯示登夫。效果如下圖广匙。（為了看的清晰，下圖中的空格子設(shè)置是false恼策，使用時(shí)改成true即可）
所以在定義每個(gè)格子下的 json 信息時(shí)鸦致，做判斷。如果是最外面的四個(gè)邊涣楷，只需要存 x , y , isRemove 三個(gè)參數(shù)信息分唾，且 isRemove = true 因?yàn)槠渌膮?shù)是用不到的所以也無需設(shè)置。
用到的數(shù)據(jù)參數(shù)進(jìn)行一下說明狮斗，將他存到 json = {
? ? x , y : 格子分別的橫縱坐標(biāo)
? ? type : 圖片的類型绽乔，后期根據(jù)類型去獲取圖片
? ? ID : ?每個(gè)格子單獨(dú)的標(biāo)識(shí)，代號(hào)
? ? imgSrc : 通過 type 去 imgData 里找到相對(duì)應(yīng)的路徑信息碳褒，并記錄
? ? isRemove : 通過賦值 true 或者 false 來定義格子是否顯示或者隱藏折砸，用來實(shí)現(xiàn)消除后的效果
? ? active : 通過 true 或者 false 來定義是否為選中狀態(tài)
}
第一層循環(huán)是行，第二層循環(huán)是列沙峻，arr 里存的是一行的格子的信息睦授，arrData里存的是多行的格子的信息，所以我們現(xiàn)在界面需要展示的所有信息都存在 arrData 里摔寨。
3去枷、第三步，將數(shù)據(jù)放到界面中進(jìn)行展示
不得不說是复，vue真是好用吧径ァ！將之前定義好存儲(chǔ)所有格子信息的 arrData 淑廊，傳給 實(shí)例的 msg 屬性翼闹。
msg : 格子信息數(shù)組
o1 : 點(diǎn)擊的第一個(gè)格子
o2 : 點(diǎn)擊的第二個(gè)格子
level : 當(dāng)前的關(guān)卡
line : 存放路線
在接下來的代碼中通過指令，對(duì) msg 進(jìn)行操作蒋纬。不進(jìn)行過多的說明，具體可以看文檔坚弱，
v-show : 根據(jù)表達(dá)式之真假值蜀备，切換元素的displayCSS 屬性。
v-for : 基于源數(shù)據(jù)多次渲染元素或模板塊荒叶。此指令之值碾阁，必須使用特定語法alias in expression，為當(dāng)前遍歷的元素提供別名些楣；另外也可以為數(shù)組索引指定別名（或者用于對(duì)象的鍵）：(row , i1) in msg
@click : 監(jiān)聽事件脂凶，觸發(fā)點(diǎn)擊事件時(shí)宪睹，將 當(dāng)前元素的 索引(i1,i2) 傳參到函數(shù)中
:class : 綁定屬性，通過格子的 isRemove 和 active 來控制 class : hide 和 active 的使用
第四步蚕钦，來看當(dāng)格子連接時(shí)觸發(fā)的 add() 函數(shù)?
點(diǎn)擊時(shí)亭病，判斷 this.o1 下真或者假，如果是假（沒有值） 嘶居，用傳參進(jìn)來的 行索引 和 列索引 去 存放所有格子信息的 arrData 里找到對(duì)應(yīng)的 json數(shù)據(jù)罪帖，賦值給 this.o1 ，因?yàn)楫?dāng)前應(yīng)該是選中狀態(tài)邮屁，所以 this.o1.active = true 整袁；
如果 this.o1 已經(jīng)存在，那么當(dāng)前將值賦給 this.o2佑吝，同樣是存放格子對(duì)應(yīng)的 json數(shù)據(jù)坐昙。
接下來進(jìn)行判斷，除去連接時(shí)的是否有障礙物的規(guī)則芋忿，最基本的要求是：
? ? ? ? ?1炸客、兩次點(diǎn)擊不能是同一個(gè)格子，格子所對(duì)應(yīng)的 json數(shù)據(jù) 下的 ID 是獨(dú)一無二的哦盗飒；
? ? ? ? 2嚷量、兩個(gè)格子的類型必須是相同的（舉個(gè)例子：蚊子和魚是沒法配對(duì)消除的哦）。而我們之前定義的圖片是根據(jù)不同的 type 來定義的相對(duì)應(yīng)的圖片逆趣，
所以當(dāng) ID相同蝶溶，類型不同?，是沒法消除格子的宣渗，這時(shí)調(diào)用 clearOther(this) 函數(shù)抖所。
因?yàn)橐陨蠗l件，現(xiàn)在無法完成消除痕囱，這時(shí) this.o1 對(duì)于我們來說田轧，作用已經(jīng)不大了，而 this.o2 將變成新的 this.o1 鞍恢。所以先將兩個(gè)的 active 狀態(tài)都定義為 false 傻粘。 在取代完成后 ，賦予最新的 this.o1 的 active 狀態(tài) 為 true 帮掉。因?yàn)楹竺嫘枰Ｓ玫较蚁ぃ詫⑺庋b成函數(shù)，在接下來的代碼中蟆炊，如果不滿足格子配對(duì)消除的規(guī)則都將調(diào)用這個(gè)函數(shù)稽莉。
反之如果不滿足以上兩個(gè)條件，進(jìn)入 else涩搓，即?ID不同污秆，類型相同劈猪，則正好滿足我們的基本條件。
ID 和 類型 的判斷良拼，只是連接成功的基本判斷战得，接下來我們?cè)跐M足這種基本條件的情況下，進(jìn)行深入判斷：
? ? ? ? 1将饺、兩個(gè)挨在一起的相同的格子贡避；
? ? ? ? 兩個(gè)挨在一起，在保證基本條件的情況下予弧，必然是能夠連接成功的刮吧，下面來寫符合兩個(gè)挨 ? ? ? ? ? 在一起的規(guī)則，首先是知道每個(gè)格子的索引的 ( json.x 和 json.y ) 掖蛤，也就是下圖中所出現(xiàn)的 ? ? ? ? 數(shù)字杀捻。例： 1，1 ?--> ?2蚓庭，1 ? 兩者分別相減致讥，得到 x = -1 || 1 和 y = 0，然后 x + y = 1 || ? ? ? ? ? ? ? -1器赞，因?yàn)閮烧咧灰嗖钍?就好垢袱，所以用絕對(duì)值來處理，總結(jié)規(guī)則如下：
? ? ? ? Math.abs(this.o1.x - this.o2.x) + Math.abs(this.o1.y-this.o2.y) == 1
? ? ? ? 如果滿足以上條件則調(diào)用 sameHide(this) 函數(shù)港柜，drawLine(this,arr) 作用是畫兩個(gè)格子連接時(shí)的線请契，具體稍后在說，現(xiàn)在只要知道里面?zhèn)鲀蓚€(gè)參數(shù) this 和 一個(gè)數(shù)組夏醉，就可以爽锥。
? ? ? ?首先讓目標(biāo)盒子也有選中效果 active = true。接下來聲明變量并賦值 _this.o1 和 _this.o2 畔柔；成功后氯夷，清空 _this.o1 和 _this.o2。因?yàn)樵谶x中狀態(tài)的時(shí)候有一個(gè)0.3秒放大的效果靶擦，所以用定時(shí)器腮考，讓數(shù)據(jù)在0.3秒后讓o1,o2在 arrData 相對(duì)應(yīng)的數(shù)據(jù)的狀態(tài) isRemove = true 。之所以用 a1,a2 來代替 _this.o1,_this.o2玄捕，是因?yàn)楫?dāng) 點(diǎn)完 o1 在點(diǎn) o2 踩蔚，接著快速點(diǎn)擊 其他同類型格子的時(shí)候，o2 會(huì)變成 o1桩盲，而最后點(diǎn)的格子會(huì)相繼變成 o2 ，進(jìn)而在滿足條件下再次配對(duì)消除席吴，所以找其他的變量?jī)?chǔ)存信息后赌结，就將 o1 和 o2 清空捞蛋。?
_this.line = [ ] ，配對(duì)連接完成后柬姚，因?yàn)檫B接時(shí)線的位置和展示是根據(jù)數(shù)組的值和length 決定的 所以在配對(duì)成功后拟杉，讓線隱藏，將其清空量承。關(guān)于連線搬设，后面會(huì)詳細(xì)說明 。
? ? ? ? 2撕捍、雙方處于外層四條邊上且在同一排的格子拿穴；
? ? ? ? 接下來定義規(guī)則，單獨(dú)把他抽出來忧风，因?yàn)樗旧肀容^特殊默色，如上圖所示，拿底部的格子來舉例狮腿，除去線路2 和 線路3 是需要判斷中間是否有障礙物腿宰，線路1是直接就可以進(jìn)行的，所以當(dāng)滿足這些條件后（上邊 || 下邊 || 左邊 || 右邊）來接著進(jìn)行下一步缘厢。調(diào)用 route(this) 函數(shù)吃度，因?yàn)榈?種情況也需要調(diào)用此函數(shù)，所以在描述完第三種情況后一起說贴硫。
? ? ? ? 上邊 ：_this.o1.x == 1 && _this.o2.x == 1
? ? ? ? 下邊 ：_this.o1.x == pGroup[this.level].row && _this.o2.x == pGroup[this.level].row
? ? ? ? 左邊 ：_this.o1.y == 1 && _this.o2.y == 1
? ? ? ? 右邊 ：_this.o1.y == pGroup[this.level].col && _this.o2.y == pGroup[this.level].col
? ? ? ? 3椿每、其他情況：一種復(fù)雜的連接 和 連接失敗，因?yàn)檫€要做更復(fù)雜的判斷夜畴，所以我們將兩個(gè)放在一起
很明顯除去上面2種不用通過特別復(fù)雜的路線就可以實(shí)現(xiàn)配對(duì)消除的情況之外拖刃，第三種包含了兩種情況。一種是通過復(fù)雜路線實(shí)現(xiàn)配對(duì)贪绘，一種是拋開基本要求（ID相同或類型不同）兑牡，經(jīng)過復(fù)雜的路線后依然不成功的情況。而這兩種情況都需要在 調(diào)用 router(this) 函數(shù)之后才可以知道結(jié)果税灌。
第五步均函，調(diào)用 router(this) 。在說這個(gè)函數(shù)之前菱涤，要先說兩個(gè)已經(jīng)封裝好的函數(shù)苞也。?
1、direction(o1,o2) ? ? ?作用：判斷方向 粘秆。 o1代表點(diǎn)擊的第一個(gè)格子如迟，o2代表第二個(gè)格子。 如果 ： o1.x > o2.x ，是 h = -1 路線向左走 殷勘。兩者 x 相等 此再，h = 0 水平不動(dòng)。除去前兩種只剩下一種情況 ?o1.x < o2.x 玲销，是 h = 1 路線向右走输拇。y 同理，是垂直方向贤斜。
2策吠、direction2(o1,o2) ? ? ?作用：優(yōu)先路線排序。在做判斷的時(shí)候瘩绒，我是以左右來做大方向猴抹，在大方向里在進(jìn)行二次條件判斷，這個(gè)根據(jù)個(gè)人的想法來這寫草讶，第一個(gè)判斷 洽糟，如果 o1.x > o2.x ，優(yōu)先方向?yàn)?左堕战，接著進(jìn)行二次判斷 如果 o1.y > o2.y 坤溃，那就是目標(biāo)格子（o2）在 起始格子（o1）的左上角，所以優(yōu)先路線定義為 arr = [ '左','上','下','右' ] 嘱丢。 后面的判斷同理薪介，不一一做解釋。判斷全部結(jié)束后將數(shù)組做為函數(shù)的返回值越驻。
其實(shí)除去兩者出現(xiàn) x 相同或 y 相同是有三種路線以外汁政，其他的都是四種路線，如下圖所示缀旁，所以需要封裝四種路線的函數(shù)
接下來來看 route(this) 记劈，將之前 direction 和 direction2 的返回值接收，循環(huán) direction2 的優(yōu)先路線返回值 arr , 并做判斷并巍，上面已經(jīng)說過目木，分別封裝了四個(gè)方向的函數(shù)，這時(shí)根據(jù)循環(huán)數(shù)組的值來調(diào)用相對(duì)應(yīng)的方向函數(shù)懊渡。
而調(diào)用方向函數(shù)本身也是有返回值 刽射，如果配對(duì)成功，返回true剃执，配對(duì)不成功則返回false誓禁，所以依次做判斷，將返回值 push到arr里肾档，如果當(dāng)前路線配對(duì)成功摹恰，則跳出循環(huán)辫继，如果當(dāng)前配對(duì)不成功，則繼續(xù)判斷直到最后俗慈，并在結(jié)束后將 arr 做為函數(shù)的返回值骇两。
拿左 routeLeft(_this,x,y) 來舉例，需要將之前判斷方向（direction）中的值也就是后面聲明定義的 x , y 傳參進(jìn)去姜盈。
聲明定義變量
switchBtn ：相當(dāng)于一個(gè)開關(guān)，默認(rèn)為false 配阵，當(dāng)路線沒有障礙物是 設(shè)置為 true馏颂。
mainLine(主干路線) , childLine(第一次轉(zhuǎn)彎后路線) , subBranch(第二次轉(zhuǎn)彎后路線) ：記錄路線經(jīng)過哪些格子所對(duì)應(yīng)的索引，最后由sum 進(jìn)行數(shù)組整合棋傍，記錄配對(duì)成功的完整路線救拉。開始 push 初始路線（this.o1的x , y）的值到mainLine 。
a)瘫拣、如果 y = 0 , 說明兩個(gè)格子的 y 值相同 亿絮，都在 x 軸上，從 o1 起始麸拄，循環(huán) o1 到 o2? 的區(qū)間派昧，將路線存到 mainLine 下，并對(duì)區(qū)間格子當(dāng)前的 isRemove（隱藏或顯示） 狀態(tài)拢切，進(jìn)行判斷蒂萎，如果狀態(tài)為 false ，則證明兩者之前依然有障礙淮椰，無法連接成功五慈，那 switchBtn 依然是 false ,將mainLine 清空，并結(jié)束整個(gè)循環(huán)主穗。如果直到 目標(biāo)格子的前一個(gè)泻拦，則證明區(qū)間狀態(tài)都為 true (隱藏)，配對(duì)格子之間已無障礙忽媒，連接配對(duì)成功争拐，switchBtn = true 。
接下來判斷 swithcBtn 猾浦，這個(gè)判斷代碼后面會(huì)經(jīng)常出現(xiàn)陆错，對(duì)其進(jìn)行下 說明。如果是真金赦，push 目標(biāo)格子索引音瓷，并調(diào)用以下函數(shù)
sameHide(_this) 配對(duì)成功，改變狀態(tài)夹抗，格子消失绳慎。refresh(_this)
drawLine(_this , sum) : 之前已經(jīng)說過是用來畫線的函數(shù)，?稍后做詳細(xì)說明
sameHide(_this) : 已描述，配對(duì)成功杏愤，改變狀態(tài)靡砌，格子消失
refresh(_this) : 當(dāng)沒有滿足配對(duì)要求的情況下，刷新界面珊楼，重新排序繪制
如果是假 return false ;
注：因?yàn)樵陂_始存儲(chǔ)格子的json信息的時(shí)候是 json.x = j 通殃，json.y = i 方便按照正常的邏輯來展示，所以在取的時(shí)候同樣需要向開始存儲(chǔ)那樣?獲取 j 和 i 的位置下相對(duì)應(yīng)的信息厕宗。
b)画舌、反之，則不在同一個(gè)軸上已慢，如下圖所示曲聂，只要和起始格子處于同一軸，那么這條軸相當(dāng)于主干佑惠。如果主干上有障礙（格子 isRemove = false）朋腋，那么這條線路將無法進(jìn)行下去，如下圖左膜楷，如果主干線上沒有障礙（格子 isRemove = true）, 那么可繼續(xù)下去旭咽，再對(duì)支干 和 支干下的子支干 進(jìn)行判斷，如下圖右赌厅，所有路線開始的前提是主干可以進(jìn)行下去轻专，否則白搭。所以先對(duì)主干線進(jìn)行判斷
循環(huán) x 軸察蹲，直到最左側(cè)请垛，x = 0 , 循環(huán)判斷如果主干線上格子當(dāng)前的狀態(tài)，如果 isRemove = false ,則證明障礙物的存在洽议，也沒有必要繼續(xù)下去宗收，將記錄主干線路的數(shù)組清空，結(jié)束整個(gè)循環(huán)亚兄。配對(duì)連接失敗 （如上圖左所示）混稽。
（如圖右所示）如果沒有障礙物，則進(jìn)行下一步审胚，通過之前傳參進(jìn)來的 x , y 匈勋，因?yàn)?y > 0 得到所處的方向（左上），而支干路線又分為兩種膳叨，一種是拐彎后直接到達(dá)洽洁。如上面路線圖 5 線路，還有兩種比較特別的是 4 和 6 線路菲嘴，因?yàn)樵诼肪€過程中饿自，只會(huì)去判斷兩個(gè)格子區(qū)間的狀態(tài)汰翠，并不包含要配對(duì)的格子本身，所以無障礙到達(dá)目標(biāo)格子高度時(shí)昭雌，即配對(duì)成功复唤。而1 ，2 烛卧，3 線路是當(dāng)?shù)竭_(dá)和目標(biāo)格子高度一致的時(shí)候佛纫，再經(jīng)過一個(gè)拐彎后才可到達(dá)。
就像 5 線路那樣总放，拐彎向上后直達(dá)就可到達(dá)目標(biāo)格子雳旅。
但是也有一種情況就是，假如現(xiàn)在連接的是(6,3)? -->? (1,2) 间聊， 這種情況的特點(diǎn)就是，在主干線格子的x = o2.x 的情況下抵拘，目標(biāo)格子 y 坐標(biāo) - 初始格子 y 坐標(biāo) = 1 就行哎榴，因?yàn)楝F(xiàn)在是左上，所以是1僵蛛，如果是左下就是 -1 尚蝌，所以直接給絕對(duì)值，避免因?yàn)閿?shù)字導(dǎo)致判斷錯(cuò)誤充尉。格子走到這一步飘言，相當(dāng)于配對(duì)成功，swichBtn = true ?驼侠，sum 整合 主干上的路線和支干上的路線姿鸿。
在說另一種，兩個(gè)配對(duì)格子如上路線圖 紅框所示倒源。主干上拐彎后苛预，依然要向上走，直到目標(biāo)格子的前一個(gè)笋熬，說明期間沒有跳出循環(huán)热某，所有格子狀態(tài)均為 isRemove = true ，sum 整合主干路線和支干上的路線胳螟。 最后通過 switchBtn 進(jìn)行判斷昔馋。
接著說 1，2糖耸，3秘遏，4，6 路線 嘉竟。 第一次拐彎后垄提，y 一直走榔袋，如果期間有格子 isRemove == false，則結(jié)束該循環(huán)铡俐。
這時(shí)凰兑，4 和 6 路線比較特別，因?yàn)楣諒澓缶偷竭_(dá)目標(biāo)格子审丘，所以同樣規(guī)則：o2.x - i = 1 或者 -1 同樣用絕對(duì)值來處理吏够，配對(duì)成功，swichBtn = true? 滩报，sum 整合 主干上的路線和支干上的路線锅知。
1，2脓钾，3 路線售睹，當(dāng) y == o2.y 時(shí)，又該拐彎了可训，如果當(dāng)前 x > o2.x 昌妹，往左拐，如果 x < o2.x 握截，往右拐飞崖，判斷和之前大同小異，不一一做解釋谨胞，如果到達(dá) o2.x的前一個(gè)固歪，依然沒有結(jié)束循環(huán)，則證明 格子狀態(tài)為 （isRemove = true）, sum 整合數(shù)組胯努，通過 swithBtn 做判斷牢裳。
push 目標(biāo)格子的位置索引添加到 sum 中。調(diào)用函數(shù)叶沛。
最后的最后 贰健，switchBtn 在做最后一次判斷 ，函數(shù)中需要注意的是恬汁，全程只有在同一條軸上直達(dá)和代碼的結(jié)尾 switchBtn 的判斷有 else { return false } , 因?yàn)?情況只有直達(dá)和非直達(dá)伶椿，如果直達(dá)中有障礙物，那么代碼可以結(jié)束氓侧。而非直達(dá)脊另，要等到所有的路線確定完畢后，在反饋結(jié)果约巷。
每個(gè)方向分別有一個(gè)函數(shù)偎痛，代碼內(nèi)容大同小異，現(xiàn)在回到 第四步 下所描寫的第三種情況独郎，復(fù)雜路線配對(duì)成功或者配對(duì)失敗踩麦，因?yàn)樵谡{(diào)用route(this)時(shí)枚赡，已經(jīng)得到一個(gè)數(shù)組。里面是路線是否連接成功的狀態(tài)谓谦，
所以在這做代碼判斷贫橙，循環(huán)數(shù)組，如果有一個(gè)為true反粥，則表示格子配對(duì)成功卢肃。如果都是false，則說明通過 上才顿，下莫湘，左，右 都配對(duì)失敗郑气。所以調(diào)用 clearOther(this) 函數(shù)幅垮。
第六步，關(guān)卡難度升級(jí)尾组，界面重繪
當(dāng)界面所有的格子的 isRemove狀態(tài) 等于 true 的時(shí)候忙芒，說明界面中所有的格子都已經(jīng)消除成功。因?yàn)楦褡釉谙龝r(shí)有0.3秒的動(dòng)畫效果演怎，所以在0.3秒之后，格子的 isRemove 狀態(tài)才會(huì)更改避乏，所以在定時(shí)器里去循環(huán)判斷每個(gè)格子的狀態(tài)爷耀。如果還有格子的存在都 return 。
如果 當(dāng)前的關(guān)卡（從0開始計(jì)數(shù)） 已經(jīng) 等于 數(shù)組的leng - 1 拍皮，則說明已經(jīng)到了最后一關(guān)歹叮，更改界面友情提示辰如。如果不是最后一關(guān)宗兼，則進(jìn)入下一關(guān)。給 this.leval + 1 ,并且去調(diào)用 ?createData函數(shù)并將最新關(guān)卡數(shù)據(jù)傳參進(jìn)去 createData(pGroup[_this.level]) 故硅，并將格子狀態(tài) isRemove 改成 false 爹橱。然后將同步數(shù)據(jù) _this.msg = arrData 萨螺。
第七步愧驱，畫線
現(xiàn)在配對(duì)成功后可以消除兩個(gè)格子慰技，但是當(dāng)頁面中的所有格子消除完成后，要進(jìn)行下一個(gè)關(guān)卡组砚，也就是之前定義好的 存儲(chǔ)關(guān)卡的數(shù)據(jù) pGrout? 吻商。但是連接線還沒有畫，接下來糟红，畫線艾帐。
這需要用到之前已經(jīng)整合好路線的數(shù)組 sum乌叶，循環(huán)數(shù)組，用當(dāng)前數(shù)組 和 下一個(gè)做對(duì)比柒爸，如果 x有變化就是橫線准浴，如是是 y 有變化 就是豎線。前提條件 i < arr.length - 1 揍鸟，是因?yàn)樽詈笠唤M數(shù)據(jù)是目標(biāo)格子的數(shù)據(jù)兄裂，只做參考，不畫線阳藻。
當(dāng) arr[i].x < arr[i+1].x 時(shí)晰奖，從左往右連，直接設(shè)置left 即可腥泥，反之匾南，則需要做針對(duì)位置進(jìn)行調(diào)整，y 軸同理蛔外，將數(shù)值進(jìn)行調(diào)整即可蛆楞。
第八步，無可鏈接數(shù)據(jù)時(shí)夹厌，刷新界面重新排序豹爹。點(diǎn)擊按鈕調(diào)用 repaint_page() 函數(shù)。
循環(huán) 行 和 列 如果矛纹，當(dāng)前的格子已經(jīng)隱藏（isRemove = true）臂聋，則跳過當(dāng)前循環(huán)，如果依然顯示在界面上或南，則將其位置 push 到 arr數(shù)組中孩等。 全部添加完成后，將數(shù)組隨機(jī)排序采够。再次循環(huán) 行 和 列 肄方，已經(jīng)消失的依然消失，沒消失的位置 重新根據(jù) 數(shù)組存儲(chǔ) 下來的 type 進(jìn)行設(shè)置蹬癌，展示相對(duì)應(yīng)的圖片权她。
以上，是全部?jī)?nèi)容逝薪，感覺總結(jié)比寫代碼還累伴奥，不過也算再整理一遍思路，好外還是有的翼闽。拾徙。。希望下次自己忘了的時(shí)候感局，看到這些記錄能回憶起來
github地址：https://github.com/juanjuanGit/llk
