上節(jié)課完成了一個(gè)算24點(diǎn)的游戲，基本了解了關(guān)于使用JavaScript如何編寫(xiě)一個(gè)游戲的基本要素。
接下來(lái)的幾節(jié)課，來(lái)完成更復(fù)雜的網(wǎng)頁(yè)游戲：連連看。
要編游戲先得會(huì)玩游戲
如果沒(méi)有玩過(guò)這個(gè)游戲的同學(xué)，需要先去嘗試玩一下這個(gè)游戲，了解游戲的基本規(guī)則。
打開(kāi)瀏覽器，進(jìn)入網(wǎng)站：
然后點(diǎn)擊益智類(lèi)的第一個(gè)鏈接：連連看。
然后點(diǎn)擊左側(cè)排行第一的“寵物連連看2.5”。
然后點(diǎn)擊“開(kāi)始游戲”。進(jìn)入游戲主界面。
游戲的玩法很簡(jiǎn)單，就是找到相同的2個(gè)圖片，連起來(lái)消掉，全部消掉過(guò)關(guān)。
連接2個(gè)圖片的方法是先選中一個(gè)圖片如下：
然后點(diǎn)擊另外一個(gè)相同的圖片，滿足一定連接規(guī)則，就可以消掉了。
例如上面消掉的2個(gè)圖片連接的方式是直線連接。
下面選擇上面的2個(gè)相同圖片：
可以看到消掉了，這2個(gè)圖片連接的方式是拐了2個(gè)直角彎進(jìn)行連接。
再將當(dāng)中的2個(gè)圖片消掉：
然后就可以繼續(xù)消掉，2個(gè)圖片如果是拐了1個(gè)直角彎進(jìn)行連接也可以消掉。
游戲每一個(gè)關(guān)卡會(huì)進(jìn)行倒計(jì)時(shí)，時(shí)間到了，沒(méi)有完成關(guān)卡，則游戲結(jié)束。
游戲還有一個(gè)功能是生命值，如果游戲玩到某種狀況，無(wú)法找到可以連接的情況，則會(huì)消耗一條命，程序會(huì)將剩余的圖片重新排布，讓游戲可以繼續(xù)下去。如果全部生命都消耗光了，則游戲結(jié)果。如果過(guò)了一關(guān)，則生命值加1。
游戲還有一個(gè)功能是可以暫停，暫停的時(shí)候，倒計(jì)時(shí)會(huì)暫停，但是圖片全部不顯示。取消暫停，則繼續(xù)倒計(jì)時(shí)，并繼續(xù)可以玩。
游戲還有一個(gè)功能是可以提示，當(dāng)很長(zhǎng)時(shí)間都無(wú)法發(fā)現(xiàn)可以連接的情況下，為了節(jié)省時(shí)間，可以消耗一條命，讓程序提示可以消掉哪2個(gè)圖片。
請(qǐng)大家努力完成游戲，盡量多打幾關(guān)，熟悉游戲規(guī)則才能編寫(xiě)開(kāi)發(fā)出這個(gè)游戲。
游戲功能和界面設(shè)計(jì)
游戲要實(shí)現(xiàn)的功能上面已經(jīng)說(shuō)明過(guò)了，來(lái)完全模仿實(shí)現(xiàn)所有的功能。
這個(gè)游戲總共有9關(guān)，每一關(guān)的不同之處在于，1個(gè)是相同圖片出現(xiàn)的總個(gè)數(shù)平均值從大變小，另一個(gè)是完成1個(gè)連接后剩余圖片的移動(dòng)方向。具體移動(dòng)方向如下：
第1關(guān)：不移動(dòng)
第2關(guān)：向下移動(dòng)
第3關(guān)：向上移動(dòng)
第4關(guān)：向左移動(dòng)
第5關(guān)：向右移動(dòng)
第6關(guān)：從中間向左右分開(kāi)移動(dòng)
第7關(guān)：從中間向上下分開(kāi)移動(dòng)
第8關(guān)：從中間向上下左右分開(kāi)移動(dòng)
第9關(guān)：從上下左右向中間移動(dòng)
界面設(shè)計(jì)呢，也可以參考上面的界面，但是簡(jiǎn)陋一些也沒(méi)關(guān)系，先保證功能正常能玩，后續(xù)再慢慢修改美化界面。
大致的界面樣式是這樣的：
程序設(shè)計(jì)思路
首先定義游戲的一些常量。
從左到右14個(gè)圖，從上到下10個(gè)圖，每個(gè)圖是正方形，邊長(zhǎng)為40px。邊框?qū)挾葹?px。
總共有9關(guān)，初始有6條命，每關(guān)的時(shí)間暫定都是一樣的200秒。當(dāng)然也可以加大難度，越往后的關(guān)卡時(shí)間越短。
另外還要明確下，每關(guān)出現(xiàn)的不同圖片的種類(lèi)的個(gè)數(shù)。圖片種類(lèi)數(shù)越少，則每個(gè)種類(lèi)出現(xiàn)的圖片數(shù)就越多，也就越容易。反之則越難。
大概統(tǒng)計(jì)一下，第1關(guān)出現(xiàn)的圖片種類(lèi)數(shù)為30種，圖片總數(shù)是140個(gè)，平均每種圖片出現(xiàn)次數(shù)為4.6個(gè)，當(dāng)然是通過(guò)隨機(jī)數(shù)來(lái)控制。
假設(shè)每過(guò)一關(guān)增加4種圖片種類(lèi)，則第9關(guān)圖片種類(lèi)數(shù)為62種，平均每種圖片出現(xiàn)次數(shù)為2.25個(gè)，大概難度還可以。當(dāng)然也可以完成整個(gè)程序通過(guò)測(cè)試來(lái)試驗(yàn)是否難度太大，然后調(diào)整難度參數(shù)即可。
所有的圖片考慮采用png格式，準(zhǔn)備一個(gè)完全透明的圖片，如果消掉的圖片就用完全透明圖片來(lái)代替。
焦點(diǎn)選中效果，采用變更圖片的邊框的css樣式來(lái)實(shí)現(xiàn)。類(lèi)似于上節(jié)課的算24點(diǎn)的焦點(diǎn)效果一樣。
兩個(gè)圖片相同且滿足連接條件，則顯示一個(gè)連接線，暫停0.5秒后連接線和2個(gè)圖片都消失。
畫(huà)連接線，可以使用一個(gè)canvas標(biāo)簽浮在圖片層的上層，根據(jù)2個(gè)選中的圖片獲得起始和結(jié)束坐標(biāo)，以及可能的中間點(diǎn)坐標(biāo)，然后直接描畫(huà)出連接線。
根據(jù)規(guī)則，連連看的連接線最多只能有2個(gè)直角拐角，并且連接線當(dāng)中的單元格必須是空的。連接線允許使用棋盤(pán)外的一個(gè)空的單元格。
因此，連連看的連接線的形式最多是4種：
1.直線
2.單折線
3.雙折S線
4.雙折回線
分別如下圖所示:
同時(shí)可以從左上角作為原點(diǎn)，坐標(biāo)為(x,y)，橫向?yàn)閤，縱向?yàn)閥。
同時(shí)為了計(jì)算方便，格子之外也占用一個(gè)坐標(biāo)位置。
最重要的判斷兩點(diǎn)是否能連通的函數(shù)的算法，就是依次判斷這4種情況是否可以連通。
首先判斷兩點(diǎn)是否在一條線上，假如是，則只需判斷情況1和情況4。
假如兩點(diǎn)不在一條線上，則只需要判斷情況2和情況3和情況4。
第1種直線判斷很簡(jiǎn)單，就是2點(diǎn)之間的是否全部是空的單元格。如下圖所示：
第2種單折線，判斷就是找到2點(diǎn)之間的延伸相交的2點(diǎn)作為單轉(zhuǎn)折點(diǎn)，再分解為判斷2條直線。如下圖所示：
第3種雙折S線，就是遍歷2點(diǎn)之間的區(qū)域的邊線的所有能組成3段直線的2個(gè)轉(zhuǎn)折點(diǎn)，再分解為判斷3條直線。如下圖所示：
第4中雙折回線，就是便利2點(diǎn)對(duì)應(yīng)的棋盤(pán)外的區(qū)域的4條邊的所有能組成3段直線的2個(gè)轉(zhuǎn)折點(diǎn)，再分解為判斷3條直線。如下圖所示：
先編寫(xiě)所有的網(wǎng)頁(yè)顯示元素和對(duì)應(yīng)的樣式。
接下來(lái)編寫(xiě)初始化函數(shù)，使用JavaScript生成140個(gè)圖片元素。
然后編寫(xiě)隨機(jī)生成圖片序號(hào)函數(shù)，初始化的時(shí)候顯示出所有的對(duì)應(yīng)圖片。
然后編寫(xiě)焦點(diǎn)控制函數(shù)，移動(dòng)焦點(diǎn)的事件。
最后編寫(xiě)判斷是否連接函數(shù)，如果成功連接，則編寫(xiě)消掉2個(gè)方塊的函數(shù)，然后編寫(xiě)剩余方塊移動(dòng)函數(shù)。
然后編寫(xiě)判斷是否沒(méi)有可以連接的方塊了，是否游戲結(jié)束了函數(shù)。這個(gè)函數(shù)可用于提示功能。
如果沒(méi)有可連接的方塊，則需要編寫(xiě)變換剩余方塊位置的函數(shù)。
同時(shí)將生命值考慮進(jìn)去。
最后，編寫(xiě)倒計(jì)時(shí)相關(guān)函數(shù)和暫停功能。
去網(wǎng)上尋找圖片素材
根據(jù)之前的設(shè)計(jì)，需要至少62個(gè)不同的圖片。
去網(wǎng)上搜索關(guān)鍵字“連連看圖片素材包下載”，找到喜歡的圖片。
學(xué)哥是從這里下載的http://www.58pic.com/indexphp/download/12573696，下載后是一個(gè)zip文件。
將zip文件解開(kāi)之后是3個(gè)文件，然后對(duì)swf文件繼續(xù)進(jìn)行解壓縮，解開(kāi)之后就是這樣的：
將這76個(gè)文件存放到images目錄下。
如果實(shí)在找不到圖片，那么就自己用畫(huà)圖程序畫(huà)吧，圖片里面放上數(shù)字就好了。
然后自己創(chuàng)建一個(gè)透明背景的png文件，大小和下載的圖片大小一樣，命令為相同的規(guī)則，序號(hào)為0。
編寫(xiě)網(wǎng)頁(yè)顯示效果
開(kāi)始編寫(xiě)網(wǎng)頁(yè)顯示界面，編寫(xiě)上面的按鈕和狀態(tài)欄，然后編寫(xiě)4個(gè)圖片的靜態(tài)顯示效果，其中一個(gè)為透明圖片，設(shè)置相應(yīng)的樣式。
創(chuàng)建3個(gè)文件，linklink.html，linklink.css，linklink.js。
linklink.css代碼如下：
linklink.html代碼如下：
瀏覽器打開(kāi)這個(gè)html文件，查看顯示效果：
可以看到，網(wǎng)頁(yè)的基本的顯示效果了。這里只寫(xiě)了4個(gè)圖片，是為了調(diào)試圖片的樣式，調(diào)試好了之后，就可以通過(guò)JavaScript來(lái)動(dòng)態(tài)生成所有的圖片。
使用JavaScript生成所有圖片元素
編寫(xiě)js文件，設(shè)置初始化變量，已經(jīng)生成相應(yīng)的數(shù)組的代碼。
linklink.js代碼如下：
修改html文件如下：
刷新網(wǎng)頁(yè)，查看：
可以看到10行14列的每個(gè)格子的位置都生成了div元素和相應(yīng)的img元素。
如果修改js代碼的生成隨機(jī)圖片序號(hào)的地方：
linklink.js修改如下：
刷新網(wǎng)頁(yè)，可以看到全部圖片都變化了。
接下來(lái)一節(jié)課，將重點(diǎn)講解如何根據(jù)關(guān)卡難度生成所有成對(duì)的圖片序號(hào)。
