用javascript做一個(gè)webgame連連看大家看下
更新時(shí)間：2008年01月19日 20:48:59 作者：
用javascript做一個(gè)webgame連連看大家看下
最后成品代碼寫的倉(cāng)促，沒有容錯(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ū)之間，那么就找到了一條路徑。
沒有實(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ū)之間，那么就找到了一條路徑。
沒有實(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)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)li標(biāo)簽的刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
Jquery代碼實(shí)現(xiàn)圖片輪播效果（一）
經(jīng)理交給我一個(gè)網(wǎng)站新聞資訊網(wǎng)頁(yè)開發(fā)的活兒，對(duì)于我這樣的java程序員，沒有接觸過(guò)網(wǎng)頁(yè)設(shè)計(jì)這么高端的東東，該怎么搞呢，去度娘那搜索到不少結(jié)果，而且很大部分都是用jquery做的，于是根據(jù)自己的一些的理解，提供了這篇jquery輪播效果的講解，有需要的朋友可以來(lái)參考下2015-08-08
JavaScript的內(nèi)置對(duì)象Math和字符串詳解
這篇文章主要為大家介紹了JavaScript的內(nèi)置對(duì)象Math和字符串，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
bootstrap table 多選框分頁(yè)保留示例代碼
在使用bootstrap table的復(fù)選框功能的時(shí)候，由于采用服務(wù)端分頁(yè)，當(dāng)在第一頁(yè)選擇了某些數(shù)據(jù)，然后點(diǎn)擊第二頁(yè)選擇一些數(shù)據(jù)，再次點(diǎn)回第一頁(yè)，發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了，原來(lái)的多選框并不支持翻頁(yè)保留多選數(shù)據(jù)，怎么解決呢，下面小編給大家分享下解決思路2017-03-03
js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當(dāng)原理也比較簡(jiǎn)單。2010-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳圖片小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實(shí)現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的樹控件，這篇文章主要介紹了bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法,需要的朋友可以參考下2017-11-11
如何實(shí)現(xiàn)表格中行點(diǎn)擊時(shí)的漸擴(kuò)效果！
如何實(shí)現(xiàn)表格中行點(diǎn)擊時(shí)的漸擴(kuò)效果！...2007-01-01
純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM
這篇文章主要介紹了純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM,需要的朋友可以參考下2014-03-03