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

接上文

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

本節是這個系列的最后一節了。本節中,將增加蛇的方向,增加用戶交互操作,增加開始暫停等等。

1 增加方向
在手機屏幕上,貪吃蛇的移動方向只有四種,上,下,左,右。我們將這四種方向,定義成一個枚舉。創建一個新的文件,Direciton.swift(file->new-file,過程不贅述)。
在Direction.swift中添加如下代碼:

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

之后我們在Snake.swift中添加Direction的擴展,在擴展中,我們定義兩個函數,walk()和changeDirection()。分別描述蛇的前進和方向的變化。對于walk函數,傳入的參數為當前蛇頭的坐標,我們根據當前的方向,修改坐標。對于changeDirection函數,傳入參數有兩個,分別為蛇頭的當前坐標和用戶的點擊坐標(根據點擊坐標決定蛇的新方向),代碼如下:

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函數,刪除原來的代碼,改為如下代碼:

direction.walk(&head.frame.origin)

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

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

完成以上操作后,我們還需要添加貪吃蛇吃掉食物的操作。當貪吃蛇吃掉一個食物時,需要增加一段身體,因此繼續在Snake中添加如下代碼:

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

2 增加用戶交互
有了方向修改操作后,我們需要用戶通過點擊屏幕來觸發修改蛇的運動方向。在左側導航欄中點擊Main.storyboard,在右下角的filter中輸入tap,找到Tap Gesture,將其拖到我們的view中。



操作完成后,會在Main.storyboard中出現手勢操作的標識,如下:



點擊手勢操作標識,并按住control鍵,拖動到SnakeViewController的walk后面,Connection選擇action,Type選擇UITapGesture...,Name填寫changeDirection,之后點擊connect如圖所示:

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

之后點擊運行,當貪吃蛇運行過程中,我們點擊屏幕,可以發現小蛇根據我們的點擊位置,自動的改變方向了。


3 增加開始暫停
點擊Main.storyboard,在右下角的filter中輸入bar button item,找到Bar Button Item,拖動到導航欄的左下角位置,如圖:



點擊新的item,在右側的屬性欄里,將Title修改為『暫停』



點擊新增加的item button,并按住control鍵,和上面的操作一樣,增加pause函數。當用戶點擊暫停時,我們將當前的定時器暫停,當用戶再次點擊時恢復,并修改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()
    }
}

點擊左上角的運行,我們可以發現當點擊『暫停』時,小蛇就停住了,再次點擊『開始』時,又動了起來。

4 增加吃食物判斷邏輯
當蛇頭的坐標和食物的坐標相同時,我們判定吃食成功,則觸發兩個操作,a 修改食物的坐標,b 增加蛇的長度。將SnakeViewController.walk的定義修改成如下代碼:

var score = 0 //記錄分數

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

我們同時增加了一個計分操作,如代碼中所示。
點擊左上角的運行,當小蛇完成吃食操作時,它的長度增加了。

5 邊界處理
目前為止,貪吃蛇已基本全部完成了。但是當它到了屏幕的邊界時,會繼續往前,這樣就脫離我們的視線了。因此我們增加邏輯,當碰觸屏幕邊緣時,修改蛇的坐標,讓它從另一邊重新出現。在左側找到ListBodyItem,在SnakeHead中增加touchEdge函數,代碼如下:

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的調用,如下:

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

點擊左上角的運行,現在當小蛇到達屏幕邊緣時,會『神奇』的從另一邊出現了。


最終的效果圖:


snake.gif

項目的github如下:

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

總結
1 swift蠻好用的
2 iOS做界面開發的學習曲線挺平滑的
3 素材真的很難找,適配屏幕調整圖片尺寸很費勁

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容