見出し画像

Swiftで行こう!--スタンフォードでGame!2

引き続きゲームを作っていきます。

まずめくったカードの枚数をカウントするために変数を作ります。

var flipCount = 0

カウントはどのタイミングでするかというと、

   @IBAction func touchCard(_ sender: UIButton) {
       flipCount += 1
       
       flipCard(withEmoji: "✽", on: sender)
   }

です。そして、これを表示させたいのでラベルも作ります。Flips:0とします。コードで紐ずけもしています。

@IBOutlet weak var flipCountLabel: UILabel!

そして数字にところをカウントを表示させたいので、

 var flipCount = 0{
       didSet{
           flipCountLabel.text = "Flips:\(flipCount)"
       }
   }

"didSet"を使っています。更新があったタイミングで"flipCountLabel" に"Flips:\(flipCount)"が入っていきます。

次に、@IBActionを定義しているボタンに@IBOutletを定義します。このとく大事なのが

"Outlet Collection"に変更することです。一括でまとめて管理します。

@IBOutlet var cardButtons: [UIButton]!

となります。

ここでStoryBordの絵文字などを消して、色を調整しています。

右クリックしてこんな感じに持って行って、"cardButtons"に関連ずけをします。全てのカードが下の画像のようになっていればOK!

できていなければもう一度関連づけを行いましょう!

そして、 カードをタッチした時の動作ですが、まず絵文字の配列を作って

var emojiChoices = ["👾","🤖","👾","🤖"]

この配列の絵文字を表示させます。

 @IBAction func touchCard(_ sender: UIButton) {
       flipCount += 1
       if let cardNumber = cardButtons.firstIndex(of: sender){
          flipCard(withEmoji: emojiChoices[cardNumber], on: sender)
       }else{
           print("no")
       }

カードの番号で配列の絵文字を指定してやりたいので、"cardNumber" という変数を作っています。

Outletの"cardButtons"でカードのindex番号を取得して、それを配列の番号として "flipCard"関数に適用して絵文字を表示させています。

これで、タッチしたカードでまず、絵文字が表示され、次タッチしたら絵文字が消えるというのが実装できました。

この記事が気に入ったらサポートをしてみませんか?