【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】 瘋狂ios講義之開(kāi)發(fā)游戲界面

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】瘋狂ios講義之開(kāi)發(fā)游戲界面

瘋狂連連看》游戲的游戲界面大致上可分為以下兩個(gè)區(qū)域。游戲主界面區(qū)?？刂瓢粹o與數(shù)據(jù)顯示區(qū)。13.2.1

開(kāi)發(fā)界面布局本程序中使用一個(gè)自定義UIView作為游戲區(qū)，該自定義的UIView將會(huì)放在游戲界面的上方，下方放置一個(gè)UIView作為容器，并在該UIView左邊放置一個(gè)按鈕，右邊放置一個(gè)UILabel顯示剩余時(shí)間，如圖13.3所示。13.2.2

開(kāi)發(fā)游戲界面控件該游戲的界面控件采用一個(gè)自定義控件：FKGameView，它從UIView基類(lèi)派生而出，這個(gè)自定義UIView的功能就是根據(jù)游戲狀態(tài)來(lái)繪制游戲界面上的全部方塊。為了開(kāi)發(fā)這個(gè)FKGameView，本程序還提供了一個(gè)FKPiece類(lèi)，一個(gè)FKPiece對(duì)象代表游戲界面上的一個(gè)方塊，它除了封裝方塊上的圖片之外，還需要封裝該方塊代表二維數(shù)組中的哪個(gè)元素，以及它的左上角在游戲界面中的X、Y坐標(biāo)。圖13.4示意了方塊左上角X、Y坐標(biāo)的作用。方塊左上角的X、Y坐標(biāo)可決定它的繪制位置，F(xiàn)KGameView根據(jù)這兩個(gè)坐標(biāo)值繪制所有的方塊即可。下面是該程序中FKPiece類(lèi)的接口代碼。程序清單：codes/13/Link/Link/sources/view/FKPiece.hFKPiece類(lèi)的實(shí)現(xiàn)部分主要是實(shí)現(xiàn)一個(gè)初始化方式，并為接口部分定義的方法提供實(shí)現(xiàn)，下面是FKPiece類(lèi)實(shí)現(xiàn)部分的代碼。程序清單：codes/13/Link/Link/sources/view/FKPiece.m上面的FKPiece類(lèi)中封裝的FKPieceImage代表該方塊上的圖片，但此處并未直接使用UIImage對(duì)象來(lái)代表方塊上的圖片，因?yàn)槲覀冃枰褂肍KPieceImage來(lái)封裝兩個(gè)信息：UIImage對(duì)象和圖片資源的ID。其中，UIImage對(duì)象用于在游戲界面上繪制方塊；圖片資源的ID則代表該FKPiece對(duì)象的標(biāo)識(shí)，當(dāng)兩個(gè)FKPiece所封裝的圖片資源的ID相等時(shí)，即可認(rèn)為這兩個(gè)FKPiece上的圖片相同。如以上程序中粗體字代碼所示。提示：上面的程序還用到了一個(gè)FKPoint類(lèi)，該FKPoint類(lèi)只是一個(gè)封裝了x、y兩個(gè)屬性的類(lèi)，但程序并未直接使用CGPoint，這是因?yàn)槌绦蛐枰袴KPoint添加到NSArray集合中，還要作為NSDictionary的key，而CGPoint只是一個(gè)結(jié)構(gòu)體，因此需要使用自定義的FKPoint類(lèi)。下面是FKPieceImage類(lèi)的接口代碼。程序清單：codes/13/Link/Link/sources/view/FKPieceImage.h下面是FKPieceImage類(lèi)的實(shí)現(xiàn)代碼。程序清單：codes/13/Link/Link/sources/view/FKPieceImage.mFKGameView主要就是根據(jù)游戲的狀態(tài)數(shù)據(jù)來(lái)繪制界面上的方塊，它繼承了UIView基類(lèi)，重寫(xiě)了UIView基類(lèi)的drawRectCGRect)rect方法，重寫(xiě)該方法主要就是繪制游戲里剩余的方塊。它還會(huì)負(fù)責(zé)繪制連接方塊的連接線。除此之外，F(xiàn)KGameView還需要監(jiān)聽(tīng)用戶(hù)的觸碰動(dòng)作，當(dāng)用戶(hù)觸碰屏幕時(shí)，程序需要獲取用戶(hù)觸碰的是哪個(gè)方塊，并判斷是否需要“消除”該方塊。為了判斷能否消除該方塊，程序需要進(jìn)行如下判斷：如果程序之前已經(jīng)選中了某個(gè)方塊，就判斷當(dāng)前觸碰的方塊是否能與之前的方塊“相連”，如果可以相連，則消除兩個(gè)方塊，并判斷是否勝利（是否已消除所有的方塊）；如果兩個(gè)方塊不可以相連，則把當(dāng)前方塊設(shè)置為選中方塊。如果程序之前沒(méi)有選中方塊，直接將當(dāng)前方塊設(shè)置為選中方塊。FKGamaView的接口部分代碼如下：程序清單：codes/13/Link/Link/sources/view/FKGameView.hFKGamaView的實(shí)現(xiàn)部分代碼如下。程序清單：codes/13/Link/Link/sources/view/FKGameView.m上面的FKGameView中，第一段粗體字代碼根據(jù)游戲的狀態(tài)數(shù)據(jù)來(lái)繪制界面中的所有方塊，第二段粗體字代碼則根據(jù)FKLinkInfo來(lái)繪制兩個(gè)方塊之間的連接線。程序中，①號(hào)代碼處定義了FKGameService對(duì)象，②號(hào)代碼則調(diào)用FKGameService的getPieces()方法來(lái)獲取游戲中剩余的方塊，F(xiàn)KGameService是游戲的業(yè)務(wù)邏輯實(shí)現(xiàn)類(lèi)。后面會(huì)詳細(xì)介紹該類(lèi)的實(shí)現(xiàn)，此處暫不講解。提示：

