SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

更新 : 2024/05/02

カテゴリー : iPhoneアプリ開発, プログラミング・Web

by : It is R

SwiftUIは、2019年にアップルが発表したフレームワークです。

SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。
この入門ではXcodeを使いますので、準備をしておいてください。

今回作るのは、このようなじゃんけんゲームです。

では、早速はじめていきましょう！

使用する画像について
新規プロジェクトの作成
使用する画像を読み込む
プレビューを使う
テキストの変更
フォントの変更
縦並びのレイアウト（VStack）
ボタンを作る
ボタンを画像にする
ボタンが押されたときのアクションを加える
チョキとパーのボタンを作る
横並びのレイアウト（HStack）
ボタンを画面いっぱいに横並びにする
ゲーム全体の画面を作る
相手の手の向きを変更する
ボタンが押されたとき、自分の手の画像を切り替える
ランダムな値を取得して、相手の手の画像を切り替える
じゃんけんの勝敗を判定する
まとめ

使用する画像について

今回はこちらの画像を使います。
解凍してお使いください。

じゃんけん画像

新規プロジェクトの作成

まずは、新規プロジェクトを作成します。

Xcodeを開くと、次ような画面が表示されると思います。
この画面から、「Create a new Xcode project」をクリックします。

今回はじゃんけんゲームといえども、とてもシンプルなゲームですので、「Single View App」を選択します。

すると、次のような画面が表示されます。
たくさん入力する場所がありますが、一つずつ見ていきましょう。

まず、Project Nameには、プロジェクトの名前を入力します。今回は「Janken」と入力しました。

次にTeamなのですが、これを指定しておかないと、実機でのテストなど、できないことが出てきます。ただ、指定するにはAppleIDが必要だったりと、少々大変なので、今回は「None」の状態で進めたいと思います。（後から変更もできますので、実機テストをしたいと思ったときに、設定すればいいと思います）

Organization Nameは、組織名ですが、個人の方はニックネームを入れてあげればいいと思います。

Organization Identifierは、任意のもので構いませんが、アプリを公開するとなると、注意が必要です。
世界に一つだけのものにしなくてはいけないので、ドメインを持っている人は、それをひっくり返したものを入力します。持っていない人は、とりあえず任意のものを入力してください。

Languageは、開発言語ですので、Swiftを選択してください。

User Interfaceは、SwiftUIを選択してください。

全ての選択が終わったら、「Next」をクリックします。

すると、プロジェクトを作成する場所を選択することができます。

このとき、「Create Git repository on my Mac」の項目があります。
これは、どちらでもいいのですが、今回はGitでのバージョン管理はしないので、私はチェックを外しました。

おめでとうございます。新規プロジェクトが作成され、SwiftUIで開発する準備が整いました。

使用する画像を読み込む

では、使用する画像をプロジェクトに読み込んでいきます。

まず、ナビゲーターエリアから、「Assets.xcassets」を選びます。

もしもナビゲーターエリアが表示されていない場合は、右上のボタンで表示させることができます。

先ほどダウンロードしたファイルを、全てドラッグして、白いところにドロップします。

これで画像が読み込まれました。

プレビューを使う

SwiftUIでは、わざわざエミュレータを使わなくても、プレビューを見るだけで実行結果が分かります。

まず、ContentsView.swiftを開きます。

画像のように「Resume」をクリックします。

少々時間がかかりますが、待ちます。

スマホが表示され、その画面に「Hello,World!」と表示されれば成功です。

このプレビューですが、もし止まってしまった場合はもう一度「Resume」をクリックしてあげてください。

テキストの変更

続いて、今表示されている「Hello,World!」の文字列を変更してみましょう。
プレビュー画面上の「Hello,World!」をクリックしてください。

すると、ユーティリティエリアに表示されていたものが、ポンっと変わります。

もしもユーティリティエリアが表示されていない場合は、右上のボタンで表示させることができます。

では、テキストを変更してみましょう。
ユーティリティエリアに「Text」という項目があります。
じゃんけんゲームを作るのですから、ここはもちろん「じゃんけん」に変更します。

すると、ソースとプレビューにも反映されます。

もちろんソースを直接変更しても構いません。
もしもソースから変更したい場合は、「ContentView.swift」の5行目を「Text(“じゃんけん”)」に変更します。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("じゃんけん")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

フォントの変更

続いて、フォントを変更してみましょう。

