As you spend more time developing apps, you accumulate a lot of useful reusable code. Whether you’re implementing Game Center (which is still alive and well!) or setting up in-app purchases, a lot of the boilerplate code remains the same between applications. Eventually, you get a knack for writing your code so that it’s easier to factor out of one app and plug into another one.
Readers of the HangZone blog might remember our Random Date tutorial, where we built an app to randomly select a date venue. Today, we’re going to repurpose that code into a Rock, Paper, Scissors game!
The Prerequisites
If you’ve followed along with our previous tutorials, you know that you’ll need a Mac with Xcode. You also need to complete the Random Date tutorial, so you’ll have the necessary code base for this project. You can find part one of the tutorial here. Finally, you’ll need to download these images. You can also draw your own images if you’re feeling artistic today! It won’t take much to outdo my rock!
Let’s open up a Finder window and find our RandomDate folder. It should include another RandomDate folder plus the RandomDate.xcodeproj file. Copy the first folder with all of these files inside it, paste it wherever you like, and rename the new folder RPS. That’s a hip abbreviation for Rock Paper Scissors. Inside the folder, open the RandomDate.xcodeproj file (we can worry about renaming things another time), and let’s repurpose some code!
The Code
Open up ViewController.swift and look inside dateButtonTapped. In Rock, Paper, Scissors, there are only 3 choices. We had 5 options for date venues. Therefore, let’s change let randomDateIndex = arc4random_uniform(5) to let randomMoveIndex = arc4random_uniform(3). This will make our computer opponent randomly select 1 of 3 moves.
Now we need to define what the moves are. Adjust the switch statement immediately below our last change to the following:
switch randomMoveIndex {
case 0:
dateLabel.text = "Rock"
dateImage.image = UIImage(named: “RPS-Rock")
case 1:
dateLabel.text = "Paper"
dateImage.image = UIImage(named: “RPS-Paper")
case 2:
dateLabel.text = "Scissors"
dateImage.image = UIImage(named: “RPS-Scissors“)
default:
dateLabel.text = "?????"
}
This will show us some text and a corresponding image to go with whatever move the computer throws.
Some Final Tweaks
We need to make a few more changes outside of the code to finish things up. Head over to the storyboard and change the “Select a Date” button text to “Shoot”. When you play the game, you’re going to go through all the hand motions and chant, “Rock! Paper! Scissors! Shoot!” When you throw down your hand with your chosen move, make sure to slam it onto the “Shoot” button. That will prompt the computer to throw his move at the same time. This is really elegant stuff, right?
Now go to Assets.xcassets. Under AppIcon, replace the existing icons with the new icons you downloaded earlier. You can just drag them into the corresponding squares. Delete the other images that were for Random Date, and replace them with our new Rock, Paper, Scissors images.
Lastly, click on the file with the blue icon next to it at the top of the left panel. That brings up your project settings. Click on the General tab. Change your Display Name to “RPS”, and adjust your bundle identifier as well (it can be anything that distinguishes it from your Random Date bundle identifier).
You’ve got yourself a brand new Rock, Paper, Scissors training app!
Wrap-Up
This is a very simple example of reusing existing code and storyboard infrastructure. In fact, it’s closer to re-skinning an app than simply reusing some code. Nevertheless, this shows you the benefits of building up a large codebase to help with future projects. Until next time, you’re going to want to practice some Rock, Paper, Scissors. Maybe you could learn some new gambits. The Scissor Sandwich is always a fine opening to counter the human tendency to lead with rock. If I recall from the code, however, our opponent doesn’t have that human weakness. Good luck finding a winning strategy!