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

Developing iOS 11 Apps with Swift - Stanfordの無料コースを iTunes U で

ポール先生のiOS11を使ったSwiftの講義です。いわゆる神経衰弱のゲームを作っていきます。まず、StoryBordでカードを作っていきます。

Buttonを配置して、バックグランドカラーを変えて、フォントも絵文字から好きなものを選び文字サイズを大きくしてわかりやすくします。

次にViewControllerと紐ずけします。

これで今作ったボタンが有効となりました。何をさせるかを関数funcで定義してやります。引数としては"emoji" と"UIButton"である"button"。"emoji"が関数の中で使われる変数となっています。"button"については押すボタンについて背景、タイトルの変更を許可します。

func flipCard(withEmoji emoji:String,on button:UIButton){
       if button.currentTitle == emoji{
           button.setTitle("", for: .normal)
           button.backgroundColor = .blue
       }else{
           button.setTitle(emoji, for: .normal)
           button.backgroundColor = .white
       }
   }

button.currentTitle == emoji

の判定で挙動を決めています。次にもう一枚カードを追加して"@IBAction"をコードに紐付けします。このとき気をつけるのが、

右側のインスペクタのようにViewControllerに2つ紐ずいてしまっているので、か片方を"×"で削除します。これは紐ずいてるものをコピペで増やす場合に起きるので気をつけないと、思った挙動にはならないです。

2枚目の@IBActionには

 @IBAction func touchSecondCard(_ sender: UIButton) {
        flipCard(withEmoji: "★", on: sender)
   }

と書きます。そしてRUNすると、カード(ボタン)を押すたびにカードの絵文字が消えたり出たりするようになります。

こんな感じになります。ボタンを押すと

button.backgroundColor = .blue

で色を変えていましたが、ここでは、

というように、"col"と打ち始めると補完候補が出てくるので、Color Literalを選んでやれば、クリックで色が選べるようになります。

全体のコードです。

class ViewController: UIViewController {
 
   @IBAction func touchCard(_ sender: UIButton) {
       flipCard(withEmoji: "✽", on: sender)
   }
   
   @IBAction func touchSecondCard(_ sender: UIButton) {
        flipCard(withEmoji: "★", on: sender)
   }
   
   func flipCard(withEmoji emoji:String,on button:UIButton){
       if button.currentTitle == emoji{
           button.setTitle("", for: .normal)
           button.backgroundColor = #colorLiteral(red: 0.6458201068, green: 0.9109983679, blue: 1, alpha: 1)
       }else{
           button.setTitle(emoji, for: .normal)
           button.backgroundColor = .white
       }
   }
   
}