該類(lèi)還加載了兩個(gè)音效文件作為游戲音效，讀者可參考本書(shū)下卷中關(guān)于音頻播放的相關(guān)知識(shí)。為了正常使用AudioToolbox框架，并在源代碼的開(kāi)始添加#import<AudioToolbox/AudioToolbox.h>代碼。程序的touchesBegan:withEvent:方法中，粗體字代碼負(fù)責(zé)處理該控件的觸碰事件，當(dāng)用戶(hù)觸碰該區(qū)域時(shí)，它會(huì)先根據(jù)觸碰點(diǎn)計(jì)算出觸碰的方塊，如③號(hào)粗體字代碼所示。接下來(lái)該方法會(huì)判斷是否之前已有選中的方塊，如果沒(méi)有，直接將當(dāng)前方塊設(shè)為選中方塊；如果有，判斷兩個(gè)方塊是否可以相連，如④號(hào)粗體字代碼所示。如果兩個(gè)方塊可以相連，程序?qū)?huì)從FKPiece二維數(shù)組中刪除這兩個(gè)方塊，該邏輯由程序中的⑤號(hào)粗體字代碼定義的handleSuccessLink:prevPiece:currentPiece:pieces:方法完成。13.2.3

處理方塊之間的連接線

FKLinkInfo是一個(gè)非常簡(jiǎn)單的工具類(lèi)，它用于封裝兩個(gè)方塊之間的連接信息——其實(shí)就是封裝一個(gè)NSMutableArray，NSMutableArray中保存了連接線需要經(jīng)過(guò)的點(diǎn)。在實(shí)現(xiàn)FKLinkInfo對(duì)象之前，先分析兩個(gè)方塊可以相連的情形?！哆B連看》游戲的規(guī)則約定：兩個(gè)方塊之間最多只能用三條線段相連，也就是說(shuō)，最多只能有兩個(gè)“拐點(diǎn)”，加上兩個(gè)方塊的中心，方塊的連接信息最多只需要4個(gè)連接點(diǎn)。圖13.5顯示了允許出現(xiàn)的連接情況。圖13.5方塊的連接情況考慮到FKLinkInfo最多需要封裝4個(gè)連接點(diǎn)，最少需要封裝兩個(gè)連接點(diǎn)，因此，程序定義了如下FKLi