瘋狂ios講義之開發游戲界面

瘋狂連連看》游戲的游戲界面大致上可分為以下兩個區域。

游戲主界面區。

控制按鈕與數據顯示區。

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

FKPiece類的實現部分主要是實現一個初始化方式，并為接口部分定義的方法提供實現，下面是FKPiece類實現部分的代碼。


程序清單：codes/13/Link/Link/sources/view/FKPiece.m

上面的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

下面是FKPieceImage類的實現代碼。


程序清單：codes/13/Link/Link/sources/view/FKPieceImage.m

FKGameView主要就是根據游戲的狀態數據來繪制界面上的方塊，它繼承了UIView基類，重寫了UIView基類的drawRectCGRect)rect方法，重寫該方法主要就是繪制游戲里剩余的方塊。它還會負責繪制連接方塊的連接線。除此之外，FKGameView還需要監聽用戶的觸碰動作，當用戶觸碰屏幕時，程序需要獲取用戶觸碰的是哪個方塊，并判斷是否需要“消除”該方塊。為了判斷能否消除該方塊，程序需要進行如下判斷：


如果程序之前已經選中了某個方塊，就判斷當前觸碰的方塊是否能與之前的方塊“相連”，如果可以相連，則消除兩個方塊，并判斷是否勝利（是否已消除所有的方塊）；如果兩個方塊不可以相連，則把當前方塊設置為選中方塊。如果程序之前沒有選中方塊，直接將當前方塊設置為選中方塊。


FKGamaView的接口部分代碼如下：


程序清單：codes/13/Link/Link/sources/view/FKGameView.h

FKGamaView的實現部分代碼如下。


程序清單：codes/13/Link/Link/sources/view/FKGameView.m

上面的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對象之前，先分析兩個方塊可以相連的情形?！哆B連看》游戲的規則約定：兩個方塊之間最多只能用三條線段相連，也就是說，最多只能有兩個“拐點”，加上兩個方塊的中心，方塊的連接信息最多只需要4個連接點。圖13.5顯示了允許出現的連接情況。



圖13.5 方塊的連接情況

考慮到FKLinkInfo最多需要封裝4個連接點，最少需要封裝兩個連接點，因此，程序定義了如下FKLinkInfo類。

程序清單：codes/13/Link/Link/sources/object/FKLinkInfo.h

程序清單：codes/13/Link/Link/sources/object/FKLinkInfo.m

——————本文節選自《瘋狂ios講義（上）》