用javascript做一個(gè)webgame連連看大家看下
更新時(shí)間：2008年01月19日 20:48:59 作者：
用javascript做一個(gè)webgame連連看大家看下
最后成品代碼寫的倉(cāng)促，沒(méi)有容錯(cuò)，封裝也不合理，只實(shí)現(xiàn)了核心部分，其他部分，喜歡添加的舊添加吧。
下面就開始我的教程（姑且算是教程吧，草草寫點(diǎn)吧，時(shí)間太少，大家原諒）
以最高難度游戲級(jí)別作的分析。
第一步，大體分析
看看游戲主要包含哪些元素，發(fā)現(xiàn)3部分，一些成對(duì)的圖片塊，一個(gè)能盛圖片塊的方盤容器，一個(gè)能連接兩個(gè)圖塊的線。
第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會(huì)相應(yīng)鼠標(biāo)的點(diǎn)擊，圖塊會(huì)消失，圖塊有高度和寬度。
方盤：能承載128個(gè)圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：游戲的核心，連接兩塊圖塊得中心點(diǎn)，最多只能折兩次，不能穿透圖塊，連線可以通過(guò)方盤外部
第三步，抽象
有了上面的分析，把3個(gè)元素抽象成3個(gè)對(duì)象，怎么抽象的，自己動(dòng)腦吧，我寫的代碼就是因?yàn)閯?dòng)腦不足，導(dǎo)致封裝亂七八糟的。
第四部，核心算法
1，洗牌算法（很簡(jiǎn)單的算法）
把2維數(shù)組的數(shù)據(jù)推到1維數(shù)組，交換數(shù)據(jù)中位置屬性，重新按照位置放置元素
2，查找路徑：
其實(shí)連連看最主要的地方就是如何查找兩個(gè)圖塊之間的一條最多只有兩個(gè)折點(diǎn)的路徑，這里的實(shí)現(xiàn)方法有很多種，我這里實(shí)現(xiàn)的是找到的方法，不是最短路徑或者最優(yōu)路徑的方法。
根據(jù)研究你會(huì)發(fā)現(xiàn)，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那么，我們就可以利用這個(gè)關(guān)系，查找一條路徑。
首先，設(shè)兩個(gè)圖塊A,B，那么每個(gè)圖塊都有X向和Y向兩條射線，那么如果存在一條Y向法線在AB的X射線公共區(qū)之間，或者存在X向法線在AB的Y射線公共區(qū)之間，那么就找到了一條路徑。
沒(méi)有實(shí)現(xiàn)的地方：（這些基本都是無(wú)關(guān)緊要了，關(guān)口可以根據(jù)洗牌的方法很容易改造出來(lái)，有興趣你就去實(shí)現(xiàn)吧）
計(jì)時(shí)、計(jì)分、提示、關(guān)口
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
下面就開始我的教程（姑且算是教程吧，草草寫點(diǎn)吧，時(shí)間太少，大家原諒）
以最高難度游戲級(jí)別作的分析。
第一步，大體分析
看看游戲主要包含哪些元素，發(fā)現(xiàn)3部分，一些成對(duì)的圖片塊，一個(gè)能盛圖片塊的方盤容器，一個(gè)能連接兩個(gè)圖塊的線。
第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會(huì)相應(yīng)鼠標(biāo)的點(diǎn)擊，圖塊會(huì)消失，圖塊有高度和寬度。
方盤：能承載128個(gè)圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：游戲的核心，連接兩塊圖塊得中心點(diǎn)，最多只能折兩次，不能穿透圖塊，連線可以通過(guò)方盤外部
第三步，抽象
有了上面的分析，把3個(gè)元素抽象成3個(gè)對(duì)象，怎么抽象的，自己動(dòng)腦吧，我寫的代碼就是因?yàn)閯?dòng)腦不足，導(dǎo)致封裝亂七八糟的。
第四部，核心算法
1，洗牌算法（很簡(jiǎn)單的算法）
把2維數(shù)組的數(shù)據(jù)推到1維數(shù)組，交換數(shù)據(jù)中位置屬性，重新按照位置放置元素
2，查找路徑：
其實(shí)連連看最主要的地方就是如何查找兩個(gè)圖塊之間的一條最多只有兩個(gè)折點(diǎn)的路徑，這里的實(shí)現(xiàn)方法有很多種，我這里實(shí)現(xiàn)的是找到的方法，不是最短路徑或者最優(yōu)路徑的方法。
根據(jù)研究你會(huì)發(fā)現(xiàn)，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那么，我們就可以利用這個(gè)關(guān)系，查找一條路徑。
首先，設(shè)兩個(gè)圖塊A,B，那么每個(gè)圖塊都有X向和Y向兩條射線，那么如果存在一條Y向法線在AB的X射線公共區(qū)之間，或者存在X向法線在AB的Y射線公共區(qū)之間，那么就找到了一條路徑。
沒(méi)有實(shí)現(xiàn)的地方：（這些基本都是無(wú)關(guān)緊要了，關(guān)口可以根據(jù)洗牌的方法很容易改造出來(lái)，有興趣你就去實(shí)現(xiàn)吧）
計(jì)時(shí)、計(jì)分、提示、關(guān)口
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
這篇文章主要介紹了JS模擬鍵盤打字效果的方法,涉及javascript鼠標(biāo)事件及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家介紹了Javascript 虛擬 DOM，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了基于ajax實(shí)現(xiàn)上傳圖片代碼示例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11
前端利用PrintJs實(shí)現(xiàn)批量打印文件功能
在項(xiàng)目中遇到一個(gè)問(wèn)題需要實(shí)現(xiàn)批量打印功能,研究了測(cè)試了一番解決了,把相關(guān)的功能記錄下,這篇文章主要介紹了前端利用PrintJs實(shí)現(xiàn)批量打印文件功能的相關(guān)資料,需要的朋友可以參考下2025-02-02
JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)五子棋游戲的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)五子棋游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合實(shí)例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了JS圖片預(yù)加載插件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了js數(shù)組中如何隨機(jī)取出一個(gè)值,需要的朋友可以參考下2014-06-06
JavaScript面向?qū)ο笾叽蠡驹瓌t實(shí)例詳解
這篇文章主要介紹了JavaScript面向?qū)ο笾叽蠡驹瓌t,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο笃叽蠡驹瓌t,包括單一職責(zé)、開閉原則、里氏替換、依賴倒置、接口隔離、迪米特法則及組合/聚合復(fù)用原則,需要的朋友可以參考下2020-05-05