用javascript做一個webgame連連看大家看下
更新時間：2008年01月19日 20:48:59 作者：
用javascript做一個webgame連連看大家看下
最后成品代碼寫的倉促，沒有容錯，封裝也不合理，只實現(xiàn)了核心部分，其他部分，喜歡添加的舊添加吧。
下面就開始我的教程（姑且算是教程吧，草草寫點吧，時間太少，大家原諒）
以最高難度游戲級別作的分析。
第一步，大體分析
看看游戲主要包含哪些元素，發(fā)現(xiàn)3部分，一些成對的圖片塊，一個能盛圖片塊的方盤容器，一個能連接兩個圖塊的線。
第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會相應(yīng)鼠標(biāo)的點擊，圖塊會消失，圖塊有高度和寬度。
方盤：能承載128個圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：游戲的核心，連接兩塊圖塊得中心點，最多只能折兩次，不能穿透圖塊，連線可以通過方盤外部
第三步，抽象
有了上面的分析，把3個元素抽象成3個對象，怎么抽象的，自己動腦吧，我寫的代碼就是因為動腦不足，導(dǎo)致封裝亂七八糟的。
第四部，核心算法
1，洗牌算法（很簡單的算法）
把2維數(shù)組的數(shù)據(jù)推到1維數(shù)組，交換數(shù)據(jù)中位置屬性，重新按照位置放置元素
2，查找路徑：
其實連連看最主要的地方就是如何查找兩個圖塊之間的一條最多只有兩個折點的路徑，這里的實現(xiàn)方法有很多種，我這里實現(xiàn)的是找到的方法，不是最短路徑或者最優(yōu)路徑的方法。
根據(jù)研究你會發(fā)現(xiàn)，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那么，我們就可以利用這個關(guān)系，查找一條路徑。
首先，設(shè)兩個圖塊A,B，那么每個圖塊都有X向和Y向兩條射線，那么如果存在一條Y向法線在AB的X射線公共區(qū)之間，或者存在X向法線在AB的Y射線公共區(qū)之間，那么就找到了一條路徑。
沒有實現(xiàn)的地方：（這些基本都是無關(guān)緊要了，關(guān)口可以根據(jù)洗牌的方法很容易改造出來，有興趣你就去實現(xiàn)吧）
計時、計分、提示、關(guān)口
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面就開始我的教程（姑且算是教程吧，草草寫點吧，時間太少，大家原諒）
以最高難度游戲級別作的分析。
第一步，大體分析
看看游戲主要包含哪些元素，發(fā)現(xiàn)3部分，一些成對的圖片塊，一個能盛圖片塊的方盤容器，一個能連接兩個圖塊的線。
第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會相應(yīng)鼠標(biāo)的點擊，圖塊會消失，圖塊有高度和寬度。
方盤：能承載128個圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：游戲的核心，連接兩塊圖塊得中心點，最多只能折兩次，不能穿透圖塊，連線可以通過方盤外部
第三步，抽象
有了上面的分析，把3個元素抽象成3個對象，怎么抽象的，自己動腦吧，我寫的代碼就是因為動腦不足，導(dǎo)致封裝亂七八糟的。
第四部，核心算法
1，洗牌算法（很簡單的算法）
把2維數(shù)組的數(shù)據(jù)推到1維數(shù)組，交換數(shù)據(jù)中位置屬性，重新按照位置放置元素
2，查找路徑：
其實連連看最主要的地方就是如何查找兩個圖塊之間的一條最多只有兩個折點的路徑，這里的實現(xiàn)方法有很多種，我這里實現(xiàn)的是找到的方法，不是最短路徑或者最優(yōu)路徑的方法。
根據(jù)研究你會發(fā)現(xiàn)，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那么，我們就可以利用這個關(guān)系，查找一條路徑。
首先，設(shè)兩個圖塊A,B，那么每個圖塊都有X向和Y向兩條射線，那么如果存在一條Y向法線在AB的X射線公共區(qū)之間，或者存在X向法線在AB的Y射線公共區(qū)之間，那么就找到了一條路徑。
沒有實現(xiàn)的地方：（這些基本都是無關(guān)緊要了，關(guān)口可以根據(jù)洗牌的方法很容易改造出來，有興趣你就去實現(xiàn)吧）
計時、計分、提示、關(guān)口
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)li標(biāo)簽的刪除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
經(jīng)理交給我一個網(wǎng)站新聞資訊網(wǎng)頁開發(fā)的活兒，對于我這樣的java程序員，沒有接觸過網(wǎng)頁設(shè)計這么高端的東東，該怎么搞呢，去度娘那搜索到不少結(jié)果，而且很大部分都是用jquery做的，于是根據(jù)自己的一些的理解，提供了這篇jquery輪播效果的講解，有需要的朋友可以來參考下2015-08-08
JavaScript的內(nèi)置對象Math和字符串詳解
這篇文章主要為大家介紹了JavaScript的內(nèi)置對象Math和字符串，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
在使用bootstrap table的復(fù)選框功能的時候，由于采用服務(wù)端分頁，當(dāng)在第一頁選擇了某些數(shù)據(jù)，然后點擊第二頁選擇一些數(shù)據(jù)，再次點回第一頁，發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了，原來的多選框并不支持翻頁保留多選數(shù)據(jù)，怎么解決呢，下面小編給大家分享下解決思路2017-03-03
js實現(xiàn)tab選項卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當(dāng)原理也比較簡單。2010-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)上傳圖片小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了JS基于VUE組件實現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
bootstrap treeview 擴展addNode方法動態(tài)添加子節(jié)點的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的樹控件，這篇文章主要介紹了bootstrap treeview 擴展addNode方法動態(tài)添加子節(jié)點的方法,需要的朋友可以參考下2017-11-11
如何實現(xiàn)表格中行點擊時的漸擴效果！...2007-01-01
純JS實現(xiàn)根據(jù)CSS的class選擇DOM
這篇文章主要介紹了純JS實現(xiàn)根據(jù)CSS的class選擇DOM,需要的朋友可以參考下2014-03-03