Skip to content
Share
Explore

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

Last edited 682 days ago by System Writer.
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
}

func computerPlay() {
guard gameLogic.winner == nil else { return }

var bestMove: (row: Int, column: Int)?

for row in 0..<3 {
for column in 0..<3 {
if gameLogic.board[row][column] == nil {
gameLogic.board[row][column] = .o

if gameLogic.winner == .o {
bestMove = (row, column)
}

gameLogic.board[row][column] = nil
}
}
}

if bestMove == nil {
repeat {
let row = Int.random(in: 0..<3)
let column = Int.random(in: 0..<3)

if gameLogic.board[row][column] == nil {
bestMove = (row, column)
}
} while bestMove == nil
}

gameLogic.playMove(row: bestMove!.row, column: bestMove!.column)
}
}



Step 3: Running the App

We have now completed building our Tic Tac Toe game with a computer player! 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 against the computer!
Congratulations! You have successfully built an iOS iPhone app for Tic Tac Toe with a computer player.

HOW the program plays the game

In our Tic Tac Toe app, the computer player uses a simple algorithm to determine its moves.
The algorithm starts by checking if it can win the game in the current turn. It does this by iterating through each empty square on the board and simulating a move by the computer player. If the computer player can win by making that move, it selects that square as the best move.
If there is no move that can win the game, the algorithm checks if the human player can win the game in their next turn. It does this by iterating through each empty square on the board and simulating a move by the human player. If the human player can win by making that move, the algorithm selects that square as the best move.
If neither player can win the game in their next turn, the algorithm selects a random empty square on the board as the best move.
The algorithm then makes the best move by calling the playMove() method on the GameLogic instance.
This process is repeated for each turn in the game, with the algorithm selecting the best move for the computer player each time.
Overall, this algorithm is a simple but effective way for the computer player to play Tic Tac Toe. It is not unbeatable, but it is challenging enough to provide a fun and engaging game for the human player.
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.