Swift 簡(jiǎn)單消消樂(lè)demo

游戲規(guī)則:

  • 點(diǎn)擊某一方塊,當(dāng)該方塊的上下左右四個(gè)方向同顏色方塊可連續(xù)(大于等于2)即可消除。
  • 方塊消除后,上面的方塊往下掉。
  • 中間整列都空的話,旁邊的列往中間靠攏。
  • 如果沒(méi)有可消除的方塊,游戲結(jié)束。

效果如下:

效果圖

流程:

  1. 使用隨機(jī)方法產(chǎn)生方塊的顏色,然后創(chuàng)建背景色與之相對(duì)應(yīng)的方塊。
  2. 判斷游戲是否結(jié)束。
  3. 用戶點(diǎn)擊方塊,判斷該方塊的上下左右方向上是否存在同顏色的方塊。有,把方塊保存起來(lái),進(jìn)入第四步,沒(méi)有,不做任何響應(yīng),并等待用戶點(diǎn)擊。
  4. 清除方塊,向下移動(dòng)方塊。存在中間某列空了,兩側(cè)的列往中間移動(dòng)。跳轉(zhuǎn)到第二步。
  5. 用戶點(diǎn)擊重新開(kāi)始按鈕,跳轉(zhuǎn)到第一步。

實(shí)現(xiàn):

先來(lái)看一下demo的文件結(jié)構(gòu):


文件結(jié)構(gòu)

其中:TwoDimentionalBrain是demo的邏輯處理,DiamondsImageView是繼承UIImageView, 是帶有點(diǎn)擊功能的方塊。

DiamondsImageView 類(lèi)

class DiamondsImageView: UIImageView {
var backgroundType : backgroundType = .clear
var itemIndex : Int = 0

//起始位置和將要移動(dòng)時(shí)的位置,動(dòng)畫(huà)效果
var currentLocation : CGPoint?
var toLocation : CGPoint?

typealias returnIndexAndType = (Int, backgroundType) -> ()
var returnTuple : returnIndexAndType?
}

方塊在demo中是使用一個(gè)二維數(shù)組存儲(chǔ),itemIndex代表該數(shù)組的index(i * row + column), backgroundType表示該方塊的顏色值。

enum backgroundType {
case yellow
case blue
case red
case green
case clear
}

而returnTuple是一個(gè)block, 主要是在點(diǎn)擊方塊時(shí),在單擊響應(yīng)方法里將該方塊的的itemIndex和backgroundType傳遞給viewController.

func touchInside(_ sender: UITapGestureRecognizer) {
    //點(diǎn)擊空白方塊,則不響應(yīng)
    if backgroundType == .clear {
        print("不能點(diǎn)擊")
        return
    }
    
    //點(diǎn)擊顏色方塊,將方塊信息傳遞給viewController
    if let tuple = returnTuple {
        tuple(itemIndex, backgroundType)
    }
    }

TwoDimentionalBrain 結(jié)構(gòu)體

struct TwoDimentionalBrain {
//存儲(chǔ)方塊顏色
private var sourceDataArray = [[backgroundType]]()
//存儲(chǔ)消除方塊的單個(gè)分?jǐn)?shù)值(count, value)
private let scoreArray = [(0, 5), (5, 8), (10, 10), (13, 12), (15, 13), (100, 15)]
//存儲(chǔ)需要清除的方塊 1:清除, 0:不清除
private var clearArray = [(Int, Int)]()
//存儲(chǔ)需要移動(dòng)的方塊列
private var emptyColumnArray = Array<Int>(repeating: 0, count: ColumnCount)
//存儲(chǔ)游戲分?jǐn)?shù)
var score = 0;

//同列需要往下掉的方塊,傳遞給viewController
typealias exchangeRowInColumn = (Int, Int, Int) -> ()
var itemMoveDown: exchangeRowInColumn?

//需要整列移動(dòng)的方塊,傳遞給viewController
typealias exchangeColumn = (Int, Int) -> ()
var itemChangeColumn: exchangeColumn?
}

隨機(jī)產(chǎn)生一行的顏色排列,返回的數(shù)組添加到sourceDataArray里面去。

private mutating func setOneArray() -> [backgroundType] {
    var array = [backgroundType]()
    for _ in 0..<ColumnCount {
        let data = arc4random() % 4
        
        switch data {
        case 0:
            array.append(.yellow)
        case 1:
            array.append(.blue)
        case 2:
            array.append(.red)
        case 3:
            array.append(.green)
        default:
            array.append(.clear)
        }
    }
    
    return array
    }

