游戲規(guī)則:
- 點(diǎn)擊某一方塊,當(dāng)該方塊的上下左右四個(gè)方向同顏色方塊可連續(xù)(大于等于2)即可消除。
- 方塊消除后,上面的方塊往下掉。
- 中間整列都空的話,旁邊的列往中間靠攏。
- 如果沒(méi)有可消除的方塊,游戲結(jié)束。
效果如下:
流程:
- 使用隨機(jī)方法產(chǎn)生方塊的顏色,然后創(chuàng)建背景色與之相對(duì)應(yīng)的方塊。
- 判斷游戲是否結(jié)束。
- 用戶點(diǎn)擊方塊,判斷該方塊的上下左右方向上是否存在同顏色的方塊。有,把方塊保存起來(lái),進(jìn)入第四步,沒(méi)有,不做任何響應(yīng),并等待用戶點(diǎn)擊。
- 清除方塊,向下移動(dòng)方塊。存在中間某列空了,兩側(cè)的列往中間移動(dòng)。跳轉(zhuǎn)到第二步。
- 用戶點(diǎn)擊重新開(kāi)始按鈕,跳轉(zhuǎn)到第一步。
實(shí)現(xiàn):
先來(lái)看一下demo的文件結(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 喜歡的可以去下載。