上節(jié)課完成了一個算24點的游戲浦辨，基本了解了關(guān)于使用JavaScript如何編寫一個游戲的基本要素。
接下來的幾節(jié)課，來完成更復(fù)雜的網(wǎng)頁游戲：連連看。
要編游戲先得會玩游戲
如果沒有玩過這個游戲的同學(xué)绽淘，需要先去嘗試玩一下這個游戲，了解游戲的基本規(guī)則闹伪。
打開瀏覽器沪铭，進入網(wǎng)站：
然后點擊益智類的第一個鏈接：連連看。
然后點擊左側(cè)排行第一的“寵物連連看2.5”偏瓤。
然后點擊“開始游戲”杀怠。進入游戲主界面。
游戲的玩法很簡單厅克，就是找到相同的2個圖片赔退，連起來消掉，全部消掉過關(guān)已骇。
連接2個圖片的方法是先選中一個圖片如下：
然后點擊另外一個相同的圖片离钝，滿足一定連接規(guī)則票编，就可以消掉了褪储。
例如上面消掉的2個圖片連接的方式是直線連接。
下面選擇上面的2個相同圖片：
可以看到消掉了慧域，這2個圖片連接的方式是拐了2個直角彎進行連接鲤竹。
再將當(dāng)中的2個圖片消掉：
然后就可以繼續(xù)消掉，2個圖片如果是拐了1個直角彎進行連接也可以消掉昔榴。
游戲每一個關(guān)卡會進行倒計時辛藻，時間到了，沒有完成關(guān)卡互订，則游戲結(jié)束吱肌。
游戲還有一個功能是生命值，如果游戲玩到某種狀況仰禽，無法找到可以連接的情況氮墨，則會消耗一條命，程序會將剩余的圖片重新排布吐葵，讓游戲可以繼續(xù)下去规揪。如果全部生命都消耗光了，則游戲結(jié)果温峭。如果過了一關(guān)猛铅，則生命值加1。
游戲還有一個功能是可以暫停凤藏，暫停的時候奸忽，倒計時會暫停堕伪，但是圖片全部不顯示。取消暫停栗菜，則繼續(xù)倒計時刃跛，并繼續(xù)可以玩。
游戲還有一個功能是可以提示苛萎，當(dāng)很長時間都無法發(fā)現(xiàn)可以連接的情況下桨昙，為了節(jié)省時間，可以消耗一條命腌歉，讓程序提示可以消掉哪2個圖片蛙酪。
請大家努力完成游戲，盡量多打幾關(guān)翘盖，熟悉游戲規(guī)則才能編寫開發(fā)出這個游戲桂塞。
游戲功能和界面設(shè)計
游戲要實現(xiàn)的功能上面已經(jīng)說明過了，來完全模仿實現(xiàn)所有的功能馍驯。
這個游戲總共有9關(guān)阁危，每一關(guān)的不同之處在于，1個是相同圖片出現(xiàn)的總個數(shù)平均值從大變小汰瘫，另一個是完成1個連接后剩余圖片的移動方向狂打。具體移動方向如下：
第1關(guān)：不移動
第2關(guān)：向下移動
第3關(guān)：向上移動
第4關(guān)：向左移動
第5關(guān)：向右移動
第6關(guān)：從中間向左右分開移動
第7關(guān)：從中間向上下分開移動
第8關(guān)：從中間向上下左右分開移動
第9關(guān)：從上下左右向中間移動
界面設(shè)計呢，也可以參考上面的界面混弥，但是簡陋一些也沒關(guān)系趴乡，先保證功能正常能玩，后續(xù)再慢慢修改美化界面蝗拿。
大致的界面樣式是這樣的：
程序設(shè)計思路
首先定義游戲的一些常量晾捏。
從左到右14個圖，從上到下10個圖哀托，每個圖是正方形惦辛，邊長為40px。邊框?qū)挾葹?px仓手。
總共有9關(guān)胖齐，初始有6條命，每關(guān)的時間暫定都是一樣的200秒俗或。當(dāng)然也可以加大難度市怎，越往后的關(guān)卡時間越短。
另外還要明確下辛慰，每關(guān)出現(xiàn)的不同圖片的種類的個數(shù)区匠。圖片種類數(shù)越少，則每個種類出現(xiàn)的圖片數(shù)就越多，也就越容易驰弄。反之則越難麻汰。
大概統(tǒng)計一下，第1關(guān)出現(xiàn)的圖片種類數(shù)為30種戚篙，圖片總數(shù)是140個五鲫，平均每種圖片出現(xiàn)次數(shù)為4.6個，當(dāng)然是通過隨機數(shù)來控制岔擂。
假設(shè)每過一關(guān)增加4種圖片種類位喂，則第9關(guān)圖片種類數(shù)為62種，平均每種圖片出現(xiàn)次數(shù)為2.25個乱灵，大概難度還可以塑崖。當(dāng)然也可以完成整個程序通過測試來試驗是否難度太大，然后調(diào)整難度參數(shù)即可痛倚。
所有的圖片考慮采用png格式规婆，準(zhǔn)備一個完全透明的圖片，如果消掉的圖片就用完全透明圖片來代替蝉稳。
焦點選中效果抒蚜，采用變更圖片的邊框的css樣式來實現(xiàn)。類似于上節(jié)課的算24點的焦點效果一樣耘戚。
兩個圖片相同且滿足連接條件嗡髓，則顯示一個連接線，暫停0.5秒后連接線和2個圖片都消失毕莱。
畫連接線器贩，可以使用一個canvas標(biāo)簽浮在圖片層的上層，根據(jù)2個選中的圖片獲得起始和結(jié)束坐標(biāo)朋截，以及可能的中間點坐標(biāo)，然后直接描畫出連接線吧黄。
根據(jù)規(guī)則部服，連連看的連接線最多只能有2個直角拐角，并且連接線當(dāng)中的單元格必須是空的拗慨。連接線允許使用棋盤外的一個空的單元格廓八。
因此，連連看的連接線的形式最多是4種：
1.直線
2.單折線
3.雙折S線
4.雙折回線
分別如下圖所示:
同時可以從左上角作為原點赵抢，坐標(biāo)為(x,y)剧蹂，橫向為x，縱向為y烦却。
同時為了計算方便宠叼，格子之外也占用一個坐標(biāo)位置。
最重要的判斷兩點是否能連通的函數(shù)的算法，就是依次判斷這4種情況是否可以連通冒冬。
首先判斷兩點是否在一條線上伸蚯，假如是，則只需判斷情況1和情況4简烤。
假如兩點不在一條線上剂邮，則只需要判斷情況2和情況3和情況4。
第1種直線判斷很簡單横侦，就是2點之間的是否全部是空的單元格挥萌。如下圖所示：
第2種單折線，判斷就是找到2點之間的延伸相交的2點作為單轉(zhuǎn)折點枉侧，再分解為判斷2條直線瑞眼。如下圖所示：
第3種雙折S線，就是遍歷2點之間的區(qū)域的邊線的所有能組成3段直線的2個轉(zhuǎn)折點棵逊，再分解為判斷3條直線伤疙。如下圖所示：
第4中雙折回線，就是便利2點對應(yīng)的棋盤外的區(qū)域的4條邊的所有能組成3段直線的2個轉(zhuǎn)折點辆影，再分解為判斷3條直線徒像。如下圖所示：
先編寫所有的網(wǎng)頁顯示元素和對應(yīng)的樣式。
接下來編寫初始化函數(shù)蛙讥，使用JavaScript生成140個圖片元素锯蛀。
然后編寫隨機生成圖片序號函數(shù)，初始化的時候顯示出所有的對應(yīng)圖片次慢。
然后編寫焦點控制函數(shù)旁涤，移動焦點的事件。
最后編寫判斷是否連接函數(shù)迫像，如果成功連接劈愚，則編寫消掉2個方塊的函數(shù)，然后編寫剩余方塊移動函數(shù)闻妓。
然后編寫判斷是否沒有可以連接的方塊了菌羽，是否游戲結(jié)束了函數(shù)。這個函數(shù)可用于提示功能由缆。
如果沒有可連接的方塊注祖，則需要編寫變換剩余方塊位置的函數(shù)。
同時將生命值考慮進去均唉。
最后是晨，編寫倒計時相關(guān)函數(shù)和暫停功能。
去網(wǎng)上尋找圖片素材
根據(jù)之前的設(shè)計舔箭，需要至少62個不同的圖片罩缴。
去網(wǎng)上搜索關(guān)鍵字“連連看圖片素材包下載”，找到喜歡的圖片。
學(xué)哥是從這里下載的http://www.58pic.com/indexphp/download/12573696靴庆，下載后是一個zip文件时捌。
將zip文件解開之后是3個文件，然后對swf文件繼續(xù)進行解壓縮炉抒，解開之后就是這樣的：
將這76個文件存放到images目錄下奢讨。
如果實在找不到圖片，那么就自己用畫圖程序畫吧焰薄，圖片里面放上數(shù)字就好了拿诸。
然后自己創(chuàng)建一個透明背景的png文件，大小和下載的圖片大小一樣塞茅，命令為相同的規(guī)則亩码，序號為0。
編寫網(wǎng)頁顯示效果
開始編寫網(wǎng)頁顯示界面野瘦，編寫上面的按鈕和狀態(tài)欄描沟，然后編寫4個圖片的靜態(tài)顯示效果，其中一個為透明圖片鞭光，設(shè)置相應(yīng)的樣式吏廉。
創(chuàng)建3個文件，linklink.html惰许，linklink.css席覆，linklink.js。
linklink.css代碼如下：
linklink.html代碼如下：
瀏覽器打開這個html文件汹买，查看顯示效果：
可以看到佩伤，網(wǎng)頁的基本的顯示效果了。這里只寫了4個圖片晦毙，是為了調(diào)試圖片的樣式生巡，調(diào)試好了之后，就可以通過JavaScript來動態(tài)生成所有的圖片结序。
使用JavaScript生成所有圖片元素
編寫js文件障斋，設(shè)置初始化變量，已經(jīng)生成相應(yīng)的數(shù)組的代碼徐鹤。
linklink.js代碼如下：
修改html文件如下：
刷新網(wǎng)頁，查看：
可以看到10行14列的每個格子的位置都生成了div元素和相應(yīng)的img元素邀层。
如果修改js代碼的生成隨機圖片序號的地方：
linklink.js修改如下：
刷新網(wǎng)頁返敬，可以看到全部圖片都變化了。
接下來一節(jié)課寥院，將重點講解如何根據(jù)關(guān)卡難度生成所有成對的圖片序號劲赠。
