SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
⼤大家來寫	

貪⻝⾷食蛇!
About me
About me
• Lead iOS/Mac
Developer at KKBOX	

• Mac developer
since2005, iOS
developer since2008	

• Other projects:Yahoo
KeyKey! Boshiamy X1,
Hami Music for iOS, and
so on.	

• I do C, Objective-C, and
Python
我覺得是不錯的練習
• MVC架構	

• DTO (Data Transfer Objects)	

• Quartz 2D 平⾯面繪圖	

• Delegate/Protocol 設計	

• Queue資料結構	

• NSTimer
應該三個多⼩小時可以
寫出來…
(我⾃自⼰己寫過⼀一遍)
還是⼀一邊看環法賽⼀一邊很不專⼼心的寫
KKBOX的iOS訓練
• Selector⇢⼩小算盤	

• ⼿手動記憶體管理	

• Category⇢字串反轉	

• Delegate⇢API包裝/Unit Test	

• Block⇢API包裝	

• OperationQueue⇢API包裝	

• Quartz 2D與Notification⇢填字遊戲	

• NSCoder/Sqlite/Localization…⇢看書練習	

• CoreAnimation⇢動態歌詞	

• UIAutomation 與 Accessibility	

• Audio API⇢Audio Player
⼤大概是在	

這個地⽅方
貪⻝⾷食蛇?
• 蛇的⾝身體所在位置	

• 蛇現在的⻑⾧長度?吃到⽔水
果之後,往那邊變⻑⾧長?	

• 蛇的現在的移動⽅方向?
怎麼改變⽅方向?	

• 蛇超出邊界該怎麼辦?
邊界有多⼤大?	

• ⽔水果的位置	

• 是不是吃到了⽔水果	

• 吃到⽔水果之後,下⼀一個
⽔水果在哪裡?	

• 該怎麼畫蛇跟⽔水果?	

• 頭撞到⾝身體了嗎?
我們應該如何妥當處理這些東⻄西?
物件封裝
• 我們在畫⾯面中有⼀一條蛇	

• 屬性:⾝身體的位置、蛇的⽅方向	

• ⽅方法:改變⽅方向、移動⼀一格
MVC架構
• Model:我們的蛇與⽔水果的Point	

• View:繪製蛇與⽔水果的View	

• Controller:	

• 分派⽔水果的位置	

• 使⽤用 Timer更新蛇的狀態、檢查是否吃
到⽔水果與撞到⾝身體	

• 接收改變蛇的⽅方向的Touch事件
實作流程
• 撰寫蛇的Model	

• 對蛇的Model做單元測試	

• 撰寫繪製蛇與⽔水果的View	

• 撰寫Controller	

• 整合!
Model
我們應該如何描述蛇
與⽔水果的位置?
• 我們可以使⽤用CGPoint	

• 不過不是很好,CGPoint的x與y是float	

• 我們希望x與y是整數
Data Transfer Objects
• 只有屬性,沒有⽅方法的物件	

• 當成 Structure 來⽤用	

• 在Cocoa裡頭,我們也可以將 Structure
包進NSValue裡頭就是了…	

• [NSValue valueWithBytes: objCType:];
蛇的⾝身體的資料結構
• 不要想得太複雜,蛇的移動並不是⾝身體
的每個點都在移動	

• 其實就只是,在頭的地⽅方增加⼀一個點,
然後把尾巴那個點去掉	

• 先進先出⇢Queue
蛇的⽅方向
• 蛇應該要知道⾃自⼰己的⽅方向	

• 改變⽅方向只能90度:	

• 往左右⾛走,只能改成上下	

• 往上下⾛走,只能改成左右
單元測試
3A原則
• Arrange	

• Act	

• Assert
單元測試
• 我們的DTO裡頭的屬性是否正確?	

• 建⽴立蛇之後,⻑⾧長度位置是否正確?	

• 移動蛇之後,位置是否正確?	

• 把蛇的⾝身體加⻑⾧長之後,是否有加對?	

• 蛇是否會正確撞到⾃自⼰己⾝身體?
View
View
• View 要跟Controller詢問蛇與⽔水果在哪裡	

• 我們可以把蛇與⽔水果變成View的屬性,
從Controller設過去,但是這樣Controller
就要定時更新View,這樣很醜	

• ⽐比較好的作法是,把Controller變成View
的delegate
View
• Subclass ⼀一個UIView	

• 實作drawRect:	

• 在drawRect:裡頭問delegate蛇與⽔水果在哪	

• ⽤用UIBezierPath畫就好	

• 所以我們要設計⼀一個詢問蛇與⽔水果在哪
的protocol
Delegation/Protocol
• @property (weak) id <Protocol> delegate;	

