貪吃蛇游戲(五)——添加交互操作(完結(jié)篇)

接上文

http://www.reibang.com/p/ee2851d8cc7d

本節(jié)是這個(gè)系列的最后一節(jié)了。本節(jié)中蝴韭,將增加蛇的方向,增加用戶交互操作熙侍,增加開始暫停等等榄鉴。

1 增加方向
在手機(jī)屏幕上,貪吃蛇的移動方向只有四種蛉抓,上庆尘,下,左芝雪,右减余。我們將這四種方向,定義成一個(gè)枚舉惩系。創(chuàng)建一個(gè)新的文件位岔,Direciton.swift(file->new-file如筛,過程不贅述)。
在Direction.swift中添加如下代碼:

enum Direction {
    case UP
    case DOWN
    case LEFT
    case RIGHT
}

之后我們在Snake.swift中添加Direction的擴(kuò)展抒抬,在擴(kuò)展中杨刨,我們定義兩個(gè)函數(shù),walk()和changeDirection()擦剑。分別描述蛇的前進(jìn)和方向的變化妖胀。對于walk函數(shù),傳入的參數(shù)為當(dāng)前蛇頭的坐標(biāo)惠勒,我們根據(jù)當(dāng)前的方向赚抡,修改坐標(biāo)。對于changeDirection函數(shù)纠屋,傳入?yún)?shù)有兩個(gè)涂臣,分別為蛇頭的當(dāng)前坐標(biāo)和用戶的點(diǎn)擊坐標(biāo)(根據(jù)點(diǎn)擊坐標(biāo)決定蛇的新方向),代碼如下:

extension Direction {
    func walk(inout point: CGPoint) {
        switch self {
        case .UP: point.y -= CGFloat(30)
        case .DOWN: point.y += CGFloat(30)
        case .LEFT: point.x -= CGFloat(30)
        case .RIGHT: point.x += CGFloat(30)
        }
    }
    
    mutating func changeDirection(cur: CGPoint, target: CGPoint) {
        switch self {
        case .UP: self = cur.x > target.x ? .LEFT : .RIGHT
        case .DOWN: self = cur.x > target.x ? .LEFT : .RIGHT
        case .LEFT: self = cur.y > target.y ? .UP : .DOWN
        case .RIGHT: self = cur.y > target.y ? .UP : .DOWN
        }
    }
}

之后在Snake中添加對Direction屬性售担,在 weak var mainView: UIView!下面添加如下代碼:

var direction = Direction.RIGHT

然后修改Snake.walk函數(shù)赁遗,刪除原來的代碼,改為如下代碼:

direction.walk(&head.frame.origin)

并在Snake中添加修改方向的操作

func changeDirection(point: CGPoint) {
    direction.changeDirection(head.frame.origin, target: point)
}

完成以上操作后族铆,我們還需要添加貪吃蛇吃掉食物的操作岩四。當(dāng)貪吃蛇吃掉一個(gè)食物時(shí),需要增加一段身體哥攘,因此繼續(xù)在Snake中添加如下代碼:

func eat() {
    body.addOne(mainView)
}

2 增加用戶交互
有了方向修改操作后剖煌,我們需要用戶通過點(diǎn)擊屏幕來觸發(fā)修改蛇的運(yùn)動方向。在左側(cè)導(dǎo)航欄中點(diǎn)擊Main.storyboard献丑,在右下角的filter中輸入tap末捣,找到Tap Gesture,將其拖到我們的view中创橄。



操作完成后箩做,會在Main.storyboard中出現(xiàn)手勢操作的標(biāo)識,如下:



點(diǎn)擊手勢操作標(biāo)識妥畏,并按住control鍵邦邦,拖動到SnakeViewController的walk后面,Connection選擇action醉蚁,Type選擇UITapGesture...燃辖,Name填寫changeDirection,之后點(diǎn)擊connect如圖所示:

在changeDirection中添加如下代碼:
@IBAction func changeDirection(sender: UITapGestureRecognizer) {
    let tapPoint = sender.locationInView(self.view)
        
    snake.changeDirection(tapPoint)
}

之后點(diǎn)擊運(yùn)行网棍,當(dāng)貪吃蛇運(yùn)行過程中黔龟,我們點(diǎn)擊屏幕,可以發(fā)現(xiàn)小蛇根據(jù)我們的點(diǎn)擊位置,自動的改變方向了氏身。


3 增加開始暫停
點(diǎn)擊Main.storyboard巍棱,在右下角的filter中輸入bar button item,找到Bar Button Item蛋欣,拖動到導(dǎo)航欄的左下角位置航徙,如圖:



點(diǎn)擊新的item,在右側(cè)的屬性欄里陷虎,將Title修改為『暫偷教ぃ』



點(diǎn)擊新增加的item button,并按住control鍵尚猿,和上面的操作一樣窝稿,增加pause函數(shù)。當(dāng)用戶點(diǎn)擊暫停時(shí)谊路,我們將當(dāng)前的定時(shí)器暫停讹躯,當(dāng)用戶再次點(diǎn)擊時(shí)恢復(fù)菩彬,并修改title缠劝,代碼如下:
var isPause = false

