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