見出し画像

ChatGPT DALL-E3で美少女四目並べゲーム制作がわりと大変だった件

秋葉原IT戦略研究所

作成していたChatGPT DALL-E3制作での四目並べゲーム「しずくと四目並べしよ！」が4面とエンディングまで完成しました。

一通りプレイできる状態になったかと思います。
あとはサウンドやTOP画面などを追加しようかと思っています。

備忘録として前回の記事から追加した機能等をChatGPT先生とどうやって作成したかを書いておきます。ChatGPTでのゲーム制作に役にたつのではと思います。

前回の記事



前提

有料版のChatGPT4とDALL-Eを使っています。

1. 仕様の管理

ChatGPTとプログラミングを進めていく上で仕様の目次をつくって進めるのがおすすめというのは前回の記事でも書きました。ChatGPTに「仕様-10. 画像のプレローディングを書いて」というと書いてくれますし、後から仕様を出力するのにも便利なのでこれはやったほうがよいです。

仕様のファイル管理


私はルートフォルダにdocフォルダをつくり仕様の章ごとにマークダウンを用意し、そのまとめとなるファイルに今後の開発したい要件のタイトルを管理していました。
各章のマークダウンには私がChatGPTに聞いた質問とその回答を重要なものだけコピペしています。

実装が終わった仕様と、今後開発する仕様をまとめておく
ChatGPT先生とすすめていく仕様のファイル管理　ChatGPTの回答を適当にまとめておく

仕様のタイトルを後からChatGPT先生に出力してもらう

こうやって仕様を番号管理することである程度実装が終わったところで仕様をあとから出力してもらうことが可能です

現在の仕様の目次をだしてみてください
13. ゲームレベルに応じた先手後手の管理と初期化処理
のようなやつです

了解しました。以下が1から17までの仕様目次のテキストリストです。

1. ゲームの基本設定と初期化
2. プレイヤーとCPUの駒の設定
3. ゲーム盤の描画と管理
4. ターン制御と勝利条件のチェック
5. ゲームレベルに応じたCPUの動き
6. プレイヤーの入力受付と駒の配置
7. 勝利時の演出とゲーム終了処理
8. ゲームレベルとシナリオの進行
9. リワードシステムと進行状況の保存
10. サウンドとミュージックの管理
11. エンディングシナリオと特別演出
12. UI/UXの改善とアクセシビリティ
13. 先手と後手の管理とゲームレベル管理
14. リワードシナリオ終了時に次のゲームレベルへの移行
15. ゲームのスタートと盤面の設定
16. プレイヤーの入力とゲームの進行
17. ゲームクリア時のエンディング演出

ChatGPT

今回は目次の識別子をはっきりと決めていなかったので少しずれていますがこういった感じで後から仕様を出力させるときにも便利です。

2. スパルタ教師ChatGPT先生「おめーのバグだろうがぁゴルあぁ、バグは自分で直せ」

基本的にChatGPT先生から言われた通りにコードをコピペするのですが、たまに動かない場合があります。なので今のコードの全コード（HTML/CSS/JS）をはりつけて
「どこがおかしいのか教えてよ！ChatGPT先生！むしろ、先生が直してよ！」というと最初はバグをみつけてくれて直してくれるのですがコードが複雑になってくると、ChatGPT先生は自分でバグを見つけることもせず
「お前がデバッグせい」と言い始めます。ちなみにJSは1000行コードぐらいになっていますがだいたい500行超えたあたりからこの傾向がでてきました。
下記は「プレイヤーがCPUに負けたときにそのレベルからゲームが再開できる」機能をChatGPTに言われるとおり実装したがうまく動かなかったときのChatGPTへの質問

実装したのですが
continueボタンを押すとcontinueGameは実行されているようですが
gameOver　retryText　が消えず2回おさないといけなくなっています
原因はわかりますか？


