蘋果裝置越來越普及，拿著個手機就想搗鼓點啥，於是乎就有了這個系列，會一步一步教大家學習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 UIKit
class 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
我的微信公眾號：讀書健身程式設計
歡迎掃碼關注我的公眾號檢視更多文章