@IBAction func pause(sender: UIBarButtonItem) {
    isPause = !isPause
            
    if (isPause) {
        sender.title = "開始"
        timer.fireDate = NSDate.distantFuture()
    } else {
        sender.title = "暫停"
        timer.fireDate = NSDate.distantPast()
    }
}

點(diǎn)擊左上角的運(yùn)行,我們可以發(fā)現(xiàn)當(dāng)點(diǎn)擊『暫推睿』時(shí)惨恭,小蛇就停住了,再次點(diǎn)擊『開始』時(shí)耙旦,又動了起來脱羡。

4 增加吃食物判斷邏輯
當(dāng)蛇頭的坐標(biāo)和食物的坐標(biāo)相同時(shí),我們判定吃食成功免都,則觸發(fā)兩個(gè)操作锉罐,a 修改食物的坐標(biāo),b 增加蛇的長度绕娘。將SnakeViewController.walk的定義修改成如下代碼:

var score = 0 //記錄分?jǐn)?shù)

func walk() {
    if food.frame.origin == snake.head.frame.origin {
        food.changeFood(food)
        snake.eat()
        score += 10
        navigationItem.title = String(score)
    }
        
    snake.walk()
}

我們同時(shí)增加了一個(gè)計(jì)分操作脓规,如代碼中所示。
點(diǎn)擊左上角的運(yùn)行险领,當(dāng)小蛇完成吃食操作時(shí)侨舆,它的長度增加了。

5 邊界處理
目前為止绢陌,貪吃蛇已基本全部完成了挨下。但是當(dāng)它到了屏幕的邊界時(shí),會繼續(xù)往前脐湾,這樣就脫離我們的視線了臭笆。因此我們增加邏輯,當(dāng)碰觸屏幕邊緣時(shí),修改蛇的坐標(biāo)愁铺,讓它從另一邊重新出現(xiàn)凿菩。在左側(cè)找到ListBodyItem,在SnakeHead中增加touchEdge函數(shù)帜讲,代碼如下:

func touchEdge(){
    if (frame.origin.x < 0) {
        frame.origin.x = 330
    } else if (frame.origin.x > 330) {
        frame.origin.x = 0
    } else if (frame.origin.y < 60) {
        frame.origin.y = 630
    } else if (frame.origin.y > 630) {
        frame.origin.y = 60
    }
}
![snake.gif](http://upload-images.jianshu.io/upload_images/1397675-f0f86b83cf3fcdbf.gif?imageMogr2/auto-orient/strip)

之后在Snake的walk中增加對touchEdge的調(diào)用衅谷,如下:

func walk() {
    direction.walk(&head.frame.origin)
    head.touchEdge()
}

點(diǎn)擊左上角的運(yùn)行,現(xiàn)在當(dāng)小蛇到達(dá)屏幕邊緣時(shí)似将,會『神奇』的從另一邊出現(xiàn)了获黔。


最終的效果圖:


snake.gif

項(xiàng)目的github如下:

https://github.com/littlersmall/snake/tree/master

總結(jié)
1 swift蠻好用的
2 iOS做界面開發(fā)的學(xué)習(xí)曲線挺平滑的
3 素材真的很難找,適配屏幕調(diào)整圖片尺寸很費(fèi)勁

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末在验,一起剝皮案震驚了整個(gè)濱河市玷氏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌腋舌,老刑警劉巖盏触,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異块饺,居然都是意外死亡赞辩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進(jìn)店門授艰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辨嗽,“玉大人,你說我怎么就攤上這事淮腾≡阈瑁” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵谷朝,是天一觀的道長洲押。 經(jīng)常有香客問我,道長圆凰,這世上最難降的妖魔是什么杈帐? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮送朱,結(jié)果婚禮上娘荡,老公的妹妹穿的比我還像新娘。我一直安慰自己驶沼,他們只是感情好炮沐,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著回怜,像睡著了一般大年。 火紅的嫁衣襯著肌膚如雪换薄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天翔试,我揣著相機(jī)與錄音轻要,去河邊找鬼。 笑死垦缅,一個(gè)胖子當(dāng)著我的面吹牛冲泥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播壁涎,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼凡恍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了怔球?” 一聲冷哼從身側(cè)響起嚼酝,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎竟坛,沒想到半個(gè)月后闽巩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡担汤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年涎跨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漫试。...
    茶點(diǎn)故事閱讀 38,064評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡六敬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出驾荣,到底是詐尸還是另有隱情,我是刑警寧澤普泡,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布播掷,位于F島的核電站,受9級特大地震影響撼班,放射性物質(zhì)發(fā)生泄漏歧匈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一砰嘁、第九天 我趴在偏房一處隱蔽的房頂上張望件炉。 院中可真熱鬧,春花似錦矮湘、人聲如沸斟冕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽磕蛇。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秀撇,已是汗流浹背超棺。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留呵燕,地道東北人棠绘。 一個(gè)月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像再扭,于是被迫代替她去往敵國和親弄唧。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容