mutating func setSourceDataArray() {
    //先清空
    sourceDataArray = [[backgroundType]]()
    
    for _ in 0..<RowCount {
        let array = setOneArray()
        
        sourceDataArray.append(array)
    }
   }

用遞歸方法尋找點(diǎn)擊方塊的上下左右同顏色的方塊,用尋找左側(cè)方向來(lái)示例:
首先需要判斷當(dāng)前方塊的左側(cè)方塊顏色是否一致。一致,則繼續(xù)在該方向?qū)ふ遥环駝t,該方向的尋找結(jié)束。

private mutating func findSameTypeWithRound(row: Int, column: Int) {
    let isLeft = isLeftSame(row: row, column: column)
    //如果顏色一致,則繼續(xù)往左邊尋找相同顏色的方塊
    if isLeft {
        findSameTypeWithRound(row: row, column: column - 1)
    }
    }

判斷當(dāng)前方塊的左側(cè)方塊顏色是否一致的方法如下:

private mutating func isLeftSame(row: Int, column: Int) -> Bool {
    if column <= 0 || isVisited(row: row, column: column - 1) {
        //如果已經(jīng)是最左邊或者已經(jīng)訪問(wèn)過(guò)了
        return false
    }
    
    if sourceDataArray[row][column - 1] == .clear {
        //如果已經(jīng)是空白方塊
        return false
    }
    
    if sourceDataArray[row][column - 1] == sourceDataArray[row][column] {
        //左側(cè)方塊和當(dāng)前方塊的顏色一致,則將左側(cè)方塊的行與列坐標(biāo)添加到clearArray
        clearArray.append((row, column - 1))
        return true
    }
    
    return false
    }

其他方向的尋找類(lèi)似,就不多陳述了。如果顏色一致,則添加到clearArray,在四個(gè)方向都尋找結(jié)束之后,根據(jù)clearArray的數(shù)據(jù)計(jì)算分?jǐn)?shù)和對(duì)方塊進(jìn)行消除。

if clearArray.count < 2 {
        clearArray = [(Int, Int)]()
        return;
    }
    
    for (row, column) in clearArray {  
        //將需要消除的方塊的顏色設(shè)置為透明
        sourceDataArray[row][column] = .clear
    }
    
    //計(jì)算分?jǐn)?shù)
    let count = clearArray.count
    
    for (item, value) in scoreArray {
        if count >= item {
            score += value * count;
            break;
        }
    }

方塊往下掉:遍歷sourceDataArray數(shù)組,如果方塊的顏色不是.clear 就在該方塊所在列的下一行遞歸尋找.clear的方塊,直到碰到有顏色的方塊或者是邊界。使用count存儲(chǔ)兩者的行數(shù)的間隔:

private func getUnClearUpCount(row: Int, column: Int) -> Int {
    if row < 0 {
        //遇到邊界
        return -1
    }
    
    var count = 0
    //遍歷該列下方的所有方塊
    for index in 0...row {
        if sourceDataArray[row - index][column] == .clear {
            //遇到空白方塊,則間隔+1
            count = count + 1
        }
        else {
            //遇到有顏色的方塊,則返回
            return count
        }
    }
    
    return count
    }

private mutating func moveDown() {
    for row in 0..<RowCount {
        for column in 0..<ColumnCount {
            if sourceDataArray[row][column] != .clear {
                //尋找同列的下方是否有空的方塊可以進(jìn)行移動(dòng)
                let count = getUnClearUpCount(row: row - 1, column: column)
                
                if count > 0 {
                    //有,進(jìn)行移動(dòng)。
                    sourceDataArray[row - count][column] = sourceDataArray[row][column]
                    sourceDataArray[row][column] = .clear
                    
                    if let itemMD = itemMoveDown {
                        //傳遞給viewController itemMD(所在列, 原來(lái)的行, 需要移動(dòng)到的行)
                        itemMD(column, row, row - count)
                    }
                }
            }
        }
    }
    }

如果消除了之后發(fā)現(xiàn)某列空了,則需要判斷兩側(cè)方塊是否需要整列往中間移動(dòng)。使用二分法,從中間let centerColumn = ColumnCount / 2 分界。左邊部分:從centerColumn ~ 0 進(jìn)行遍歷,如果當(dāng)前列不空,并且右側(cè)有空的,則整列向右移動(dòng);右邊部分:從centerColumn + 1 到右側(cè)邊界ColumnCount。如果當(dāng)前列不空,并且左側(cè)有空的,則整列往左移動(dòng)。

