iPhone版 もぐらたたきゲーム

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.2.1上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。

GPT-4とのやり取り

プロンプト

WebChatGPTというChrome拡張機能を使って聞いてみます。2024年4月現在のGPT-4ではWebChatGPTは不要です。普通に聞けばOKです。

App Inventorアプリの「もぐらたたきゲーム」って知ってる?

返答

はい、「もぐらたたきゲーム」は、MIT App Inventorを使って作成された簡単なゲームです。このゲームは、もぐらを叩くことを目的としており、App Inventorプラットフォームを使ってデザインとプログラムが行われています。このゲームの作成方法に関する情報は、MIT App Inventor 2 日本語化プロジェクトのウェブサイトで見つけることができます。[1]

まず、「もぐらたたきゲーム」を作成するには、App Inventorの[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、"MoleMash"と名前を付けます。次に、デザイン編集でScreen1のタイトルを"もぐらたたき"に変更し、モグラの画像をダウンロードします。その後、描画とアニメーションパレットからキャンバスコンポーネントをビューアーにドラッグアンドドロップし、ユーザーインターフェースパレットからラベルとボタンをドラッグアンドドロップして配置します[1]。

また、宮島健さんによるもぐらたたきゲームチュートリアルのビデオもYouTubeで見つけることができます[2]。このチュートリアルを参考にして、App Inventorで独自のもぐらたたきゲームを作成することができます。

今までのようにここでコードを書いてもらうとApp Inventorで作ったモグラたたきゲームとはだいぶ違ったものしか作ってくれないので、いったん機能をまとめてもらいます。

プロンプト

「もぐらたたきゲーム」の機能をまとめて

返答

「もぐらたたきゲーム」は、MIT App Inventorを使用して作成されたシンプルなゲームです。以下に、その主な機能をまとめました。

  1. 画面デザイン: ゲーム画面には、もぐらの画像、キャンバス、スコア表示用のラベル、リセットボタンが配置されます[1]。
  2. もぐらのアニメーション: もぐらの画像がランダムにキャンバス内で表示され、プレイヤーはそれをタップして叩くことが目的です。もぐらの画像がランダムな位置に移動し、時間経過とともに速度が上がることがあります。
  3. スコア計算: プレイヤーがもぐらを叩くたびにスコアが加算され、ラベルに表示されます。ゲームの難易度やスコアの計算方法は、プログラムをカスタマイズすることで変更可能です。
  4. リセット機能: リセットボタンを押すと、ゲームが再開され、スコアがゼロにリセットされます[1]。

このような基本的な機能を持つ「もぐらたたきゲーム」は、App Inventorの基本的な使い方やプログラミングの概念を学ぶのに適したプロジェクトです。

プロンプト

この機能を持つiPhoneアプリをXcodeとSwiftUIで作って

返答

XcodeとSwiftUIを使って、「もぐらたたきゲーム」のiPhoneアプリを作成するには、以下の手順に従ってください。

  1. Xcodeのインストールとプロジェクト作成:
  2. Xcodeをインストールし、新しいプロジェクトを作成します。プロジェクトのテンプレートは「iOS」→「App」を選択し、「Interface」で「SwiftUI」を選択します。プロジェクト名を「MoleMash」にして進みます。
  3. デザインの作成:
  4. SwiftUIでゲームのデザインを作成します。ContentView.swiftファイルを開いて、以下の要素を追加します。
    • キャンバス: ZStackを使用してもぐらの画像と背景を重ねます。
    • スコア表示用のラベル: Textを使用してスコアを表示します。
    • リセットボタン: Buttonを使用してリセット機能を実装します。
  5. もぐらのアニメーションの実装:
  6. もぐらの画像をランダムに移動させるために、@Stateプロパティを使用して位置を制御します。また、Timerを使用して一定間隔でもぐらの位置を更新します。
  7. タッチイベントの処理:
  8. もぐらの画像をタップした時にスコアを加算するために、onTapGestureを使用します。タップした座標ともぐらの画像の座標を比較して、もぐらが叩かれたかどうかを判定し、スコアを更新します。
  9. スコアの計算と表示:
  10. スコアを計算し、Text要素で表示します。もぐらを叩くたびにスコアを加算し、リセットボタンを押したらスコアをリセットします。
  11. デバッグとテスト:
  12. Xcodeのシミュレータを使用してアプリをデバッグし、必要に応じてコードの修正を行います。

このようにして、XcodeとSwiftUIを使って「もぐらたたきゲーム」のiPhoneアプリを作成することができます。

プロンプト

コードを書いて

返答

以下に、SwiftUIを使って「もぐらたたきゲーム」の基本的な部分を作成するサンプルコードを示します。このコードは、基本的なゲーム機能を実装するための簡略化されたものですので、実際のアプリ開発では、さらなる改良やエラー処理が必要になります。


import SwiftUI

struct ContentView: View {
    @State private var molePosition = CGPoint(x: 100, y: 100)
    @State private var score = 0
    @State private var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            Text("Score: \(score)")
                .font(.title)
            
            ZStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 300, height: 400)
                    .onTapGesture {
                        moveMole()
                    }
                
                Image("mole")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .position(molePosition)
                    .onTapGesture {
                        score += 1
                        moveMole()
                    }
            }
            
            Button("Reset") {
                score = 0
                moveMole()
            }
            .padding()
        }
        .onReceive(timer) { _ in
            moveMole()
        }
    }
    
    func moveMole() {
        let x = CGFloat.random(in: 50...250)
        let y = CGFloat.random(in: 50...350)
        molePosition = CGPoint(x: x, y: y)
    }
}

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

このコードでは、もぐらの画像がランダムな位置に移動し、タップするとスコアが加算されます。リセットボタンを押すと、スコアがゼロにリセットされます。ただし、このコードは簡易的なものであるため、もぐらの速度が上がる機能やゲームの難易度設定などは実装されていません。実際のアプリ開発では、これらの機能を追加するためのコードも必要になります。

これでほとんどOKなんですが、見栄えを良くするために少し調整しました。


import SwiftUI

struct ContentView: View {
    @State private var molePosition = CGPoint(x: 100, y: 100)
    @State private var score = 0
    @State private var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            Text("GPT-4 もぐらたたき")
                .font(.title)
            
            Text("Score: \(score)")
                .font(.title)
            
            ZStack {
                Rectangle()
                    .fill(Color.white)
                    .frame(width: 300, height: 400)
                    .onTapGesture {
                        moveMole()
                    }
                
                Image("mole")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .position(molePosition)
                    .onTapGesture {
                        score += 1
                        moveMole()
                    }
            }
            
            Button("Reset") {
                score = 0
                moveMole()
            }
            .padding()
        }
        .onReceive(timer) { _ in
            moveMole()
        }
    }
    
    func moveMole() {
        let x = CGFloat.random(in: 50...250)
        let y = CGFloat.random(in: 50...350)
        molePosition = CGPoint(x: x, y: y)
    }
}

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

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してMoleMashという名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

swiftのコードをContentView.swiftに貼り付けます。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

iPhoneアプリ