[swift實戰入門]手把手教你編寫2048(一)

標籤：掃碼   import   anim   rac   地址   位置   title   back   present   

蘋果裝置越來越普及，拿著個手機就想搗鼓點啥，於是乎就有了這個系列，會一步一步教大家學習swift編程，學會自己做一個自己的app，github地址：https://github.com/scarlettbai/2048.git。

這篇文章須要大家瞭解一些swift基本的文法。這裡注重實踐，就不講太多基本的文法了。不懂的大家能夠Google一下，swift開發環境也非常easy，直接在mac上安裝一個XCode就可以，首先我們來看下終於我們要實現的效果：

當然你也能夠將當中的數字換成文字給你女票安手機上，還能夠給個小驚喜，效果例如以下：

從能夠看出來。終於效果事實上主要分為計分板和遊戲面板。遊戲面板裡是一個背景和非常多的小塊，小塊中間有間隔。今天先教大家編寫出遊戲面板。

首先建立一個swiftproject。這裡就不多說了。然後建立檔案NumbertailGameController.swift。這個檔案主要處理遊戲的初始化等邏輯

建立一個NumbertailGameController類繼承UIViewController，當中包括例如以下屬性：

class NumbertailGameController : UIViewController {    var demension : Int  //2048遊戲中每行每列含有多少個塊    var threshold : Int  //最高分數，推斷輸贏時使用，今天臨時不會用到。預留    let boardWidth: CGFloat = 260.0  //遊戲空間的長度和高度    let thinPadding: CGFloat = 3.0  //遊戲區裡面小塊間的間距    let viewPadding: CGFloat = 10.0  //計分板和遊戲區塊的間距    let verticalViewOffset: CGFloat = 0.0  //一個初始化屬性，後面會有地方用到}

接下來給NumbertailGameController加入init方法

init(demension d : Int , threshold t : Int) {    demension = d < 2 ? 2 : d    threshold = t < 8 ? 8 : t    super.init(nibName: nil, bundle: nil)    view.backgroundColor = UIColor(red : 0xE6/255, green : 0xE2/255, blue : 0xD4/255, alpha : 1)}

這裡主要是限制了最少兩個塊以及最低分數為8分，另外設定了整個面板的背景色，關於顏色，大家能夠取自己喜歡的色和直接換掉上面的十六進位數值就可以。

接下來我們在Main.storyboard裡加入一個開始遊戲的button，然後在預設的ViewController.swift中加入例如以下回應程式法：

@IBAction func setupGame(sender: UIButton) {    let game = NumbertailGameController(demension: 4 , threshold: 2048)    self.presentViewController(game, animated: true , completion: nil)}

然後我們點擊XCode中的執行。就能夠看到效果了，點擊開始遊戲，效果例如以下：

大家能夠看到此處出現了背景色為我們設定的背景色的視圖，以下我們來加入遊戲區塊：

建立GamebordView.swift檔案，這個檔案就是我們遊戲區塊的視圖檔案。在檔案裡加入例如以下代碼：

import UIKitclass GamebordView : UIView {    var demension : Int //每行(列)區塊個數    var tileWidth : CGFloat  //每一個小塊的寬度    var tilePadding : CGFloat  //每一個小塊間的間距    //初始化，當中backgroundColor是遊戲區塊的背景色。foregroundColor是小塊的顏色    init(demension d : Int, titleWidth width : CGFloat, titlePadding padding : CGFloat, backgroundColor : UIColor, foregroundColor : UIColor ) {        demension = d        tileWidth = width        tilePadding = padding        let totalWidth = tilePadding + CGFloat(demension)*(tilePadding + tileWidth)        super.init(frame : CGRectMake(0, 0, totalWidth, totalWidth))        self.backgroundColor = backgroundColor    }}

在這裡我們是建立了一個遊戲區塊的模板，接下來我們在遊戲的主控制器NumbertailGameController中加入例如以下代碼來初始化一個遊戲區塊對象並加入到我們的面板中：

override func viewDidLoad() {    super.viewDidLoad()    setupGame()}func setupGame(){    let viewWidth = view.bounds.size.width    let viewHeight = view.bounds.size.height    //擷取遊戲空間左上方那個點的x座標    func xposition2Center(view v : UIView) -> CGFloat{        let vWidth = v.bounds.size.width        return 0.5*(viewWidth - vWidth)    }    //擷取遊戲空間左上方那個點的y座標    func yposition2Center(order : Int , views : [UIView]) -> CGFloat {        assert(views.count > 0)        let totalViewHeigth = CGFloat(views.count - 1)*viewPadding +            views.map({$0.bounds.size.height}).reduce(verticalViewOffset, combine: {$0 + $1})        let firstY = 0.5*(viewHeight - totalViewHeigth)        var acc : CGFloat = 0        for i in 0..<order{            acc += viewPadding + views[i].bounds.size.height        }        return acc + firstY    }    //擷取具體每一個區塊的邊長，即：(遊戲區塊長度-間隙總和)/塊數    let width = (boardWidth - thinPadding*CGFloat(demension + 1))/CGFloat(demension)    //初始化一個遊戲區塊對象    let gamebord = GamebordView(        demension : demension,        titleWidth: width,        titlePadding: thinPadding,        backgroundColor:  UIColor(red : 0x90/255, green : 0x8D/255, blue : 0x80/255, alpha : 1),        foregroundColor:UIColor(red : 0xF9/255, green : 0xF9/255, blue : 0xE3/255, alpha : 0.5)    )    //如今面板中全部的視圖對象。眼下僅僅有遊戲區塊，興許加入計分板    let views = [gamebord]    //設定遊戲區塊在整個面板中的的絕對位置。即左上方第一個點    var f = gamebord.frame    f.origin.x = xposition2Center(view: gamebord)    f.origin.y = yposition2Center(0, views: views)    gamebord.frame = f    //將遊戲對象加入當前面板中    view.addSubview(gamebord)}

上面的代碼中凝視已經非常具體了。大家可能疑問的就是x和y座標的計算，x座標非常easy，事實上就是：當前面板總寬度減去遊戲區塊寬度，剩下的就是空餘的寬度，再除以2就是x點的座標了。y座標略微複雜點在於，以後會加入計分面板，所以他的值應該是：當前面板總高度減去全部視圖的總高度除以2然後在加上在遊戲區塊之前的視圖的總高度，就是遊戲空間的y座標值。

其它地方都非常easy，當中的foregroundColor是凝視中有，是以下給遊戲區塊加入預設小方塊時用的顏色。
我們來執行看效果：

能夠看到面板已經有了，接下來我們要給面板中加入初始化的半透明小方塊，我們在GamebordView中加入例如以下方法：

func setColor(backgroundColor bgcolor : UIColor, foregroundColor forecolor : UIColor){    self.backgroundColor = bgcolor    var xCursor = tilePadding    var yCursor : CGFloat    for _ in 0..<demension{        yCursor = tilePadding        for _ in 0..<demension {            let tileFrame = UIView(frame : CGRect(x: xCursor, y: yCursor, width: tileWidth, height: tileWidth))            tileFrame.backgroundColor = forecolor            tileFrame.layer.cornerRadius = 8            addSubview(tileFrame)            yCursor += tilePadding + tileWidth        }        xCursor += tilePadding + tileWidth    }}

這種方法事實上就是在遊戲區塊中加入了demension*demension個小塊。每一個小塊的顏色是我們傳入的foregroundColor
來執行下看效果：

能夠看到基本的遊戲面板已經有了，今天先說到這裡。大家能夠嘗試自己把計分板加入進來，當然興許我也會講到。

我的部落格：blog.scarlettbai.com
我的公眾號：讀書健身編程
歡迎掃碼關注我的公眾號查看很多其它文章

[swift實戰入門]手把手教你編寫2048(一)