let centerColumn = ColumnCount / 2
    //存儲(chǔ)需要移動(dòng)兩列的列數(shù)間隔
    var count = 0
    for column in centerColumn + 1..<ColumnCount {
        if emptyColumnArray[column] == 1 {
            //如果是空的話,就加一
            count += 1
        }
        else if (count > 0) {
            //如果當(dāng)前列不空,并且左側(cè)有空的,則整列移動(dòng)
            for i in 0..<ColumnCount - centerColumn {
                if column + i < ColumnCount {
                    moveColumnToAnother(fromColumn: column + i, toColumn: column - count + i)
                }
            }
            
            count = 0
        }
        else {
            //當(dāng)前列不空,并且左側(cè)沒(méi)有空的,則什么都不做
        }

整列移動(dòng)的方法如下:

private mutating func moveColumnToAnother(fromColumn: Int, toColumn: Int) {
    for row in 0..<sourceDataArray.count {
        sourceDataArray[row][toColumn] = sourceDataArray[row][fromColumn]
        sourceDataArray[row][fromColumn] = .clear
        
        emptyColumnArray[fromColumn] = 1
        emptyColumnArray[toColumn] = 0
        
        //傳遞給viewController
        if let changeColumn = itemChangeColumn {
            //changeColumn(當(dāng)前的列, 移動(dòng)后的列)
            changeColumn(fromColumn, toColumn)
        }
    }
    }

遍歷所有的方塊,如果沒(méi)有連續(xù)的同顏色方塊,則游戲結(jié)束。

 mutating func isGameOver() -> Bool {
    //判斷是否已經(jīng)結(jié)束游戲了
    for row in 0..<RowCount {
        for column in 0..<ColumnCount {
            if sourceDataArray[row][column] == .clear {
                //遇到空白方塊,不執(zhí)行下面的內(nèi)容,繼續(xù)下一次循環(huán)
                continue;
            }
            
            //先清空,并把當(dāng)前的方塊添加到消除數(shù)組
            clearArray = [(Int, Int)]()
            clearArray.append((row, column))
            //在四個(gè)方向上尋找同顏色的方塊
            findSameTypeWithRound(row: row, column: column)
            
            if clearArray.count >= 2 {
                //存在連續(xù)的同顏色方塊,游戲繼續(xù)
                return false
            }
        }
    }
    
    return true
}

viewController

//顯示游戲得分
@IBOutlet var scoreLabel: UILabel!
//存儲(chǔ)方塊的數(shù)組
private var imageArray = [[DiamondsImageView]]()
//游戲邏輯的引用
private var diamondsBrain = TwoDimentionalBrain()

在頁(yè)面加載完成時(shí),創(chuàng)建隨機(jī)顏色的方塊。并且實(shí)現(xiàn)TwoDimentionalBrain結(jié)構(gòu)體中兩個(gè)移動(dòng)方塊的block。

override func viewDidLoad() {
    super.viewDidLoad()
    //獲取隨機(jī)方塊顏色
    diamondsBrain.setSourceDataArray()
    
    //方塊移動(dòng)的實(shí)現(xiàn)方法
    weak var weakSelf = self
    diamondsBrain.itemMoveDown = {(column, fromRow, toRow) in
        weakSelf?.imageViewMoveDown(column: column, fromRow: fromRow, toRow: toRow)
    }
    diamondsBrain.itemChangeColumn = {(fromColunm, toColumn) in
        weakSelf?.imageViewExchangeColumn(fromColumn: fromColunm, toColumn: toColumn)
    }
    
    //創(chuàng)建方塊
    createImageView()
    
    if diamondsBrain.isGameOver() {
        print("Game Over!")
    }
    }

//同列的兩個(gè)方塊進(jìn)行交換
private func imageViewMoveDown(column: Int, fromRow: Int, toRow: Int) {
    let fromImage = imageArray[fromRow][column]
    let toImage = imageArray[toRow][column]
    
    exchangeImage(fromImage: fromImage, toImage: toImage)
    
    imageArray[fromRow][column] = toImage
    imageArray[toRow][column] = fromImage
}

//交換兩列的方塊
private func imageViewExchangeColumn(fromColumn: Int, toColumn: Int) {
    for row in 0..<RowCount {
        if imageArray[row][fromColumn].backgroundType == .clear {
            return
        }
        else {
            let fromImage = imageArray[row][fromColumn]
            let toImage = imageArray[row][toColumn]
            exchangeImage(fromImage: fromImage, toImage: toImage)
            
            imageArray[row][fromColumn] = toImage
            imageArray[row][toColumn] = fromImage
        }
    }
}

使用UIView動(dòng)畫(huà),展示兩個(gè)方塊交換的過(guò)程(已經(jīng)清楚的方塊設(shè)置成空白,所以只看到有顏色的方塊在移動(dòng))。

 private func exchangeImage(fromImage: DiamondsImageView, toImage: DiamondsImageView) {
    UIView.animate(withDuration: 0.2, animations: {
        let origin = fromImage.frame.origin
        fromImage.frame.origin = toImage.frame.origin
        toImage.frame.origin = origin
        
        })
    
    let index = fromImage.itemIndex
    fromImage.itemIndex = toImage.itemIndex
    toImage.itemIndex = index
    }

創(chuàng)建方塊時(shí),根據(jù)diamondsBrain的soureDataArray的存儲(chǔ)元素決定方塊的顏色,而itemIndex由數(shù)組的行和列決定 itemIndex = row * ColumnCount + column,并且接收方塊點(diǎn)擊的block,進(jìn)行相關(guān)的處理。

private func createImageView() {
    //根據(jù)sourceDataArray的顏色創(chuàng)建方塊
    let dataArray = diamondsBrain.getSourceArray()

    for (row, itemArray) in dataArray.enumerated() {
        var rowImageArray = [DiamondsImageView]()
        
        for (column, item) in itemArray.enumerated() {
            let originX = space + CGFloat(column) * (width + ImageSpace)
            let originY = height - CGFloat(row + 1) * (width + ImageSpace)
            let rect = CGRect(x: originX, y: originY, width: width, height: width)
            let imageView = DiamondsImageView(frame: rect)
            imageView.backgroundType = item
            imageView.itemIndex = row * ColumnCount + column
            
            weak var weakSelf = self
            imageView.returnTuple = {(index, type) in
                let column = index % ColumnCount
                let row = index / ColumnCount
                weakSelf?.clearItem(row: row, column: column)
            }
            
            rowImageArray.append(imageView)
            self.view.addSubview(imageView)
        }
        
        imageArray.append(rowImageArray)
    }
    
    updateUI()
    }

在用戶點(diǎn)擊了方塊之后,根據(jù)傳過(guò)來(lái)的itemIndex確定點(diǎn)擊的方塊的行和列,然后調(diào)用diamondsBrain.getClearItem方法消除方塊。消除方塊之后再判斷游戲是否結(jié)束。

private func clearItem(row: Int, column: Int) {
    diamondsBrain.getClearItem(row: row, column: column)
    let dataArray = diamondsBrain.getSourceArray()
    
    for (row, itemArray) in dataArray.enumerated() {
        let rowImageArray = imageArray[row]
        
        for (column, item) in itemArray.enumerated() {
            rowImageArray[column].backgroundType = item
        }
    }
    
    updateUI()
    
    if diamondsBrain.isGameOver() {
        print("Game Over!")
    }
    }

根據(jù)方塊backgroundTyped對(duì)方塊的背景顏色進(jìn)行賦值

private func updateUI() {
    let score = diamondsBrain.score;
    scoreLabel.text = String.init(stringInterpolationSegment: score)
    
    for (_, itemArray) in imageArray.enumerated() {
        for (_, item) in itemArray.enumerated() {
            switch item.backgroundType {
            case .green:
                item.backgroundColor = UIColor.green
            case .red:
                item.backgroundColor = UIColor.red
            case .blue:
                item.backgroundColor = UIColor.blue
            case .yellow:
                item.backgroundColor = UIColor.yellow
            case .clear:
                item.backgroundColor = UIColor.clear
            }
        }
    }
    }

重新開(kāi)始游戲時(shí),使用隨機(jī)方法產(chǎn)生方塊顏色,然后對(duì)ImageArray的方塊的背景色進(jìn)行賦值。

@IBAction func resetGame(_ sender: UIButton) {
    diamondsBrain.setSourceDataArray()
    diamondsBrain.score = 0;
    
    let dataArray = diamondsBrain.getSourceArray()
    
    for (row, itemArray) in dataArray.enumerated() {
        var rowImageArray = imageArray[row]
        
        for (column, item) in itemArray.enumerated() {
            let originX = space + CGFloat(column) * (width + ImageSpace)
            let originY = height - CGFloat(row + 1) * (width + ImageSpace)
            let rect = CGRect(x: originX, y: originY, width: width, height: width)
            let imageView = rowImageArray[column]
            imageView.frame = rect
            imageView.backgroundType = item
            imageView.itemIndex = row * ColumnCount + column
            
            rowImageArray[column] = imageView
        }
        
        imageArray[row] = rowImageArray
    }

    updateUI()
    }

感覺(jué)都在用代碼說(shuō)話,包涵一下,貼個(gè)demo放在百度云ClearGame 喜歡的可以去下載。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容