|
|
下面就開始我的教程（姑且算是教程吧，草草寫點吧，時間太少，大家原諒）
以最高難度游戲級別作的分析。
第一步，大體分析
看看游戲主要包含哪些元素，發現3部分，一些成對的圖片塊，一個能盛圖片塊的方盤容器，一個能連接兩個圖塊的線。
第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會相應鼠標的點擊，圖塊會消失，圖塊有高度和寬度。
方盤：能承載128個圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：游戲的核心，連接兩塊圖塊得中心點，最多只能折兩次，不能穿透圖塊，連線可以通過方盤外部
第三步，抽象
有了上面的分析，把3個元素抽象成3個對象，怎么抽象的，自己動腦吧，我寫的代碼就是因為動腦不足，導致封裝亂七八糟的。
第四部，核心算法
1，洗牌算法（很簡單的算法）
把2維數組的數據推到1維數組，交換數據中位置屬性，重新按照位置放置元素
2，查找路徑：
其實連連看最主要的地方就是如何查找兩個圖塊之間的一條最多只有兩個折點的路徑，這里的實現方法有很多種，我這里實現的是找到的方法，不是最短路徑或者最優路徑的方法。
根據研究你會發現，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那么，我們就可以利用這個關系，查找一條路徑。
首先，設兩個圖塊A,B，那么每個圖塊都有X向和Y向兩條射線，那么如果存在一條Y向法線在AB的X射線公共區之間，或者存在X向法線在AB的Y射線公共區之間，那么就找到了一條路徑。
沒有實現的地方：（這些基本都是無關緊要了，關口可以根據洗牌的方法很容易改造出來，有興趣你就去實現吧）
計時、計分、提示、關口
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
JavaScript技術：用javascript做一個webgame連連看大家看下，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
