版本記錄

前言

quartz是一個通用的術(shù)語认轨，用于描述在iOS和MAC OS X 中整個媒體層用到的多種技術(shù) 包括圖形很钓、動畫纸淮、音頻袱院、適配屎慢。Quart 2D 是一組二維繪圖和渲染API，Core Graphic會使用到這組API忽洛，Quartz Core專指Core Animation用到的動畫相關(guān)的庫腻惠、API和類。CoreGraphics 是UIKit下的主要繪圖系統(tǒng)欲虚，頻繁的用于繪制自定義視圖集灌。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics數(shù)據(jù)結(jié)構(gòu)和函數(shù)可以通過前綴CG來識別苍在。在app中很多時候繪圖等操作我們要利用CoreGraphic框架绝页，它能繪制字符串荠商、圖形、漸變色等等续誉，是一個很強(qiáng)大的工具莱没。感興趣的可以看我另外幾篇。
1. CoreGraphic框架解析（一）—— 基本概覽
2. CoreGraphic框架解析（二）—— 基本使用
3. CoreGraphic框架解析（三）—— 類波浪線的實(shí)現(xiàn)
4. CoreGraphic框架解析（四）—— 基本架構(gòu)補(bǔ)充
5. CoreGraphic框架解析 （五）—— 基于CoreGraphic的一個簡單繪制示例 （一）
6. CoreGraphic框架解析 （六）—— 基于CoreGraphic的一個簡單繪制示例 （二）
7. CoreGraphic框架解析 （七）—— 基于CoreGraphic的一個簡單繪制示例 （三）
8. CoreGraphic框架解析 （八）—— 基于CoreGraphic的一個簡單繪制示例 （四）
9. CoreGraphic框架解析 （九）—— 一個簡單小游戲 （一）
10. CoreGraphic框架解析 （十）—— 一個簡單小游戲 （二）

源碼

1. Swift

首先看下工程組織結(jié)構(gòu)

下面看下sb中的內(nèi)容

下面就是源碼了

1. ResultViewController.swift

import UIKit

class ResultViewController: UIViewController {
  // MARK: - Outlets
  @IBOutlet weak var scoreLabel: UILabel!

  // MARK: - Properties
  var score: Int?
  
  // MARK: - View Life Cycle
  override func viewDidLoad() {
    super.viewDidLoad()
    
    if let score = score {
      scoreLabel.text = "Your final score: \(score)"
    }
  }

  // MARK: - Actions
  @IBAction func playAgainPressed(_ sender: Any) {
    presentingViewController?.dismiss(animated: true, completion: nil)
  }
}

2. PatternView.swift

import UIKit

class PatternView: UIView {
  // MARK: - Structures
  public struct Constants {
    static let patternSize: CGFloat = 30.0
    static let patternRepeatCount = 2
  }
  
  // MARK: - Constants
  enum PatternDirection: CaseIterable {
    case left
    case top
    case right
    case bottom
  }
  
  // MARK: - Properties
  var fillColor: [CGFloat] = [1.0, 0.0, 0.0, 1.0]
  var direction: PatternDirection = .top
  
  // Callback that draws a single pattern, a triangle
  let drawTriangle: CGPatternDrawPatternCallback = { _, context in
    let trianglePath = UIBezierPath(triangleIn:
      CGRect(x: 0, y: 0, width: Constants.patternSize, height: Constants.patternSize))
    context.addPath(trianglePath.cgPath)
    context.fillPath()
  }
  
  // MARK: - Initialization
  init(fillColor: [CGFloat], direction: PatternDirection = .top) {
    self.fillColor = fillColor
    self.direction = direction
    super.init(frame: CGRect.zero)
  }
  
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
  }
  
  // MARK: - Drawing
  override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()!
    
    // Background fill
    UIColor.white.setFill()
    context.fill(rect)
    
    // Set up color space
    let baseSpace = CGColorSpaceCreateDeviceRGB()
    let patternSpace = CGColorSpace(patternBaseSpace: baseSpace)!
    context.setFillColorSpace(patternSpace)
    
    // Pattern that draws the triangle
    var callbacks = CGPatternCallbacks(
      version: 0, drawPattern: drawTriangle, releaseInfo: nil)
    
    // Set up the pattern dimensions
    let patternStepX: CGFloat = rect.width / CGFloat(Constants.patternRepeatCount)
    let patternStepY: CGFloat = rect.height / CGFloat(Constants.patternRepeatCount)
    let patternOffsetX: CGFloat = (patternStepX - Constants.patternSize) / 2.0
    let patternOffsetY: CGFloat = (patternStepY - Constants.patternSize) / 2.0
    
    // Set up the transformation matrix based on the pattern direction
    var transform: CGAffineTransform
    switch direction {
    case .top:
      transform = .identity
    case .right:
      transform = CGAffineTransform(rotationAngle: CGFloat(0.5 * .pi))
    case .bottom:
      transform = CGAffineTransform(rotationAngle: CGFloat(1.0 * .pi))
    case .left:
      transform = CGAffineTransform(rotationAngle: CGFloat(1.5 * .pi))
    }
    // Add an offset (margin) so the patterns line up nicely with each other
    transform = transform.translatedBy(x: patternOffsetX, y: patternOffsetY)
    
    // Create the pattern
    let pattern = CGPattern(
      info: nil,
      bounds: CGRect(x: 0, y: 0, width: Constants.patternSize, height: Constants.patternSize),
      matrix: transform,
      xStep: patternStepX,
      yStep: patternStepY,
      tiling: .constantSpacing,
      isColored: false,
      callbacks: &callbacks)
    // Set the  pattern
    context.setFillPattern(pattern!, colorComponents: fillColor)
    // Paint the rectangle with the pattern
    context.fill(rect)
  }
}

