Lines

Оглавление

  • Первый запуск
  • Playground (dropBall)
  • Расстановка объектов UI
  • Autolayout
  • Связь с кодом
  • Вывод игрового поля
  • Модель игры
  • Анимация

 

Находим объект View и перетаскиваем его. Делаем его квадратным. 375 по высоте и ширине

Нажимаем на кнопку Align и выравниваем по центру горизонтально и вертикально

Добавляем Constraints:

Переходим в Size inspector и редактируем две Constraints

Снизу меняем на «больше либо равно нулю»

А слева понижаем приоритет, например 999

В меню Editor->Canvas выбираем Show Bounds Rectangles

Теперь наш View не сливается с фоном а выделен синей линией

Меняем цвет основного фона на серый

 

Перетягиваем заранее подготовленную папку с картинками в окно Assets.xcaassets

Картинки шариков: Cells.zip

Как нарисовать шарик в иллюстраторе

Теперь нам доступны картинки с различными разрешениями для игрового поля и для шариков

Создаем новый файл

выбираем Cocoa Touch Class

Даем название GameFieldView и выбираем UIView

Сохраняем в директории нашего проекта

В новом файле у нас класс GameFieldView который будет выводить игровое поле на экран

class GameFieldView: UIView {
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        let image = UIImage(named: "0")
        context?.draw(image!.cgImage!, in: rect)
    }
}

Переходим в StoryBoard и выбираем для нашего игрового поля класс GameFieldView

Создадим новый файл

выберем Swift File

назовем Lines и сохраним в директории нашего проекта

Создадим структуру Lines

struct Lines {
    var cells = Array(repeating: Array(repeating: 0, count:9), count: 9)
    
    mutating func dropBall(row: Int, column: Int, color: Int) -> Int {
        let total = 0
        cells[row][column] = color
        return total
    }
}

cells массив целых чисел из 9 строк и 9 столбцов. Он будет соответствовать нашему игровому полю. Если ноль, то пустая клетка, если число от 1 до 7 то номер шарика.  Пока наша функция dropBall присваивает cells[row][column] значение color и возвращает ноль. Мы должны будем написать код, позволяющий проверить, не появились ли линии состоящие из пяти и более шариков по горизонтали, вертикали или диагонали, вернуть число шариков и удалить завершенные линии.

Переходим в Main.Storyboard и перетаскиваем на игровое поле Tap Gesture Recognizer

Переходим в Assistan Editor и с нажатой клавишей Control перетягиваем объект View на файл ViewController.swift

так же перетягиваем Tap Gesture Recognizer

    //MARK: Properties
    @IBOutlet weak var gameFieldView: GameFieldView!
    var lines = Lines()
    
    //MARK: Actions
    @IBAction func tapGameFiled(_ sender: UITapGestureRecognizer) {
        let point = sender.location(in: gameFieldView)
        
        let column = Int(point.x/(gameFieldView.frame.width/9))
        let row = Int(point.y/(gameFieldView.frame.height/9))
        let score = lines.dropBall(row: row, column: column, color: 1)
        
        print("cells[\(row)][\(column)] = \(lines.cells[row][column])")
        print("score = \(score)")
    }

Запускаем и нажимаем на игровом поле. В консоле выводится результат