上節(jié)課初步實(shí)現(xiàn)了網(wǎng)頁(yè)游戲連連看的顯示內(nèi)容和樣式宏娄。
這節(jié)課說(shuō)明如何實(shí)現(xiàn)關(guān)卡初始化以及點(diǎn)擊事件和消除方塊。
初始化隨機(jī)生成關(guān)卡
前面函數(shù)已經(jīng)做好了逮壁，設(shè)置的是一個(gè)固定的值孵坚。
將固定的值修改為隨機(jī)函數(shù)，取值范圍從1到難度設(shè)置的值窥淆。
例如難度設(shè)置第一關(guān)最多30種圖形卖宠，則取值范圍從1到30。第2關(guān)則取值范圍從1到32忧饭。以此類推扛伍。
linklink.js修改如下：
刷新網(wǎng)頁(yè)：
可以看到隨機(jī)函數(shù)起作用了。
認(rèn)真觀察生成的圖片情況词裤，發(fā)現(xiàn)2個(gè)問(wèn)題：
1.隨機(jī)函數(shù)生成的時(shí)候蜒秤，隨意性太大汁咏，可能某個(gè)圖片出現(xiàn)的次數(shù)太多而另外某個(gè)圖片可能根本不出現(xiàn)亚斋，需要將這個(gè)出現(xiàn)次數(shù)的差異性盡量降低一些作媚。
2.連連看游戲的規(guī)則要求圖片都是成雙成對(duì)的，如果相同的圖片出現(xiàn)奇數(shù)個(gè)數(shù)帅刊，則游戲無(wú)法完成了纸泡。
控制每種圖片最多出現(xiàn)的個(gè)數(shù)
根據(jù)關(guān)卡難度，每一關(guān)最多出現(xiàn)的圖片的種類數(shù)赖瞒，再根據(jù)總的棋盤的格子總數(shù)女揭，可以計(jì)算出每種圖片出現(xiàn)的次數(shù)的平均值。
然后將平均值向上取整栏饮，然后如果是奇數(shù)再加1變?yōu)榕紨?shù)吧兔。就可以得到每種圖片最多出現(xiàn)的次數(shù)。
然后做一個(gè)統(tǒng)計(jì)數(shù)組袍嬉，里面每生成一個(gè)隨機(jī)圖片境蔼，就往統(tǒng)計(jì)數(shù)組對(duì)應(yīng)的圖片值加1，如果達(dá)到最多出現(xiàn)次數(shù)伺通，則重新?lián)Q一個(gè)隨機(jī)圖片箍土。
這樣的方式可以確保每種圖片是平均出現(xiàn)的，不會(huì)出現(xiàn)的次數(shù)差異太大罐监。
linklink.js修改如下：
刷新網(wǎng)頁(yè)：
可以看到吴藻，圖片出現(xiàn)的次數(shù)變的比較平均了。
要考慮成對(duì)出現(xiàn)的情況
再來(lái)解決每種圖片出現(xiàn)的個(gè)數(shù)必須是偶數(shù)的情況弓柱。
圖片生成之后沟堡，每種圖片出現(xiàn)的次數(shù)分別統(tǒng)計(jì)，只可能是2種結(jié)果矢空，要么是奇數(shù)航罗，要么是偶數(shù)。
如果是偶數(shù)則不用管了妇多，如果是奇數(shù)伤哺，則將這些奇數(shù)的情況放入一個(gè)列表中，存儲(chǔ)的是圖片序號(hào)者祖。
很明顯立莉，這個(gè)列表的元素總數(shù)肯定是偶數(shù)，因?yàn)檎麄€(gè)棋盤是偶數(shù)的七问。
那么這個(gè)列表進(jìn)行循環(huán)蜓耻，每次步進(jìn)2個(gè)元素，將這個(gè)2個(gè)元素械巡，一個(gè)做加1刹淌，一個(gè)做減1饶氏，結(jié)果必然就是2個(gè)對(duì)應(yīng)圖片都是偶數(shù)了。
具體就是根據(jù)這要減1的圖片序號(hào)有勾，去已生成的棋盤存儲(chǔ)數(shù)據(jù)中找到相等的圖片序號(hào)的位置疹启，將此位置的圖片序號(hào)改為加1的圖片序號(hào)。
linklink.js修改如下：
刷新網(wǎng)頁(yè)：
統(tǒng)計(jì)每一種圖片個(gè)數(shù)蔼卡，可以看到全部都是偶數(shù)了喊崖。
每一關(guān)單獨(dú)測(cè)試
修改變量level的值，這樣可以測(cè)試每一關(guān)雇逞，不同難度的數(shù)值荤懂，生成關(guān)卡數(shù)據(jù)是否有異常。
linklink.js修改如下：
刷新網(wǎng)頁(yè)：
可以看到第2關(guān)的情況塘砸，出現(xiàn)了新的圖片了节仿。說(shuō)明關(guān)卡不一樣了。
多刷新幾次網(wǎng)頁(yè)掉蔬，看看是否出現(xiàn)異忱认埽或者需要花費(fèi)很長(zhǎng)時(shí)間。
然后依次修改這個(gè)值眉踱，從3到9挤忙，測(cè)試每一關(guān)都能正常生成相應(yīng)數(shù)據(jù)。
編寫點(diǎn)擊處理事件
初始化完成之后谈喳，來(lái)處理圖片點(diǎn)擊事件册烈。
可以參照之前做算24點(diǎn)的做法，選中的圖片修改css樣式的名字婿禽。
新增2個(gè)參數(shù)為selectrow和selectcol赏僧，默認(rèn)為-1，表示無(wú)選中扭倾。
如果沒(méi)有選中圖片淀零，則修改樣式為選中，并且將selectrow和selectcol設(shè)置為選中的行號(hào)和列號(hào)膛壹。
如果已經(jīng)有一個(gè)選中圖片驾中，則判斷當(dāng)前點(diǎn)擊的圖片序號(hào)和之前選中的序號(hào)是否相同，不相同則切換選中焦點(diǎn)模聋。
如果相同則需要判斷是否可以連通肩民，默認(rèn)判斷函數(shù)都是可連通的，后面再來(lái)編寫判斷函數(shù)链方。
如果連通的話持痰，則將這2個(gè)位置的圖片序號(hào)都設(shè)置為0，并修改圖片的src屬性祟蚀」で希看起來(lái)就是圖片消除了割卖。
linklink.js修改如下：
刷新網(wǎng)頁(yè)：
點(diǎn)擊某個(gè)圖片：
可以看到選中狀態(tài)了，然后點(diǎn)擊一個(gè)不同的圖片：
可以看到選中的焦點(diǎn)切換到后面的圖片患雏，然后點(diǎn)擊另外一個(gè)相同的圖片：
可以看到2個(gè)相同圖片消失了鹏溯。同時(shí)選中焦點(diǎn)也消失了。
假設(shè)都是不連通情況的處理
剛才是將連通函數(shù)都是返回true纵苛，那么還有可能是false剿涮。
這種情況下的處理就是不消除圖片，僅僅是將選中焦點(diǎn)清除攻人。
linklink.js修改如下：
刷新網(wǎng)頁(yè)：
選中一個(gè)圖片：
然后點(diǎn)擊另外一個(gè)相同的圖片：
可以看到，沒(méi)有消除這2個(gè)圖片悬槽，僅僅是選中焦點(diǎn)消失了怀吻。
下節(jié)課，就來(lái)重點(diǎn)編寫最核心的算法：判斷是否可以連通函數(shù)初婆。