• 然後設計⼀一組 Protocol	

• 例 -(Snake *)viewDidRequestSnake:(View
*)v;	

• Controller要去實作delegate methods
Controller
Controller
• 成員變數	

• 蛇的Model	

• ⽔水果的Model	

• 繪製蛇與⽔水果View	

• 遊戲歡迎與結束畫⾯面	

• Timer
Controller
• 如何接收Swipe事件?	

• ⽤用UIGestureRecognizer
Let’s Do It!

Contenu connexe

Similaire à 貪食蛇

Artifacts management with CI and CD
Artifacts management with CI and CDArtifacts management with CI and CD
Artifacts management with CI and CDChen-Tien Tsai
 
Weic2015 docker
Weic2015 dockerWeic2015 docker
Weic2015 dockerRay Lin
 
快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚Lorex L. Yang
 
[students AI workshop] Pytorch
[students AI workshop]  Pytorch[students AI workshop]  Pytorch
[students AI workshop] PytorchTzu-Wei Huang
 
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网构建可维护的Javascript 小米网
构建可维护的Javascript 小米网yang alex
 
2016 前端潮玩意兒
2016 前端潮玩意兒2016 前端潮玩意兒
2016 前端潮玩意兒Maxis Kao
 
与Python一路走来
与Python一路走来与Python一路走来
与Python一路走来leejd
 
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計Amigo 陳兆祥
 
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事Chieh (Jack) Yu
 
Establish The Core of Cloud Computing Application by Using Hazelcast (Chinese)
Establish The Core of  Cloud Computing Application  by Using Hazelcast (Chinese)Establish The Core of  Cloud Computing Application  by Using Hazelcast (Chinese)
Establish The Core of Cloud Computing Application by Using Hazelcast (Chinese)Joseph Kuo
 
Introduction to big data
Introduction to big dataIntroduction to big data
Introduction to big data邦宇 叶
 
Maximize Your Production Effort (Chinese)
Maximize Your Production Effort (Chinese)Maximize Your Production Effort (Chinese)
Maximize Your Production Effort (Chinese)slantsixgames
 
Go for web
Go for webGo for web
Go for webWeng Wei
 
使用Dsl改善软件设计
使用Dsl改善软件设计使用Dsl改善软件设计
使用Dsl改善软件设计mingjin
 
iOS 入門教學
iOS 入門教學iOS 入門教學
iOS 入門教學Steven Shen
 
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018Will Huang
 
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文MAKERPRO.cc
 

Similaire à 貪食蛇 (20)

Artifacts management with CI and CD
Artifacts management with CI and CDArtifacts management with CI and CD
Artifacts management with CI and CD
 
Weic2015 docker
Weic2015 dockerWeic2015 docker
Weic2015 docker
 
快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚
 
[students AI workshop] Pytorch
[students AI workshop]  Pytorch[students AI workshop]  Pytorch
[students AI workshop] Pytorch
 
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
 
2016 前端潮玩意兒
2016 前端潮玩意兒2016 前端潮玩意兒
2016 前端潮玩意兒
 
Node分享 展烨
Node分享 展烨Node分享 展烨
Node分享 展烨
 
与Python一路走来
与Python一路走来与Python一路走来
与Python一路走来
 
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
 
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
 
Establish The Core of Cloud Computing Application by Using Hazelcast (Chinese)
Establish The Core of  Cloud Computing Application  by Using Hazelcast (Chinese)Establish The Core of  Cloud Computing Application  by Using Hazelcast (Chinese)
Establish The Core of Cloud Computing Application by Using Hazelcast (Chinese)
 
Introduction to big data
Introduction to big dataIntroduction to big data
Introduction to big data
 
Maximize Your Production Effort (Chinese)
Maximize Your Production Effort (Chinese)Maximize Your Production Effort (Chinese)
Maximize Your Production Effort (Chinese)
 
Go for web
Go for webGo for web
Go for web
 
使用Dsl改善软件设计
使用Dsl改善软件设计使用Dsl改善软件设计
使用Dsl改善软件设计
 
iOS 入門教學
iOS 入門教學iOS 入門教學
iOS 入門教學
 
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
開發人員必須知道的 Kubernetes 核心技術 - Kubernetes Summit 2018
 
Kubernetes on gcp
Kubernetes on gcpKubernetes on gcp
Kubernetes on gcp
 
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
【1110ROS社群開講】如何打造與人一起學習的機器檯燈_鄭凱文
 
智能 Bot 應用情境分享
智能 Bot 應用情境分享智能 Bot 應用情境分享
智能 Bot 應用情境分享
 