ユーティリティエリアを見ると、「Font」という項目があります。ここで、フォントを変更することができます。

とりあえず今回は「Title」に変更してみました。

プレビューのフォントが若干大きくなりました。
さらに、ソースには.font(.title)という命令が加わっています。

数値を指定してフォントのサイズを変更する方法もありますが、ここでは割愛します。

縦並びのレイアウト（VStack）

VStackを使うと、縦並びのレイアウトにすることができます。
といっても、ここではまだTextしかないので、表示は変わりません。このあと、ボタンを作った時に反映されます。

ただ、そのままボタンを作ってしまうと、エラーになってしまうので、まずはレイアウトの指定だけしておきます。

では、ソースの「Text(“じゃんけん”)」の、Textの部分をcommandを押しながらクリックします。
そして「Embed in VStack」をクリックします。

すると、VStack {}が作られ、その中にTextが入ったと思います。

ソースは現在、こうなっております。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("じゃんけん")
                .font(.title)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ボタンを作る

つづいて、ボタンを作っていきます。

まず、.font(.title)の後ろにカーソルを移動させ、Enter(return)で改行します。

右上にある「+」をクリックします。

Buttonを選びます。

これで、ボタンが作られました。
また、VStackのおかげで「じゃんけん」の文字と「Button」というボタンが縦に並んで配置されました。

では、このボタンの文字を変更してみます。
先ほどと同じようにユーティリティエリアから変更することも可能ですが、今度はちょっと違う方法を試してみましょう。

プレビューのボタンを、commandを押しながらクリックします。
さらに表示されたメニューから、「Show SwiftUI Inspector…」をクリックします。

Textを「グー」に変更します。

これで、プレビューの文字と、ソースが書き換わりました。

ボタンを画像にする

続いて、ボタンを画像にしてみましょう。
せっかく作ったボタンですが、ちょっと改変していきます。

ソースのText("グー")を削除します。

するとエラーが発生してしまいますが、ここでは気にしません。
カーソルが、Button(action {}) {}の、後ろの{}の中にあるのを確認します。

右上にある「+」をクリックします。

表示されたウィンドウから、「Image」を探して、選択します。

これで、Image(Image Name)という命令が追加され、エラーも消えました。

Image Nameのところには、最初に読み込んだ画像ファイル名を入れます。
拡張子は入力しません。

しかし、このようにボタンが青くなってしまっていると思います。

そんなときは、レンダリングモードを指定します。
Image("b_gu")の後ろで改行し、以下の命令を入力します。

.renderingMode(.original)

これで、ボタンを画像にすることができました。

ボタンが押されたときのアクションを加える

つづいて、ボタンが押されたときのアクションを作っていきます。