// MARK: - UIBezierPath extension
extension UIBezierPath {
  convenience init(triangleIn rect: CGRect) {
    self.init()
    // Draw out the triangle path
    let topOfTriangle = CGPoint(x: rect.width / 2, y: 0)
    let bottomLeftOfTriangle = CGPoint(x: 0, y: rect.height)
    let bottomRightOfTriangle = CGPoint(x: rect.width, y: rect.height)
    self.move(to: topOfTriangle)
    self.addLine(to: bottomLeftOfTriangle)
    self.addLine(to: bottomRightOfTriangle)
    self.close()
  }
}

3. Game.swift

import UIKit

class Game {
  // MARK: - Properties
  let maxAttemptsAllowed = 5
  let colorSelections = [UIColor.blue, UIColor.red, UIColor.magenta]
  let totalPatternCount: Int
  
  var score: Int
  var attempt: Int
  var answers: [PatternView.PatternDirection]
  
  private var majorityPatternCount: Int {
    return totalPatternCount / 2 + 1
  }
  
  // MARK: - Object Lifecycle
  init(patternCount count: Int) {
    totalPatternCount = count
    score = 0
    attempt = 0
    answers = []
  }
  
  // MARK: - Gameplay
  func play(_ guess: PatternView.PatternDirection) -> (correct: Bool, score: Int)? {
    if done() {
      return nil
    }
    if guess == answers[attempt] {
      score = score + 1
      attempt = attempt + 1
      return (true, score)
    } else {
      attempt = attempt + 1
      return (false, score)
    }
  }
  
  func setupNextPlay() -> (directions: [PatternView.PatternDirection], colors: [UIColor]) {
    var directions: [PatternView.PatternDirection] = []
    var colors: [UIColor] = []
    
    // Get a list of directions that don't belong to the correct answer
    let wrongDirections = PatternView.PatternDirection.allCases.filter{
      $0 != answers[attempt]
    }
    // Get a random number of correct answers to fill, to maintain the majority
    let numberOfCorrectPatterns = Int.random(in: majorityPatternCount ..< totalPatternCount)
    
    // Fill out the return info
    for index in 0..<totalPatternCount {
      // Front load with the correct answer
      if index < numberOfCorrectPatterns {
        directions.append(answers[attempt])
      } else {
        // Next, randomly assign wrong answers
        directions.append(wrongDirections.randomElement()!)
      }
      // Pick a random color for the pattern
      colors.append(colorSelections.randomElement()!)
    }
    // Randomly reorder the directions
    directions.shuffle()
    
    return (directions, colors)
  }
  
  func done() -> Bool {
    return attempt >= maxAttemptsAllowed
  }
  
  func reset() {
    score = 0
    attempt = 0
    answers.removeAll()
    
    generatePlays()
  }
}

// MARK: - Private methods
private extension Game {
  func generatePlays() {
    // Pick the random direction that will be the dominant one
    let allPatternDirections = PatternView.PatternDirection.allCases
    answers = (0..<maxAttemptsAllowed).map{ _ in
      allPatternDirections.randomElement()!
    }
  }
}

4. GameViewController.swift

import UIKit

class GameViewController: UIViewController {
  // MARK: - Outlets
  @IBOutlet weak var scoreLabel: UILabel!
  
  @IBOutlet weak var item1PatternView: PatternView!
  @IBOutlet weak var item2PatternView: PatternView!
  @IBOutlet weak var item3PatternView: PatternView!
  @IBOutlet weak var item4PatternView: PatternView!
  