document.addEventListener("DOMContentLoaded", function () {
    // ゲームレベルの変数を定義
    let gameLevel = 0;

    const cpuMoves = {
        1: cpuMoveLevel3,
        2: cpuMoveLevel3,
        3: cpuMoveLevel4,
        4: cpuMoveLevel4
〜〜略

問題を解決するために、以下の確認と修正を行ってください：

continueGame 関数が呼び出された際に、gameOver と retryText 要素が DOM に存在することを確認してください。これらの要素がすでに存在しない場合、削除しようとするコードは効果がありません。

要素の削除方法が正しいかを確認してください。Element.remove() メソッドは、要素を DOM から完全に削除するための現代的で正しい方法です。

gameOver と retryText 要素が実際に画面上に表示されているものと同じIDを持っていることを確認してください。IDが異なる場合、正しい要素を参照していないことになります。

もし gameOver と retryText が画面上に残っている場合、それらが新たに追加された要素であり、削除を試みている要素とIDが異なる可能性があります。この場合、生成される要素に一意の識別子をつけるか、生成される度に前の要素を確実に削除するロジックを追加する必要があります。

もし continueGame 関数が非同期的な処理の後で呼ばれている場合（例えば、setTimeout でラップされているなど）、非同期処理が完了する前に要素を削除しようとしている可能性があります。この場合、非同期処理の中で要素を削除するようにコードを移動する必要があります。

上記の確認を行った後も問題が解決しない場合は、問題を再現できる最小のコード例を作成し、そのコードを検証することをおすすめします。また、ブラウザの開発者ツールを使用して、要素が正しく削除されていない理由をデバッグすることも有効です。

デバッグをすすめてくるChatGPT先生

3. サイコパス教師ChatGPT先生 「私が書いたコードもお前が直せ」

現在の「しずくと四目並べしよ！」の最難関難易度であるCPUレベル4のアルゴリズムもChatGPT先生が書いてくれたのですが彼が書いたコードは四目ならべのルールを守っていませんでした。

しずく(CPU)=青がルール無視している
テストをおこなっていますが
CPUの駒が「四目並べのルールをまもっていません」
CPU4のアルゴリズムに問題があると思いますので確認お願いします
現在のコードと
バグがおきているスクリーンショットを添付します



    // ここからCPUレベル4の実装
    function evaluateBoard(board, player) {
        let score = 0;
        const PLAYER1 = 1; // プレイヤー
        const PLAYER2 = 2; // CPU
〜略

画像の内容を見る限り、CPUが生成した手が四目並べのルールに違反している可能性があります。これは、CPUが勝利を阻止する手を探す際に、勝利の条件を満たすような手（例えば4つのコマが連続して並ぶ）を誤って選択していることを示唆しています。

提供されたコードをレビューすると、findStrategicBlockMove 関数がプレイヤーの勝利を阻止するための手を探す役割を担っていますが、ここでのロジックが不完全かもしれません。具体的には、この関数が他のプレイヤー（PLAYER1）が勝利する直前の手をブロックすることを目的としていますが、その実装方法によっては、実際にはブロックではなく自分の勝利をもたらす手を選んでしまう可能性があります。

問題を解決するためには、以下のステップでデバッグを行うことをお勧めします：合法手の生成: generateLegalMoves 関数が正しく全ての合法手を生成しているかを確認します。
盤面評価関数: evaluateBoard が各手のスコアを正しく計算しているかを確認します。
最適な手の選択: chooseBestMove 関数が最もスコアが高い手を選択しているかを確認します。
ブロック手の評価: findStrategicBlockMove が実際にプレイヤーの勝利を阻止する手を選択しているかを確認します。特に、この関数内でcheckWin 関数を呼び出している箇所を見直す必要があります。勝利条件のチェックは正しいプレイヤー（PLAYER1）に対して行われているか、またその手が実際にはCPU（PLAYER2）の勝利をもたらしていないかを検証する必要があります。
CPUの動き: cpuMoveLevel4 関数が適切にblockMove と bestMove を選択して実行しているかを確認します。


以上の点を確認し、必要に応じてコードを修正してください。特に、findStrategicBlockMove 関数でプレイヤー1の勝利をブロックする手を選択する際には、その手が自分の勝利をもたらすものではないことを保証するロジックを追加する必要があります。また、コードのロジックが期待どおりに機能しているかを確認するために、単体テストやデバッグ出力を多用することも検討してください。

自分が書いたコードを他人事のように指摘し始めるサイコパス教師 ChatGPT先生

私は思いました「お前のバグだろうが！」

あなたがコードを修正することはできますか

私の機能にはコードの修正を直接行うことは含まれていませんが、コードの問題を特定し、修正するための提案を行うことはできます。問題のある部分を特定して、どのように修正すべきかのアドバイスを提供できます。

cpuMoveLevel4 関数での問題を解決するためには、以下のアプローチを試みることができます：
〜略
問題が発生している具体的なコードの部分について詳細を提供いただければ、より具体的な修正案を提案することが可能です。

急にコードを修正する機能はないと言い出すChatGPT

結局私がCPUレベル4のコードをレビューしてデバックしおかしいところを治すはめになりました。まさにこんな感じです

有名なコードを見つめるプログラマー猫

これではChatGPT先生から教えてもらってコードを書く立場が逆転し、ChatGPTが書いたコードをレビューするのが私になってしまいました。
コードが複雑化するとこういうふうになるというのはいい経験になりました。

4. エンディングの演出

17. ゲームクリア時のエンディング演出

次にゲームクリア時演出を考えたいと思います。
ここではゲームクリアとはゲームの全レベルをクリアした場合のことを指します。
現在はゲームレベル1~4までありますので4をプレイヤーがクリアした場合の特別演出を考えたいと思います。
（ただしゲームレベルは追加される必要があるのでJSのロジックとしては最後のレベルという処理にする）
)

# ゲームエンディングのアイデア
- 1. しずくが「おめでとう全レベルクリアだよ！」という　（dialogueContent）
- 2. ゲームエンディング用のリワードCGが見れる
- 3. スタッフロールが流れる
- 4. 花びらがまうような演出やクラッカーがなっているような演出がでる（HTMLやJSの機能で実装）

# 機能としての必要な要件
- ゲームエンディングを見終わるとユーザーの操作は受け付けなくする（全クリックの無効化)


まずは上記を見て、今のゲーム仕様やプログラムを鑑みて最適なゲームエンディングのアイデアをください。上記に書いてあるもの以外でももちろんかまいません

すると素直にライブラリを使わないコードでごりごり書いてくれます

花吹雪、スタッフロールの作成(HTML/JSで実装)

下記のようなものを教えてくれます

.ending-petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url('path_to_petal_image.png'); /* 花びらの画像 */
    background-size: cover;
    opacity: 0;
    animation: fall 10s linear infinite;
}

/* 花びらが落ちるアニメーション */
@keyframes fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(800px) rotate(360deg); opacity: 0; }
}

