Share
Explore

Lab Workbook: Building an iOS iPhone App for Tic Tac Toe

Last edited 174 days ago by Peter Sigurdson
Welcome to this lab workbook! In this lab, we will be building an iOS iPhone App for Tic Tac Toe. This workbook will provide step-by-step instructions on building the app, as well as all the code you will need to build it.

Requirements

To complete this lab, you will need:
A Mac computer running macOS 10.14 or later
Xcode 11 or later installed
Basic knowledge of Swift programming language

Step 1: Creating a New Project

The first step in building our Tic Tac Toe app is to create a new Xcode project. To do this, follow these steps:
Open Xcode.
Click on "Create a new Xcode project" on the welcome screen.
Select "App" under "iOS" and click "Next".
Enter a product name, such as "TicTacToeApp", and select a team if applicable. Click "Next".
Choose a location to save the project and click "Create".

Step 2: Designing the User Interface

Now that we have created a new project, we can start designing the user interface for our Tic Tac Toe app. To do this, follow these steps:
Open "Main.storyboard" in the project navigator.
Drag a "View Controller" from the Object Library onto the canvas.
Drag three "Button" objects onto the view controller.
Set the constraints for the buttons so that they are evenly spaced and centered vertically and horizontally.
Repeat step 3 and 4 for the next row of buttons.
Add a label to show the current player and another label to show the winner.
Set the constraints for the labels so that they are centered horizontally and vertically.

Step 3: Writing the Code

Now that we have designed our user interface, we can start writing the code for our Tic Tac Toe app. To do this, follow these steps:

Create a new Swift file in the project navigator and name it "GameLogic.swift".
Add the following code to the file:

enum Player { case x case o}
class GameLogic {
 var currentPlayer: Player = .x var winner: Player? var board: [[Player?]] = [[nil, nil, nil], [nil, nil, nil], [nil, nil, nil]]
 func playMove(row: Int, column: Int) { board[row][column] = currentPlayer
 if checkForWinner() { winner = currentPlayer } else { currentPlayer = currentPlayer == .x ? .o : .x } }
 func checkForWinner() -> Bool { // Check rows for row in 0..<3 { if board[row][0] != nil && board[row][0] == board[row][1] && board[row][1] == board[row][2] { return true } }
 // Check columns for column in 0..<3 { if board[0][column] != nil && board[0][column] == board[1][column] && board[1][column] == board[2][column] { return true } }
 // Check diagonals if board[0][0] != nil && board[0][0] == board[1][1] && board[1][1] == board[2][2] { return true }
 if board[0][2] != nil && board[0][2] == board[1][1] && board[1][1] == board[2][0] { return true }
 return false }}

Add the following code to the view controller:
class ViewController: UIViewController {
 @IBOutlet weak var playerLabel: UILabel! @IBOutlet weak var winnerLabel: UILabel! @IBOutlet weak var button1: UIButton! @IBOutlet weak var button2: UIButton! @IBOutlet weak var button3: UIButton! @IBOutlet weak var button4: UIButton! @IBOutlet weak var button5: UIButton! @IBOutlet weak var button6: UIButton! @IBOutlet weak var button7: UIButton! @IBOutlet weak var button8: UIButton! @IBOutlet weak var button9: UIButton!
 var gameLogic = GameLogic()
 override func viewDidLoad() { super.viewDidLoad()
 updateUI() }
 @IBAction func buttonTapped(_ sender: UIButton) { let row = sender.tag / 3 let column = sender.tag % 3
 gameLogic.playMove(row: row, column: column)
 updateUI() }
 func updateUI() { playerLabel.text = "Player: \(gameLogic.currentPlayer == .x ? "X" : "O")"
 if let winner = gameLogic.winner { winnerLabel.text = "Winner: \(winner == .x ? "X" : "O")" } else { winnerLabel.text = "" }
 button1.setTitle(playerString(for: gameLogic.board[0][0]), for: .normal) button2.setTitle(playerString(for: gameLogic.board[0][1]), for: .normal) button3.setTitle(playerString(for: gameLogic.board[0][2]), for: .normal) button4.setTitle(playerString(for: gameLogic.board[1][0]), for: .normal) button5.setTitle(playerString(for: gameLogic.board[1][1]), for: .normal) button6.setTitle(playerString(for: gameLogic.board[1][2]), for: .normal) button7.setTitle(playerString(for: gameLogic.board[2][0]), for: .normal) button8.setTitle(playerString(for: gameLogic.board[2][1]), for: .normal) button9.setTitle(playerString(for: gameLogic.board[2][2]), for: .normal) }
 func playerString(for player: Player?) -> String { if player == nil { return "" } else if player == .x { return "X" } else { return "O" } }
}

