瘋狂連連看》遊戲的遊戲界面大緻上可分為以下兩個區域。
遊戲主界面區。
控制按鈕與資料顯示區。
13.2.1 開發界面布局
本程式中使用一個自定義UIView作為遊戲區，該自定義的UIView将會放在遊戲界面的上方，下方放置一個UIView作為容器，并在該UIView左邊放置一個按鈕，右邊放置一個UILabel顯示剩餘時間，如圖13.3所示。
13.2.2 開發遊戲界面控件
該遊戲的界面控件采用一個自定義控件：FKGameView，它從UIView基類派生而出，這個自定義UIView的功能就是根據遊戲狀态來繪制遊戲界面上的全部方塊。
為了開發這個FKGameView，本程式還提供了一個FKPiece類，一個FKPiece對象代表遊戲界面上的一個方塊，它除了封裝方塊上的圖檔之外，還需要封裝該方塊代表二維數組中的哪個元素，以及它的左上角在遊戲界面中的X、Y坐标。圖13.4示意了方塊左上角X、Y坐标的作用。
方塊左上角的X、Y坐标可決定它的繪制位置，FKGameView根據這兩個坐标值繪制所有的方塊即可。下面是該程式中FKPiece類的接口代碼。
程式清單：codes/13/Link/Link/sources/view/FKPiece.h
<a href="http://s3.51cto.com/wyfs02/M00/12/22/wKiom1L62ESzDtoUAAKNEYVU9Xc856.jpg" target="_blank"></a>
FKPiece類的實作部分主要是實作一個初始化方式，并為接口部分定義的方法提供實作，下面是FKPiece類實作部分的代碼。
程式清單：codes/13/Link/Link/sources/view/FKPiece.m
<a href="http://s3.51cto.com/wyfs02/M01/12/22/wKiom1L62FrR9O2cAAKuYzznquU855.jpg" target="_blank"></a>
上面的FKPiece類中封裝的FKPieceImage代表該方塊上的圖檔，但此處并未直接使用UIImage對象來代表方塊上的圖檔，因為我們需要使用FKPieceImage來封裝兩個資訊：UIImage對象和圖檔資源的ID。其中，UIImage對象用于在遊戲界面上繪制方塊；圖檔資源的ID則代表該FKPiece對象的辨別，當兩個FKPiece所封裝的圖檔資源的ID相等時，即可認為這兩個FKPiece上的圖檔相同。如以上程式中粗體字代碼所示。
提示：
上面的程式還用到了一個FKPoint類，該FKPoint類隻是一個封裝了x、y兩個屬性的類，但程式并未直接使用CGPoint，這是因為程式需要把FKPoint添加到NSArray集合中，還要作為NSDictionary的key，而CGPoint隻是一個結構體，是以需要使用自定義的FKPoint類。
下面是FKPieceImage類的接口代碼。
程式清單：codes/13/Link/Link/sources/view/FKPieceImage.h
<a href="http://s3.51cto.com/wyfs02/M00/12/23/wKioL1L62EeQUlFJAADqiapZCbg714.jpg" target="_blank"></a>
下面是FKPieceImage類的實作代碼。
程式清單：codes/13/Link/Link/sources/view/FKPieceImage.m
<a href="http://s3.51cto.com/wyfs02/M02/12/22/wKiom1L62H6SFwslAADbr-Yc-aM088.jpg" target="_blank"></a>
FKGameView主要就是根據遊戲的狀态資料來繪制界面上的方塊，它繼承了UIView基類，重寫了UIView基類的drawRectCGRect)rect方法，重寫該方法主要就是繪制遊戲裡剩餘的方塊。它還會負責繪制連接配接方塊的連接配接線。除此之外，FKGameView還需要監聽使用者的觸碰動作，當使用者觸碰螢幕時，程式需要擷取使用者觸碰的是哪個方塊，并判斷是否需要“消除”該方塊。為了判斷能否消除該方塊，程式需要進行如下判斷：
如果程式之前已經選中了某個方塊，就判斷目前觸碰的方塊是否能與之前的方塊“相連”，如果可以相連，則消除兩個方塊，并判斷是否勝利（是否已消除所有的方塊）；如果兩個方塊不可以相連，則把目前方塊設定為選中方塊。如果程式之前沒有選中方塊，直接将目前方塊設定為選中方塊。
FKGamaView的接口部分代碼如下：
程式清單：codes/13/Link/Link/sources/view/FKGameView.h
<a href="http://s3.51cto.com/wyfs02/M01/12/23/wKioL1L62-PzZSw6AAH7ZuRHxb8260.jpg" target="_blank"></a>
FKGamaView的實作部分代碼如下。
程式清單：codes/13/Link/Link/sources/view/FKGameView.m
<a href="http://s3.51cto.com/wyfs02/M00/12/23/wKiom1L63B7jx4bSAAT_CsMc5jo461.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M02/12/23/wKioL1L63APgRESJAALKqEvk_Vk088.jpg" target="_blank"></a>
上面的FKGameView中，第一段粗體字代碼根據遊戲的狀态資料來繪制界面中的所有方塊，第二段粗體字代碼則根據FKLinkInfo來繪制兩個方塊之間的連接配接線。
程式中，①号代碼處定義了FKGameService對象，②号代碼則調用FKGameService的getPieces()方法來擷取遊戲中剩餘的方塊，FKGameService是遊戲的業務邏輯實作類。後面會詳細介紹該類的實作，此處暫不講解。
提示： 該類還加載了兩個音效檔案作為遊戲音效，讀者可參考本書下卷中關于音頻播放的相關知識。為了正常使用 AudioToolbox 架構，并在源代碼的開始添加 #import <AudioToolbox/AudioToolbox.h> 代碼。
程式的touchesBegan:withEvent:方法中，粗體字代碼負責處理該控件的觸碰事件，當使用者觸碰該區域時，它會先根據觸碰點計算出觸碰的方塊，如③号粗體字代碼所示。接下來該方法會判斷是否之前已有選中的方塊，如果沒有，直接将目前方塊設為選中方塊；如果有，判斷兩個方塊是否可以相連，如④号粗體字代碼所示。
如果兩個方塊可以相連，程式将會從FKPiece二維數組中删除這兩個方塊，該邏輯由程式中的⑤号粗體字代碼定義的handleSuccessLink:prevPiece:currentPiece:pieces:方法完成。
13.2.3 處理方塊之間的連接配接線
FKLinkInfo是一個非常簡單的工具類，它用于封裝兩個方塊之間的連接配接資訊——其實就是封裝一個NSMutableArray，NSMutableArray中儲存了連接配接線需要經過的點。
在實作FKLinkInfo對象之前，先分析兩個方塊可以相連的情形。《連連看》遊戲的規則約定：兩個方塊之間最多隻能用三條線段相連，也就是說，最多隻能有兩個“拐點”，加上兩個方塊的中心，方塊的連接配接資訊最多隻需要4個連接配接點。圖13.5顯示了允許出現的連接配接情況。
圖13.5 方塊的連接配接情況
考慮到FKLinkInfo最多需要封裝4個連接配接點，最少需要封裝兩個連接配接點，是以，程式定義了如下FKLinkInfo類。
程式清單：codes/13/Link/Link/sources/object/FKLinkInfo.h
<a href="http://s3.51cto.com/wyfs02/M02/12/23/wKioL1L63E_AECl8AAF06ySHDEE825.jpg" target="_blank"></a>
程式清單：codes/13/Link/Link/sources/object/FKLinkInfo.m
——————本文節選自《瘋狂ios講義（上）》