/* クラッカーが弾けるアニメーション */
@keyframes pop {
    0% { transform: scale(0); }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

花びらの画像は自分で用意せい！とのことなのでChatGPT DALL-E3で作成します

DALL-E3が気をつかってくれて透過PNGもどきにしてくれる世界一意味のない画像

「ゲーム用の画像がほしいやが」というと上記のような画像を出力しますが
これは透過PNGでないのでまったく意味がない画像です。DALL-E3で一番直してほしい機能です（透過PNGを出力してほしい）。
「背景は白でいいです」というとなおります

この画像も透過PNGではないのでiPhoneに移して写真アプリで葉のみ切り取って開発Macに戻しすという作業をおこないました。

スタッフロールの演出

スタッフロールに関してもライブラリを使わずにHTML/JSで実行する方法をおしえてくれます

スタッフロールを表示するためには、エンディングCGが表示された後にスタッフロールが流れるようなアニメーションを追加する必要があります。以下のステップで実装を進めることができます。スタッフロールのHTMLを追加：まず、スタッフロールを表示するためのコンテナとなるdivをHTMLに追加します。このコンテナは初期状態では非表示にしておき、JavaScriptで表示を切り替えます。
CSSでスタイリング：スタッフロールのテキストが上から下へと流れるアニメーションをCSSで定義します。これは@keyframesを使ってtransformプロパティをアニメートすることで実現できます。
JavaScriptでアニメーションを制御：エンディングシナリオが表示された後に、JavaScriptを使用してスタッフロールコンテナの表示をblockに変更し、アニメーションを開始します。アニメーションが終了したら、エンディングエフェクトのアニメーションを開始します。
以下は、このプロセスに基づく実装例です。

略

GPT先生

ライブラリを使わずにEDの演出ができました

GPT4-Vは心理的にも便利、不安を解消する

うまく動かないときはゲームのスクリーンショットをあげて質問する

どこまで画像の中身を理解しているかはわからないものの、成果物の画像をあげて「ここ動かないよ！GPTえもん！」と相談できるのは開発の心理的負担を大幅に軽減してくれます。GPT4-V（画像のアップロード）はどんどん使いましょう。

5. 開発環境まわりに関しての細かいテクニックも教えてくれる

仕様をdocフォルダで管理しているのを最初に述べましたがそのファイルを更新するたびにサーバーにリロードが走るのでなんとかならないかをChatGPT先生に聞きました

現在 ルートディレクトリのdocフォルダに仕様などをかきためているのですが
VScodeの「Open with Live Server」がdocの更新を監視してしまって更新のたびにリロードが走るのですが
これを防ぐ方法はありますか？
docを監視対象外にしたいのですが

そうすると答えてくれます

VS Codeの「Live Server」はデフォルトでプロジェクトのルートディレクトリ内のファイルの変更を監視しています。特定のディレクトリを監視対象から外すには、liveServer.settings.ignoreFiles設定を.vscode/settings.jsonファイルに追加することでカスタマイズできます。

以下の手順でdocフォルダの監視を無効にしてみてください：VS Codeのルートディレクトリに.vscodeフォルダを作成します（既に存在する場合はそのまま使用します）。
.vscodeフォルダ内にsettings.jsonファイルを作成または開きます。
~略

ChatGPT先生

デプロイ先のvercelにdocフォルダの仕様はデプロイしたくないので「なんとかならんか」と聞いたら答えてくれます

できました！
同じくvercelにデプロイしているのですが
docフォルダはデプロイ対象外にしたいのですが方法はありますか

Vercelで特定のファイルやディレクトリをデプロイから除外するには、プロジェクトのルートに.vercelignoreファイルを作成し、デプロイから除外したいファイルやディレクトリのパスを指定します。

以下の手順でdocフォルダをデプロイ対象外に設定できます：プロジェクトのルートディレクトリに.vercelignoreファイルを新規作成します。
.vercelignoreファイルに以下の内容を追加します：

ChatGPT

んーもうこれプログラミングにGoogle検索いりませんね。
間違いなく前だと検索画面開いてどこかのブログ開いて、みつからないから別のブログみて・・を繰り返していたのが超高速で解決してしまいます。

結論

ChatGPT先生と作る四目ならべゲーム制作体験記でした。
複雑なアルゴリズムが絡むとChatGPT4先生でも一筋縄ではいかないことがわかりました。それでも開発スピードは従来の数倍にはなったと感じます。
まだまだプログラマーの手がいる部分もあるのでどんどん進化してゲーム制作が楽になり人間はクリエイティブな部分に集中できる時代になることを期待したいところ。

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