Plus de Weizhong Yang

怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google Maps怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google MapsWeizhong Yang
 
關於延長役期這件事情
關於延長役期這件事情關於延長役期這件事情
關於延長役期這件事情Weizhong Yang
 
導入 Flutter 前你應該知道的事
導入 Flutter 前你應該知道的事導入 Flutter 前你應該知道的事
導入 Flutter 前你應該知道的事Weizhong Yang
 
iPlayground: CarPlay and MFI Hearing Aids
iPlayground: CarPlay and MFI Hearing AidsiPlayground: CarPlay and MFI Hearing Aids
iPlayground: CarPlay and MFI Hearing AidsWeizhong Yang
 
CocoaPods private repo
CocoaPods private repoCocoaPods private repo
CocoaPods private repoWeizhong Yang
 
Flutter 踩雷心得
Flutter 踩雷心得Flutter 踩雷心得
Flutter 踩雷心得Weizhong Yang
 
那些年被蘋果 Ban 掉的 API
那些年被蘋果 Ban 掉的 API那些年被蘋果 Ban 掉的 API
那些年被蘋果 Ban 掉的 APIWeizhong Yang
 
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發Weizhong Yang
 
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發Weizhong Yang
 
使用 switch/case 重構程式碼
使用 switch/case 重構程式碼使用 switch/case 重構程式碼
使用 switch/case 重構程式碼Weizhong Yang
 
怎樣寫出比較沒有問題的 Code
怎樣寫出比較沒有問題的 Code怎樣寫出比較沒有問題的 Code
怎樣寫出比較沒有問題的 CodeWeizhong Yang
 
Aspect Oriented Programming
Aspect Oriented ProgrammingAspect Oriented Programming
Aspect Oriented ProgrammingWeizhong Yang
 
Mac OS X 與 iOS 的 Audio API
Mac OS X 與 iOS 的 Audio APIMac OS X 與 iOS 的 Audio API
Mac OS X 與 iOS 的 Audio APIWeizhong Yang
 
Python 的文件系統
Python 的文件系統Python 的文件系統
Python 的文件系統Weizhong Yang
 

Plus de Weizhong Yang (20)

Flutter BLE
Flutter BLEFlutter BLE
Flutter BLE
 
怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google Maps怎樣在 Flutter app 中使用 Google Maps
怎樣在 Flutter app 中使用 Google Maps
 
關於延長役期這件事情
關於延長役期這件事情關於延長役期這件事情
關於延長役期這件事情
 
Dart null safety
Dart null safetyDart null safety
Dart null safety
 
導入 Flutter 前你應該知道的事
導入 Flutter 前你應該知道的事導入 Flutter 前你應該知道的事
導入 Flutter 前你應該知道的事
 
Github Actions
Github ActionsGithub Actions
Github Actions
 
iPlayground: CarPlay and MFI Hearing Aids
iPlayground: CarPlay and MFI Hearing AidsiPlayground: CarPlay and MFI Hearing Aids
iPlayground: CarPlay and MFI Hearing Aids
 
CocoaPods private repo
CocoaPods private repoCocoaPods private repo
CocoaPods private repo
 
Flutter 踩雷心得
Flutter 踩雷心得Flutter 踩雷心得
Flutter 踩雷心得
 
那些年被蘋果 Ban 掉的 API
那些年被蘋果 Ban 掉的 API那些年被蘋果 Ban 掉的 API
那些年被蘋果 Ban 掉的 API
 
給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發給 iOS 工程師的 Flutter 開發
給 iOS 工程師的 Flutter 開發
 
給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發給 iOS 工程師的 Vue.js 開發
給 iOS 工程師的 Vue.js 開發
 
使用 switch/case 重構程式碼
使用 switch/case 重構程式碼使用 switch/case 重構程式碼
使用 switch/case 重構程式碼
 
怎樣寫出比較沒有問題的 Code
怎樣寫出比較沒有問題的 Code怎樣寫出比較沒有問題的 Code
怎樣寫出比較沒有問題的 Code
 
Aspect Oriented Programming
Aspect Oriented ProgrammingAspect Oriented Programming
Aspect Oriented Programming
 
Mac OS X 與 iOS 的 Audio API
Mac OS X 與 iOS 的 Audio APIMac OS X 與 iOS 的 Audio API
Mac OS X 與 iOS 的 Audio API
 
Python 的文件系統
Python 的文件系統Python 的文件系統
Python 的文件系統
 
Input Method Kit
Input Method KitInput Method Kit
Input Method Kit
 
Refactoring
RefactoringRefactoring
Refactoring
 
Core animation
Core animationCore animation
Core animation
 

貪食蛇