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

標籤：

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

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

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

從可以看出來，最終效果其實主要分為計分板和遊戲面板，遊戲面板裡是一個背景和很多的小塊，小塊中間有間隔，今天先教大家編寫出遊戲面板。

首先建立一個swift工程，這裡就不多說了，然後建立檔案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裡添加一個開始遊戲的按鈕，然後在預設的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座標很簡單，其實就是：當前面板總寬度減去遊戲區塊寬度，剩下的就是空餘的寬度，再除以2就是x點的座標了。y座標稍微複雜點在於，以後會加入計分面板，所以他的值應該是：當前面板總高度減去所有視圖的總高度除以2然後在加上在遊戲區塊之前的視圖的總高度，就是遊戲空間的y座標值。

其他地方都很簡單，其中的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(一)