用javascript做一個webgame連連看大家看下

最後成品代碼寫的倉促，沒有容錯，封裝也不合理，只實現了核心部分，其他部分，喜歡添加的舊添加吧。

下面就開始我的教程（姑且算是教程吧，草草寫點吧，時間太少，大家原諒）

以最高難度遊戲層級作的分析。
第一步，大體分析
看看遊戲主要包含哪些元素，發現3部分，一些成對的圖片塊，一個能盛圖片塊的方盤容器，一個能串連兩個圖塊的線。

第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會相應滑鼠的點擊，圖塊會消失，圖塊有高度和寬度。
方盤：能承載128個圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：遊戲的核心，串連兩塊圖塊得中心點，最多隻能折兩次，不能穿透圖塊，連線可以通過方盤外部

第三步，抽象
有了上面的分析，把3個元素抽象成3個對象，怎麼抽象的，自己動腦吧，我寫的代碼就是因為動腦不足，導致封裝亂七八糟的。

第四部，核心演算法

1，洗牌演算法（很簡單的演算法）
把2維數組的資料推到1維數組，交換資料中位置屬性，重新按照位置放置元素

2，尋找路徑：
其實連連看最主要的地方就是如何尋找兩個圖塊之間的一條最多隻有兩個折點的路徑，這裡的實現方法有很多種，我這裡實現的是找到的方法，不是最短路徑或者最優路徑的方法。
根據研究你會發現，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那麼，我們就可以利用這個關係，尋找一條路徑。

首先，設兩個圖塊A,B，那麼每個圖塊都有X向和Y向兩條射線，那麼如果存在一條Y向法線在AB的X射線公用區之間，或者存在X向法線在AB的Y射線公用區之間，那麼就找到了一條路徑。

沒有實現的地方：（這些基本都是無關緊要了，關口可以根據洗牌的方法很容易改造出來，有興趣你就去實現吧）
計時、計分、提示、關口

<br /><style> .select{filter:Gray} #lineDiv{height:20px} .lineDot{position:absolute; background:#f60;padding:0;font-size:0;width:10px;height:10px} #gridDiv{padding:50px;background:#000;border:5px solid #ccc} #gridTalbe{background-repeat:no-repeat; background-position:center; margin:0} #gridTalbe td{width:41px;height:50px;} #gridTalbe img{width:40px; border-right:1px solid #666;} body{ padding:0; margin:0} </style><table width="100%" border="1"><tr><td></td><td width="180" align="center" bgcolor="#CCCCCC"><input name="button" type="button" onclick="oGrid.shuffle()" value="洗牌"></td></tr></table><p>