  @IBOutlet weak var leftButton: UIButton!
  @IBOutlet weak var topButton: UIButton!
  @IBOutlet weak var bottomButton: UIButton!
  @IBOutlet weak var rightButton: UIButton!
  
  @IBOutlet weak var choiceFeedbackLabel: UILabel!
  
  // MARK: - Properties
  let numberOfPatterns = 4
  var game: Game?
  var score: Int? {
    didSet {
      if let score = score, let game = game {
        scoreLabel.text = "\(score) / \(game.maxAttemptsAllowed)"
      }
    }
  }
  
  // MARK: - View Lifecycle
  override func viewDidLoad() {
    super.viewDidLoad()
    game = Game(patternCount: numberOfPatterns)
  }
  
  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    game?.reset()
    score = game?.score
  }
  
  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    showNextPlay()
  }
  
  override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "resultSegue" {
      if let destinationViewController = segue.destination as? ResultViewController {
        destinationViewController.score = score
      }
    }
  }
  
  // MARK: - Actions
  @IBAction func choiceButtonPressed(_ sender: UIButton) {
    switch sender {
    case leftButton:
      play(.left)
    case topButton:
      play(.top)
    case bottomButton:
      play(.bottom)
    case rightButton:
      play(.right)
    default:
      play(.left)
    }
  }
}

// MARK: - Private methods
private extension GameViewController {
  func showNextPlay() {
    guard let game = game else { return }
    // Check if the game is still in progress
    if !game.done() {
      // Get the next set of directions and colors for the pattern views
      let (directions, colors) = game.setupNextPlay()
      // Update the pattern views
      setupPatternView(item1PatternView, towards: directions[0], havingColor: colors[0])
      setupPatternView(item2PatternView, towards: directions[1], havingColor: colors[1])
      setupPatternView(item3PatternView, towards: directions[2], havingColor: colors[2])
      setupPatternView(item4PatternView, towards: directions[3], havingColor: colors[3])
      // Re-enable the buttons and hide the answer feedback
      controlsEnabled(true)
    }
  }
  
  func controlsEnabled(_ on: Bool) {
    // Enable or disable the buttons
    leftButton.isEnabled = on
    topButton.isEnabled = on
    bottomButton.isEnabled = on
    rightButton.isEnabled = on
    // Show or hide the feedback on the answer
    choiceFeedbackLabel.isHidden = on
  }
  
  // Sets up the pattern view given a diretion and color
  func setupPatternView(
    _ patternView: PatternView,
    towards: PatternView.PatternDirection,
    havingColor color: UIColor
  ) {
    patternView.direction = towards
    patternView.fillColor = color.rgba
    patternView.setNeedsDisplay()
  }
  
  // Displays the results of the choice
  func displayResults(_ correct: Bool) {
    if correct {
      print("You answered correctly!")
      choiceFeedbackLabel.text = "\u{2713}" // checkmark
      choiceFeedbackLabel.textColor = .green
    } else {
      print("That one got you.")
      choiceFeedbackLabel.text = "\u{2718}" // wrong (X)
      choiceFeedbackLabel.textColor = .red
    }
    // Visual indicator of correctness
    UIView.animate(withDuration: 0.5, animations: {
      self.choiceFeedbackLabel.transform = CGAffineTransform(scaleX: 1.8, y: 1.8)
    }, completion: { _ in
      UIView.animate(withDuration: 0.5) {
        self.choiceFeedbackLabel.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
      }
    })
  }
  
  // Processes the play and displays the result
  func play(_ selection: PatternView.PatternDirection) {
    // Temporarily disable the buttons and make the feedback label visible
    controlsEnabled(false)
    // Check if the answer is correct
    if let result = game?.play(selection) {
      // Update the score
      score = result.score
      // Show whether the answer is correct or not
      displayResults(result.correct)
    }
    // Wait a little before showing the next play or transition to the
    // end game view
    DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(2000)) {
      if (self.game?.done())! {
        self.performSegue(withIdentifier: "resultSegue", sender: nil)
      } else {
        self.showNextPlay()
      }
    }
  }
}

// MARK: - UIColor extension
extension UIColor {
  // Returns an array that splits out the RGB and Alpha values
  var rgba: [CGFloat] {
    var red: CGFloat = 0
    var green: CGFloat = 0
    var blue: CGFloat = 0
    var alpha: CGFloat = 0
    getRed(&red, green: &green, blue: &blue, alpha: &alpha)
    return [red, green, blue, alpha]
  }
}

下面就是實(shí)現(xiàn)效果

后記

本篇主要講述了一個簡單小游戲酷鸦，感興趣的給個贊或者關(guān)注~~~