How to Make a Game Like Wordle in SwiftUI: Part One

Building the Gameboard View

Open GameBoardView.swift in the GameBoardViews group and add the following computed property above the body of the view:

var unusedGuesses: Int {
  let remainingGuesses = game.maxGuesses - game.guesses.count
  if remainingGuesses < 0 {
    return 0
  }
  return remainingGuesses
}

This property returns the number of guesses remaining for the current game. It subtracts the current guesses from the maximum number of guesses. It also checks to ensure this number isn't negative.

Now, replace the placeholder Text view in the body (don't remove the sheet(isPresented:onDismiss:content:) or padding(_:)) with:

VStack {
  // 1
  ForEach($game.guesses) { guess in
    // 2
    CurrentGuessView(guess: guess, wordLength: game.wordLength)
  }
  // 3
  ForEach(0..<unusedGuesses, id: \.self) { _ in
    // 4
    CurrentGuessView(guess: .constant(Guess()), wordLength: game.wordLength)
  }
}

You'll create a VStack view that:

1. First loops through the existing guesses. You use the ability added in SwiftUI with iOS 15 to loop through a binding. Doing so provides a binding to the closure.
2. Displays each guess using the CurrentGuessView you completed in the last section, passing in the binding to the current guess and the length of the word.
3. Afterward, displays empty guesses to fill the game board and visually inform the player how many guesses remain. You use the unusedGuesses property you added earlier to determine the number needed, then display an empty Guess object for each one.

Update the preview to:

GameBoardView(game: GuessingGame.inProgressGame())

Look at the live preview for this view to see how the finished game board comes together.

Run your app and try playing a game. You'll see all the tiles show green when you guess the word. You'll also notice there's no way to start a new game. You'll add that in the next section.

Starting a New Game

Open GuessingGame.swift and add the following method to the end of the class:

func newGame() {
  let totalWords = dictionary.commonWords.count
  let randomWord = Int.random(in: 0..<totalWords)
  targetWord = dictionary.commonWords[randomWord]
  print("Selected word: \(targetWord)")

  currentGuess = 0
  guesses = []
  guesses.append(Guess())
  status = .new
}

It should look familiar because this performs the same tasks you did in the init() method you created earlier in this tutorial. Now, open ActionBarView.swift in the GameBoardViews and add a reference to the game after the existing property:

@ObservedObject var game: GuessingGame

Then, go down to the action of the button and replace the comment // New game action with a call to the newGame() method:

game.newGame()

Also, change the disabled() modifier to:

.disabled(game.status == .inprogress || game.status == .new)

Finally, update the preview body to:

ActionBarView(
  showStats: .constant(false),
  game: GuessingGame.inProgressGame()
)

Now, go back to ContentView.swift and update ActionBarView to add the new game parameter:

ActionBarView(
  showStats: $showStats,
  game: game
)

Run the app to see the final version. When you finish a game, you can click the button to start a new one.

Where to Go From Here

You can click the Download Materials button at the top and bottom of this tutorial to download the starter and final projects.

You have a functioning Wordle clone, but it lacks the polish of a good app. That's why in part two, you'll expand the app to include animation, better accessibility, statistics and sharing. You'll also update the app to maintain the game state when entering the background.

If you'd like to see more Wordle-related projects, check out WORDLES OF THE WORLD UNITE.

For some perspective on creating a more graphically oriented game, see Unity Tutorial: How to Make a Game Like Space Invaders.

See you in part two.