前端實作連連看小遊戲實例碼

部落客玩了這麼久的連連看，居然是第一次發現，連連看最多只能有2個轉彎。 orz…

在網路上搜尋連連看的連線演算法判斷，並沒有找到很全面的，經過自己摸索之後，畫了下面的圖（圖有點醜…）

 

一. 2個物體在同一直線上，可以直接連通（這個不需要解釋啦）

# 

#二.2個物體在同一直線上，中間有障礙物，不能直接連通（2個轉彎）

【循環遍歷黃線中的交點，例如A,B點，再判斷藍線有沒有障礙物，若沒有，則可以連通，若有，則繼續循環查找新的A,B點】

# 

三. 2個物件不在同一直線上，一個轉彎

【2個物體分別在所在位置進行x，y軸的延伸，如下圖則交點為A,B。 只要判斷2個交點到2個物體直接是否有障礙物，若沒有，則可以連通】

 

## 四.2個物體不在同一直線上，連線有2個轉彎 

【同二的原理，如下圖，如果A,B 2個交點到物體均沒有障礙物，則可以連通。其中A點的縱座標和B相同】

另外一種情況，A,B 為2個物體所在x軸與中間y軸的交點，A,B的x座標必須相同，連線如下：

 

# 

以上就是四個連線演算法判斷，畫圖只畫x軸的，每一種都按照同樣的原理增加y軸即可。可涵蓋所有連線判斷～

說完連線判斷的邏輯之後，寫一下整體的遊戲框架，遊戲基本上使用原生javascript，使用createjs遊戲引擎進行開發。

 

 程式碼想法：

1. 繪製遊戲畫圖，確定為多少宮圖，由於是在行動端的小遊戲，根據最小螢幕尺寸（iphone4  320*480 ），確定為7*9的宮圖。

1. 建立一個二維數組，如果某個座標上有物體，則設為1，否則為0

2.判斷該位置是否有物體，只需要判斷對應的二維數組上值是否為1，若為1，則有物體，否則沒有。

至於畫線，消除相同物體，只要會連線邏輯，肯定就會自己繪製線條，消除物體了，所以這篇文章就只講連線判斷啦～

 

在判斷能否連線的時候，肯定是從最簡單的方法開始判斷,如下：

同一直線能否直線連通--->如何一點被包圍，則不通--->兩點在一條直線上，不能直線連接但是可以連通---> 不在同一直線但是可以連通

getPath: function (p1, p2) {//开始搜索前对p1,p2排序，使p2尽可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;
                p1 = p2;
                p2 = t;
            }else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;
                    p1 = p2;
                    p2 = t;
                }
            }//2点在同一直线上，可以直线连通if (this.hasLine(p1, p2).status) {return true;
            }//如果两点中任何一个点被全包围，则不通。else if (this.isWrap(p1, p2)) {return false;
            }//两点在一条直线上，不能直线连接但是可以连通else if (this.LineLink(p1, p2)) {return true;
            }//不在同一直线但是可以连通else if (this.curveLink(p1, p2)) {return true;
            }    
}

 

#

//判断同一条线能否连通,x轴相同或者y轴相同hasLine: function (p1, p2) {this.path = [];//同一点if (p1.x == p2.x && p1.y == p2.y) {return {
                    status: false};
            }if (this.onlineY(p1, p2)) {var min = p1.y > p2.y ? p2.y : p1.y;
                min = min + 1;var max = p1.y > p2.y ? p1.y : p2.y;for (min; min  p2.x ? p2.x : p1.x;
                j = j + 1;var max = p1.x > p2.x ? p1.x : p2.x;for (j; j <div class="cnblogs_code_hide"></div>連線判斷<span class="cnblogs_code_collapse"></span>

 

#

以上是前端實作連連看小遊戲實例碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！