HW14- How to Design App Dice Roll Game

Make a dice game in Swift project.

Clicked on the right above button +, adding imageView from the object library.

The default ImageView displays on the middle.

we’re gonna make a background, drag the toggle so that it fills the entire screen.

drag the toggle as big as the screen

open your inspector pane on the right side.

open the attribution inspector

then open the image, there are plenty of options we can choose if you have all your needed photos inserted in the Assets.

choose GreenBackground

The default ConstentMode is Aspect Fit.

There are top 3 common options.
— Aspect Fit: Keep the original proprotion.
— Aspect Fill: Keep the proportion/ aspect ratio of the image intact and fill.
— Scale To Fill: Scale the image, probably will lose the orginal proportion.

Aspect fill is my favorite option.

scale to fill -> the picture was extended in vertical

Choose the Aspect Fill. Add imageViews and Button.

we can go to the Size Inspector on the right-hand pane. We’re going to change the width to 120 x 120, so that we have pit perfectly square Image View.

hold on the option key can duplicate objects as a shortcut

Create an IBOutlet and Display Dice 6.

1. Create IBOutlet:
   Segment the diceImageView1 in viewController.

2. We changed it to DiceSix when app displaying at this step.

    diceImageView1.image = UIImage(imageLiteralResourceName: "DiceSix")

3. Base on the who.what = value

diceImageView1.alpha = 0.5

Run the simulator:

Create an IBOutlet and Display Dice 2.

Redo the above steps.

quick search for the LiteralResourceName

Result: there are 4 UI elements on displaying

import UIKit

class ViewController: UIViewController {

    // IBOutlet allows me to reference a UI element.
    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
      // who            what   value
        diceImageView1.image = UIImage(imageLiteralResourceName: "DiceSix")
        diceImageView1.alpha = 0.5
        diceImageView2.image = UIImage(imageLiteralResourceName: "DiceTwo")
  
        
    }
}

Segment the IBAction

choose UIButton as a medium to trigger the action

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        diceImageView1.image = UIImage(imageLiteralResourceName: "DiceSix")
        diceImageView1.alpha = 0.5
        diceImageView2.image = UIImage(imageLiteralResourceName: "DiceTwo")
    
    }

    @IBAction func rollButtonPressed(_ sender: UIButton) {
      
    }

Change the dice number when the Button was triggered. (in IBAction)

diceImageView1.image = UIImage(imageLiteralResourceName: "DiceThree")
diceImageView2.image = UIImage(imageLiteralResourceName: "DiceFour")

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        diceImageView1.image = UIImage(imageLiteralResourceName: "DiceSix")
        diceImageView1.alpha = 0.5
        diceImageView2.image = UIImage(imageLiteralResourceName: "DiceTwo")
    
    }

    @IBAction func rollButtonPressed(_ sender: UIButton) {
        
        diceImageView1.image = UIImage(imageLiteralResourceName: "DiceThree")
        diceImageView2.image = UIImage(imageLiteralResourceName: "DiceFour")
      
    }
    
}

IBOutlet : change the inner default automatically.
IBAction: trigger and give respond when the outside knock.

• when doing comment, it’s easier to hit command, forward slash, and it comments out the entire line of code. You can toggle it as many time as you want.
• slash+asterisk you can comment for multi-line comments.

How to make sequence?
We need something that called an Array.

First, we delete everything inside the curly braces of viewDidLoad. And do the same in the Roll button pressed IBAction.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        
    }

    @IBAction func rollButtonPressed(_ sender: UIButton) {
        
    }
    
}

Let’s do Array
Insert imageliteral and start from “DiceOne”.

1. make array inside the square backets[ ] from “DiceOne” to “DiceSix”.
2. make another specific [1] which means the second one.
   example: [1,2,3,4,5], assign [0] ->1.

[1] can give a variable make it more readability.

Now that the value is stored inside a named variable called leftDiceNumber . So I can refer to that value if I ever need to by using its name which is leftDiceNumber.

Challenge: Right side display array but countdown instead.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!
    
    var leftDiceNumber = 1
    var rightDiceNumber = 5
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        
    }

    @IBAction func rollButtonPressed(_ sender: UIButton) {
        diceImageView1.image = [ UIImage(imageLiteralResourceName: "DiceOne"), UIImage(imageLiteralResourceName: "DiceTwo"), UIImage(imageLiteralResourceName: "DiceThree"), UIImage(imageLiteralResourceName: "DiceFour"), UIImage(imageLiteralResourceName: "DiceFive"), UIImage(imageLiteralResourceName: "DiceSix") ] [ leftDiceNumber ]
        
        diceImageView2.image = [ UIImage(imageLiteralResourceName: "DiceOne"), UIImage(imageLiteralResourceName: "DiceTwo"), UIImage(imageLiteralResourceName: "DiceThree"), UIImage(imageLiteralResourceName: "DiceFour"), UIImage(imageLiteralResourceName: "DiceFive"), UIImage(imageLiteralResourceName: "DiceSix") ] [ rightDiceNumber ]
        
        leftDiceNumber = leftDiceNumber + 1
        rightDiceNumber = rightDiceNumber - 1
 
    }
}

Currently, our app will crash because we’re out of range, out of image to show. But it’s totally fine. Today we’ve achieved the goal of actually making our user interface do something different every time we press the roll button.

The complete rolling button game will be written in the next post.