さきほど作ったボタン、Button(action: {}) {/*省略/}の、最初の{}の中に作っていきます。
しかし、まだ{}が青くなった状態になっているので、ダブルクリックして、入力できるようにします。

さらにカーソルの位置を{}の中に移動し、enter(return)を押して改行します。
そこに、以下の命令を入力してください。

print("グー")

これでボタンを押すとデバッグエリアに「グー」と表示されるようになるのですが、プレビューのボタンを押しても、ボタンが選択されるだけになってしまいます。

そこでプレビューの右下にある、「▷」を右クリックし、「Debug Preview」をクリックしてください。

「Preview」の左の、くるくる回っているマークが消えるのを待ちます。

するとデバッグエリアが表示されます。

また、デバッグエリアの表示非表示は、右上のボタンから切り替えられます。

では、実際にプレビューの中の、作成したボタンをクリックしてみてください。
すると、デバッグエリアに「グー」と表示されたと思います。

これで、ボタンをつくることができました。

全体のソースはこのようになっています。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("じゃんけん")
                .font(.title)
            Button(action: {
                print("グー")
            }) {
                Image("b_gu")
                    .renderingMode(.original)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

チョキとパーのボタンを作る

さて、ここまでで、テキストとボタンを作成することができたのですが、ボタンはまだグーしかありません。

では、チョキとパーのボタンも作っていきましょう。
まず、グーボタンのソースを選択して、右クリックからコピーします。

ボタンのソースの下に、貼り付けます。

さらにその下に、もう一度貼り付けます。

これでボタンが3つになりました。

では、ソースを変更して、グーボタンを、チョキとパーのボタンに、変更していきます。
変更する箇所は画像の通りです。

今現在のソースは、このようになります。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("じゃんけん")
                .font(.title)
            Button(action: {
                print("グー")
            }) {
                Image("b_gu")
                    .renderingMode(.original)
            }
            Button(action: {
                print("チョキ")
            }) {
                Image("b_choki")
                    .renderingMode(.original)
            }
            Button(action: {
                print("パー")
            }) {
                Image("b_pa")
                    .renderingMode(.original)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

これで、それぞれのボタンを押したとき、そのボタンにあった文字が、デバッグエリアに表示されます。

横並びのレイアウト（HStack）

続いて、ボタンを横並びにしてみたいと思います。

さきほど、VStackという縦並びのレイアウトを使いました。こんどはHStackを使って、横並びのレイアウトを作ってみます。

VStackとHStackを組み合わせて、さまざまなレイアウトを作ることが可能です。

では、先ほど作った3つのボタンを、HStack {}の{}に入れるように書いていきます。

ContentView.swift

/** 省略 */
HStack {
    Button(action: {
        print("グー")
    }) {
        Image("b_gu")
            .renderingMode(.original)
    }
    Button(action: {
        print("チョキ")
    }) {
        Image("b_choki")
            .renderingMode(.original)
    }
    Button(action: {
        print("パー")
    }) {
        Image("b_pa")
            .renderingMode(.original)
    }
}
/** 省略 */

これで、ボタンを横並びにすることができます。

ボタンを画面いっぱいに横並びにする

3つのボタンが横並びになったわけですが、このままではスマホの画面からはみ出てしまっています。
さらに、端末によっては、画面のわりに小さなボタンになってしまったりします。

そんなときに使うのが.resizable()です。
これを使うことで、画像サイズを変更することが可能になります。

3箇所のそれぞれの画像の、.renderingMode(.original)の下に入力します。

/** 省略 */
Button(action: {
    print("グー")
}) {
    Image("b_gu")
        .renderingMode(.original)
        .resizable()    //追加
}
Button(action: {
    print("チョキ")
}) {
    Image("b_choki")
        .renderingMode(.original)
        .resizable()    //追加
}
Button(action: {
    print("パー")
}) {
    Image("b_pa")
        .renderingMode(.original)
        .resizable()    //追加
}
/** 省略 */

すると、このようになります。
画像は画面いっぱいになったものの、比が崩れ、よくない見た目になってしまいました。

そんなときは、.scaledToFit()を使いましょう。
これを使うことで、アスペクト比を維持しながらリサイズすることができます。

先ほど追加した、.resizable()の下に追加しましょう。

Button(action: {
    print("グー")
}) {
    Image("b_gu")
        .renderingMode(.original)
        .resizable()
        .scaledToFit()    //追加
}
Button(action: {
    print("チョキ")
}) {
    Image("b_choki")
        .renderingMode(.original)
        .resizable()
        .scaledToFit()    //追加
}
Button(action: {
    print("パー")
}) {
    Image("b_pa")
        .renderingMode(.original)
        .resizable()
        .scaledToFit()    //追加
}

これで、画面の横いっぱいにボタンを並べることができました。

今現在のソースは、このようになっています。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("じゃんけん")
                .font(.title)
            HStack {
                Button(action: {
                    print("グー")
                }) {
                    Image("b_gu")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("チョキ")
                }) {
                    Image("b_choki")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("パー")
                }) {
                    Image("b_pa")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ゲーム全体の画面を作る

さて、以上のことが分かれば、ゲーム全体の画面をだいたい作ることができます。

では、相手の顔の画像を表示させます。
相手の顔は、画面の一番上に表示させたいので、VStack{}の一番上に作っていきます。

右上の「+」をクリックします。

「Image」を選択します。

Image(Image Name)の()の中を、「”face”」に変更します。

さらに、画面に合わせて大きさを変更したいので、先ほどのように、.resizable()と.scaledToFit()を指定します。
入力する場所は、Image("face")の下です。

さて、今度は手を表示させていきます。
今作成した、顔の画像を表示するソースをコピーします。

Text("じゃんけん").font(.title)の上と下に貼り付けます。

今作成したところの、2箇所のfaceは、とりあえず「gu」に変更しておきます。

これで、じゃんけんゲームの大まかな形ができました。

今現在のソースは、このようになっております。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("face")
                .resizable()
                .scaledToFit()
            Image("gu")
                .resizable()
                .scaledToFit()
            Text("じゃんけん")
                .font(.title)
            Image("gu")
                .resizable()
                .scaledToFit()
            HStack {
                Button(action: {
                    print("グー")
                }) {
                    Image("b_gu")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("チョキ")
                }) {
                    Image("b_choki")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("パー")
                }) {
                    Image("b_pa")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

相手の手の向きを変更する

このままでは、自分の手と相手の手が同じ向きなので、パッと見たとき、どっちがどっちの手か分かりにくいです。

そこで、相手の手の向きを回転させてみましょう。

画像の回転には、.rotationEffect(Angle(degrees: 角度))を使い、「角度」には数値を入れます。

実際には、このように入力します。

/** 省略 */
Image("face")
    .resizable()
    .scaledToFit()
Image("gu")
    .resizable()
    .scaledToFit()
    .rotationEffect(Angle(degrees: 180))    //追加
Text("じゃんけん")
    .font(.title)
/** 省略 */

これで、手の画像を180度回転させることができます。

コードの全体は、このようになります。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("face")
                .resizable()
                .scaledToFit()
            Image("gu")
                .resizable()
                .scaledToFit()
                .rotationEffect(Angle(degrees: 180))
            Text("じゃんけん")
                .font(.title)
            Image("gu")
                .resizable()
                .scaledToFit()
            HStack {
                Button(action: {
                    print("グー")
                }) {
                    Image("b_gu")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("チョキ")
                }) {
                    Image("b_choki")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("パー")
                }) {
                    Image("b_pa")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ボタンが押されたとき、自分の手の画像を切り替える

続いて、ボタンが押されたときに、自分の手の画像が切り替わるようにしてみます。

そんなときに使えるのが、変数と条件分岐です。
では、struct ContentView: View {}の一番上に、次の命令を入力します。

@State private var playerHand = 0

＠Stateをつけることによって、値を変更することが可能になります。

今回は、勝敗のプログラムが作りやすいように、数値で、なにを出したか、を管理するようにします。

0はグー、1はチョキ、2はパーです。

そして、自分の手の画像を表示している部分は、次のようにして、画像が切り替わるようにします。

/** 省略 */

/** 自分の手 */
if(playerHand == 0) {
    Image("gu")
        .resizable()
        .scaledToFit()
} else if(playerHand == 1) {
    Image("choki")
        .resizable()
        .scaledToFit()
} else if(playerHand == 2) {
    Image("pa")
        .resizable()
        .scaledToFit()
}

/** 省略 */

さらに、ボタンを押したとき、変数の数値が変わるようにします。

/** 省略 */

/** ボタン */
HStack {
    Button(action: {
        print("グー")
        self.playerHand = 0;        //追加
    }) {
        Image("b_gu")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    Button(action: {
        print("チョキ")
        self.playerHand = 1;        //追加
    }) {
        Image("b_choki")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    Button(action: {
        print("パー")
        self.playerHand = 2;        //追加
    }) {
        Image("b_pa")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
}

/** 省略 */

すると、ボタンを押すたびに、手の画像が切り替わるようになりました。

全体のソースは、このようになります。
分かりやすいように、コメントも入れました。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var playerHand = 0
    var body: some View {
        VStack {
            
            /** 顔 */
            Image("face")
                .resizable()
                .scaledToFit()
            
            /** 相手の手 */
            Image("gu")
                .resizable()
                .scaledToFit()
                .rotationEffect(Angle(degrees: 180))
            
            /** 文字 */
            Text("じゃんけん")
                .font(.title)
            
            /** 自分の手 */
            if(playerHand == 0) {
                Image("gu")
                    .resizable()
                    .scaledToFit()
            } else if(playerHand == 1) {
                Image("choki")
                    .resizable()
                    .scaledToFit()
            } else if(playerHand == 2) {
                Image("pa")
                   .resizable()
                   .scaledToFit()
            }
            
            /** ボタン */
            HStack {
                Button(action: {
                    print("グー")
                    self.playerHand = 0;
                }) {
                    Image("b_gu")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("チョキ")
                    self.playerHand = 1;
                }) {
                    Image("b_choki")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("パー")
                    self.playerHand = 2;
                }) {
                    Image("b_pa")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ランダムな値を取得して、相手の手の画像を切り替える

ここまでくると、早く相手の手も切り替わるようにしたいですね。
しかし、相手の手はランダムに切り替わるようにしたいです。

それならば、ランダムな値を取得し、その数値によって、それぞれの画像に切り替わるようにしてみましょう。

ランダムな数値を作るのは、以下のようなプログラムです。
この命令は、0~2までの整数の数値を、randamという変数に代入するものです。

let random = Int.random(in: 0..&lt;3)

では、この命令を使って、コンピュータが出す手を選ぶための関数を作ってみましょう。

関数は以下のように作ります。
これで、コンピュータがなにを出すか、0〜2までの数値がランダムに選ばれます。

func chooseComputerHand() -> Int {
    let random = Int.random(in: 0..&lt;3)
    let computerHand = random
    return computerHand
}

この関数を、ボタンが押されたときの部分から呼び出します。

ContentView.swift

/** 省略 */

/** ボタン */
HStack {
    Button(action: {
        print("グー")
        self.playerHand = 0;
        self.computerHand = chooseComputerHand();        //追加
        
    }) {
        Image("b_gu")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    Button(action: {
        print("チョキ")
        self.playerHand = 1;
        self.computerHand = chooseComputerHand();        //追加
    }) {
        Image("b_choki")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    Button(action: {
        print("パー")
        self.playerHand = 2;
        self.computerHand = chooseComputerHand();        //追加
    }) {
        Image("b_pa")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
}

/** 省略 */

さらに、computerHandに入っている数値によって、相手の手の画像も切り替わるようにします。

ContentView.swift

/** 省略 */

/** 相手の手 */
if(computerHand == 0) {
    Image("gu")
        .resizable()
        .scaledToFit()
        .rotationEffect(Angle(degrees: 180))
}
if(computerHand == 1) {
    Image("choki")
        .resizable()
        .scaledToFit()
        .rotationEffect(Angle(degrees: 180))
}
if(computerHand == 2) {
    Image("pa")
        .resizable()
        .scaledToFit()
        .rotationEffect(Angle(degrees: 180))
}

/** 省略 */

まだ、変数computerHandの宣言をしていないので、@State private var computerHand = 0を、playerHandの宣言の下に入力しておきます。

そして、現在のソースはこのようになります。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var playerHand = 0
    @State private var computerHand = 0
    var body: some View {
        VStack {
            
            /** 顔 */
            Image("face")
                .resizable()
                .scaledToFit()
            
            /** 相手の手 */
            if(computerHand == 0) {
                Image("gu")
                    .resizable()
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 180))
            }
            if(computerHand == 1) {
                Image("choki")
                    .resizable()
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 180))
            }
            if(computerHand == 2) {
                Image("pa")
                    .resizable()
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 180))
            }
            
            /** 文字 */
            Text("じゃんけん")
                .font(.title)
            
            /** 自分の手 */
            if(playerHand == 0) {
                Image("gu")
                    .resizable()
                    .scaledToFit()
            } else if(playerHand == 1) {
                Image("choki")
                    .resizable()
                    .scaledToFit()
            } else if(playerHand == 2) {
                Image("pa")
                   .resizable()
                   .scaledToFit()
            }
            
            /** ボタン */
            HStack {
                Button(action: {
                    print("グー")
                    self.playerHand = 0;
                    self.computerHand = chooseComputerHand();
                    
                }) {
                    Image("b_gu")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("チョキ")
                    self.playerHand = 1;
                    self.computerHand = chooseComputerHand();
                }) {
                    Image("b_choki")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("パー")
                    self.playerHand = 2;
                    self.computerHand = chooseComputerHand();
                }) {
                    Image("b_pa")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

func chooseComputerHand() -> Int {
    let random = Int.random(in: 0..&lt;3)
    let computerHand = random
    return computerHand
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

これで、相手もランダムに手を変えてくるようになりました。

じゃんけんの勝敗を判定する

いよいよ、じゃんけんの勝敗を判定するプログラムを作っていきます。

じゃんけんを判定する関数を作ります。
このようにすると、じゃんけんの勝敗を判定することができます。

func determineVictoryOrDefeat(playerHand:Int, computerHand:Int) -> String {
    var result = ""
    var playerHandTemp = playerHand
    playerHandTemp+=1

    if (playerHand == computerHand) {
        result = "ぽん……あいこです";
    }
    else if ((playerHand == 2 &amp;&amp; computerHand == 0)||(playerHandTemp == computerHand)) {
        result = "ぽん……あなたの勝ちです";
    }
    else {
        result = "ぽん……あなたの負けです";
    }
    return result
}

では、今作った関数を、ボタンを押したときの部分から呼び出します。

ContentView.swift

/** 省略 */

/** ボタン */
HStack {
    Button(action: {
        print("グー")
        self.playerHand = 0;
        self.computerHand = chooseComputerHand();
        self.text = determineVictoryOrDefeat(playerHand:self.playerHand, computerHand:self.computerHand)        //追加
        
    }) {
        Image("b_gu")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    Button(action: {
        print("チョキ")
        self.playerHand = 1;
        self.computerHand = chooseComputerHand();
        self.text = determineVictoryOrDefeat(playerHand:self.playerHand, computerHand:self.computerHand)        //追加
    }) {
        Image("b_choki")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
    Button(action: {
        print("パー")
        self.playerHand = 2;
        self.computerHand = chooseComputerHand();
        self.text = determineVictoryOrDefeat(playerHand:self.playerHand, computerHand:self.computerHand)        //追加
    }) {
        Image("b_pa")
            .renderingMode(.original)
            .resizable()
            .scaledToFit()
    }
}

/** 省略 */

さらに、「じゃんけん」の文字を変えたいので、text変数に「じゃんけん」という文字列を代入し、それを表示するようにします。
computerHandの宣言の下に、@State private var text = "じゃんけん"を入力して、textの宣言と代入をします。

そして、Text("じゃんけん")の部分は、Text(text)に書き換えます。

/** 文字 */
Text(text)
    .font(.title)

すると、さきほどのプログラムで、determineVictoryOrDefeat()関数が呼ばれた結果がtext変数に代入されるようになっているので、「じゃんけん」の文字が、結果の文字に切り替わるようになります。

さて、これでじゃんけんゲームの完成です。
さいごに、完成したソース全体になります。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State private var playerHand = 0
    @State private var computerHand = 0
    @State private var text = "じゃんけん"
    var body: some View {
        VStack {
            
            /** 顔 */
            Image("face")
                .resizable()
                .scaledToFit()
            
            /** 相手の手 */
            if(computerHand == 0) {
                Image("gu")
                    .resizable()
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 180))
            }
            if(computerHand == 1) {
                Image("choki")
                    .resizable()
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 180))
            }
            if(computerHand == 2) {
                Image("pa")
                    .resizable()
                    .scaledToFit()
                    .rotationEffect(Angle(degrees: 180))
            }
            
            /** 文字 */
            Text(text)
                .font(.title)
            
            /** 自分の手 */
            if(playerHand == 0) {
                Image("gu")
                    .resizable()
                    .scaledToFit()
            } else if(playerHand == 1) {
                Image("choki")
                    .resizable()
                    .scaledToFit()
            } else if(playerHand == 2) {
                Image("pa")
                   .resizable()
                   .scaledToFit()
            }
            
            /** ボタン */
            HStack {
                Button(action: {
                    print("グー")
                    self.playerHand = 0;
                    self.computerHand = chooseComputerHand();
                    self.text = determineVictoryOrDefeat(playerHand:self.playerHand, computerHand:self.computerHand)
                    
                }) {
                    Image("b_gu")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("チョキ")
                    self.playerHand = 1;
                    self.computerHand = chooseComputerHand();
                    self.text = determineVictoryOrDefeat(playerHand:self.playerHand, computerHand:self.computerHand)
                }) {
                    Image("b_choki")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
                Button(action: {
                    print("パー")
                    self.playerHand = 2;
                    self.computerHand = chooseComputerHand();
                    self.text = determineVictoryOrDefeat(playerHand:self.playerHand, computerHand:self.computerHand)
                }) {
                    Image("b_pa")
                        .renderingMode(.original)
                        .resizable()
                        .scaledToFit()
                }
            }
        }
    }
}

func chooseComputerHand() -> Int {
    let random = Int.random(in: 0..&lt;3)
    let computerHand = random return computerHand
}

func determineVictoryOrDefeat(playerHand:Int, computerHand:Int) -> String {
    var result = ""
    var playerHandTemp = playerHand
    playerHandTemp+=1

    if (playerHand == computerHand) {
        result = "ぽん……あいこです";
    }
    else if ((playerHand == 2 &amp;&amp; computerHand == 0)||(playerHandTemp == computerHand)) {
        result = "ぽん……あなたの勝ちです";
    }
    else {
        result = "ぽん……あなたの負けです";
    }
    return result
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}