Step 4: Running the App


We have now completed building our Tic Tac Toe app! To run the app, follow these steps:
Connect your iPhone to your Mac using a USB cable.
Select your iPhone as the target device in Xcode.
Click on the "Run" button in Xcode.
Wait for Xcode to build and install the app on your iPhone.
Open the app on your iPhone and start playing Tic Tac Toe!
Congratulations! You have successfully built an iOS iPhone App for Tic Tac Toe.

Lab Work Book for iOS iPhone App Building: Tic Tac Toe Game with Computer Player

Introduction

In this lab work book, we will be building a Tic Tac Toe game for iOS that allows a human player to play against the computer. The game will have a graphical user interface (GUI) and will be built using Swift and Xcode.

Step 1: Setting up the Xcode Project

Open Xcode and click on "Create a new Xcode project"
Choose "App" under the iOS category and click "Next"
Enter a product name for your app and choose a team for signing your app, then click "Next"
Choose a location to save your project and click "Create"
Once your project opens, go to the "Main.storyboard" file and add a 3x3 grid of buttons to the view controller.
Create a new swift file called "GameLogic" and add the following code:
enum Player { case x case o}
class GameLogic { var board: [[Player?]] = Array(repeating: Array(repeating: nil, count: 3), count: 3) var currentPlayer: Player = .x
 var winner: Player? { // Check rows for row in 0..<3 { if board[row][0] != nil && board[row][0] == board[row][1] && board[row][0] == board[row][2] { return board[row][0] } }
 // Check columns for column in 0..<3 { if board[0][column] != nil && board[0][column] == board[1][column] && board[0][column] == board[2][column] { return board[0][column] } }
 // Check diagonals if board[0][0] != nil && board[0][0] == board[1][1] && board[0][0] == board[2][2] { return board[0][0] }
 if board[0][2] != nil && board[0][2] == board[1][1] && board[0][2] == board[2][0] { return board[0][2] }
 // Check for tie for row in 0..<3 { for column in 0..<3 { if board[row][column] == nil { // Game is not over yet return nil } } }
 // Game is a tie return .o }
 func playMove(row: Int, column: Int) { board[row][column] = currentPlayer
 if currentPlayer == .x { currentPlayer = .o } else { currentPlayer = .x } }}

Step 2: Creating the View Controller


Create a new Swift file called "ViewController" and add the following code:

import UIKit
class ViewController: UIViewController {
 @IBOutlet weak var playerLabel: UILabel! @IBOutlet weak var winnerLabel: UILabel!
 // Add 9 buttons to your storyboard and connect them to these outlets @IBOutlet weak var button1: UIButton! @IBOutlet weak var button2: UIButton! @IBOutlet weak var button3: UIButton! @IBOutlet weak var button4: UIButton! @IBOutlet weak var button5: UIButton! @IBOutlet weak var button6: UIButton! @IBOutlet weak var button7: UIButton! @IBOutlet weak var button8: UIButton! @IBOutlet weak var button9: UIButton!
 var gameLogic = GameLogic()
 override func viewDidLoad() { super.viewDidLoad()
 updateUI() }
 @IBAction func buttonTapped(_ sender: UIButton) { let row = sender.tag / 3 let column = sender.tag % 3
 gameLogic.playMove(row: row, column: column) computerPlay() updateUI() }
 func updateUI() { playerLabel.text = "Player: \(gameLogic.currentPlayer == .x ? "X" : "O")"
 if let winner = gameLogic.winner { winnerLabel.text = "Winner: \(winner == .x ? "X" : "O")" disableButtons() } else { winnerLabel.text = "" }
 button1.setTitle(playerString(for: gameLogic.board[0][0]), for: .normal) button2.setTitle(playerString(for: gameLogic.board[0][1]), for: .normal) button3.setTitle(playerString(for: gameLogic.board[0][2]), for: .normal) button4.setTitle(playerString(for: gameLogic.board[1][0]), for: .normal) button5.setTitle(playerString(for: gameLogic.board[1][1]), for: .normal) button6.setTitle(playerString(for: gameLogic.board[1][2]), for: .normal) button7.setTitle(playerString(for: gameLogic.board[2][0]), for: .normal) button8.setTitle(playerString(for: gameLogic.board[2][1]), for: .normal) button9.setTitle(playerString(for: gameLogic.board[2][2]), for: .normal) }
 func playerString(for player: Player?) -> String { if player == nil { return "" } else if player == .x { return "X" } else { return "O" } }
 func disableButtons() { button1.isEnabled = false button2.isEnabled = false button3.isEnabled = false button4.isEnabled = false button5.isEnabled = false button6.isEnabled = false button7.isEnabled = false button8.isEnabled = false button9.isEnabled = false
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.