|< Previous: Making the basic game work: UIButton and CALayer||Next: From outlets to actions: creating an IBAction >|
Our current code chooses the first three items in the countries array, and places them into the three buttons on our view controller. This is fine to begin with, but really we need to choose random countries each time. There are two ways of doing this:
Both approaches are valid, but the former takes a little more work because we need to ensure that all three numbers are different – this game would be even less fun if all three flags were the same!
The second approach is easier to do, because Swift has built-in methods for shuffling arrays:
shuffle() for in-place shuffling, and
shuffled() to return a new, shuffled array.
At the start of the
askQuestion() method, just before you call the first
setImage() method, add this line of code:
That will automatically randomize the order of the countries in the array, meaning that
countries will refer to different flags each time the
askQuestion() method is called. To try it out, press Cmd+R to run your program a few times to see different flags each time.
The next step is to track which answer should be the correct one, and to do that we're going to create a new property for our view controller called
correctAnswer. Put this near the top, just above
var score = 0:
var correctAnswer = 0
This gives us a new integer property that will store whether it's flag 0, 1 or 2 that holds the correct answer.
To choose which should be the right answer requires using Swift’s random system again, because we need to choose a random number for the correct answer. All Swift’s numeric types, such as
CGFloat, have a
random(in:) method that generates a random number in a range. So, to generate a random number between 0 and 2 inclusive you need to put this line just below the three
setImage() calls in
correctAnswer = Int.random(in: 0...2)
Now that we have the correct answer, we just need to put its text into the navigation bar. This can be done by using the
title property of our view controller, but we need to add one more thing: we don't want to write "france" or "uk" in the navigation bar, because it looks ugly. We could capitalize the first letter, and that would work great for France, Germany, and so on, but it would look poor for “Us” and “Uk”, which should be “US” and “UK”.
The solution here is simple: uppercase the entire string. This is done using the
uppercased() method of any string, so all we need to do is read the string out from the countries array at the position of
correctAnswer, then uppercase it. Add this to the end of the
askQuestion() method, just after
correctAnswer is set:
title = countries[correctAnswer].uppercased()
With that done, you can run the game and it's now almost playable: you'll get three different flags each time, and the flag the player needs to tap on will have its name shown at the top.
Of course, there's one piece missing: the user can tap on the flag buttons, but they don't actually do anything. Let's fix that…