ChatGPT Workでブラウザゲームを作ってみた｜Codexで作ったペットが主人公！

本記事はアフィリエイト広告（PR）を含みます。掲載しているサービスは実際に使用・検証した上でご紹介しています。

ChatGPT Workを使えば、Webサイトだけでなくゲームまで作れるのかな？と思ったことはありませんか？

前回は、ChatGPT Workを使って美容室のデモサイトを制作しました。企画からコーディング、公開までをAIと一緒に進められたことで、「もっといろいろ作ってみたい！」という気持ちが強くなりました。

そこで今回は、以前ブロともさんの記事を参考に作成したCodexペットを主人公にして、45秒で遊べるブラウザゲームを作ってみることにしました。

最初はシンプルに「玉ねぎを拾うだけ」のゲームでしたが、実際に遊んでみると「もう少し面白くできそう」と感じ、ChatGPTと相談しながらルールを少しずつ改良。コンボやボーナス、お辞儀イベントなどを追加し、何度も調整を繰り返して完成させました。

この記事では、ゲームのアイデア出しから指示書の作成、Workでの実装、Netlifyで公開するまでの流れを、実際の制作過程とあわせてご紹介します。

ゲーム制作というと難しそうなイメージがありますが、AIと一緒に進めると想像以上に気軽に挑戦できます。これからChatGPT WorkやCodexを使って作品を作ってみたい方の参考になれば嬉しいです。

（作成したゲームURLはこちら→）https://courageous-alpaca-97960c.netlify.app/
ブラウザだけで遊べるので、スマホでもPCでもそのままプレイできます。

はじめに

以前、ブロともさんの記事を参考に、Codexのスキル機能を使ってデスクトップで動くペットを作ってみました。

↓こちらの記事をみてペットを作りました♪
https://mukiguri.com/codex-pets-custom-hatch

ペットのオニヨンヌです↓

codexで作ったペットです。玉ねぎ劇場のキャラクターのオニヨンヌちゃん

「せっかく動くキャラクターができたなら、このペットを使ってゲームも作れるのでは？」と思い、今回はそのキャラクターを主人公にしたブラウザゲーム制作に挑戦してみました。

今回は、ChatGPTでアイデア出しから仕様を考え、ChatGPT Workで実際にゲームを作成しています。

まずはChatGPTでゲームの企画を考える

いきなりWorkへ指示するのではなく、まずはChatGPTでどんなゲームにするか相談しました。

最初に考えたのは、とてもシンプルなゲームです。

上から玉ねぎだけが落ちてくる
左右に移動して拾う
30秒で終了

まずは「ちゃんとゲームとして遊べるもの」を目標にしました。

指示書を作ってChatGPT Workへ

ゲームの内容が決まったら、そのままWorkへ渡せるように指示書を作成しました。

チャット欄に作成したペットのZIPファイルをそのまま添付して、これを使って先ほどの設計でゲームを作成したいです。指示書を作成してください。とチャット欄に書き込めばOKです。

今回はスマホでも遊べるように、

PC・スマホ両対応
タッチ操作対応
ブラウザだけで遊べる

という内容も最初から盛り込みました。

（最初の指示書　　※長文です）

玉ねぎ劇場ゲーム制作指示書

既存のペット素材「オニヨンヌ」を主人公として使い、スマートフォンとPCの両方で遊べる30秒のブラウザゲームを作成してください。
まずは背景や装飾を簡易表示にして、ゲームの基本動作を完成させてください。背景画像や追加素材は、動作確認後にこちらから渡します。
1．使用する既存素材
添付したペット素材一式を使用してください。
spritesheet.webp
pet.json
既存のアニメーション設定
各種プレビューGIF
新しい主人公画像を生成せず、既存のオニヨンヌのデザインとアニメーションをできるだけ維持してください。
使用する動きの想定は以下です。
待機中：idle
右移動：running-right
左移動：running-left
拍手への反応：利用可能なアニメーションから最も自然なものを使用
失敗・終了時：failedまたは適切な既存アニメーション
既存素材にお辞儀の動きがない場合は、画像を作り直さず、CSSの回転・縮小・移動を使って簡単なお辞儀アニメーションを作ってください。
2．ゲームタイトル
玉ねぎ劇場
サブタイトル：
今日も主役は玉ねぎ。
3．ゲーム概要
舞台の上をオニヨンヌが左右に移動し、上から落ちてくる玉ねぎを拾うゲームです。
制限時間は30秒です。
30秒が経過すると公演終了となり、緞帳が閉じる演出のあとにスコアを表示します。
4．基本ルール
ゲーム時間は30秒
上空から玉ねぎをランダムに落下させる
オニヨンヌが玉ねぎに触れると取得
通常の玉ねぎは10点
ときどき大きな玉ねぎが落ちてくる
大きな玉ねぎは50点
取得した玉ねぎは画面から消える
地面まで落ちた玉ねぎも画面から消える
ゲームオーバーは設けず、30秒で必ず公演終了
「もう一度遊ぶ」ボタンで再スタート可能
最初は落下速度を速くしすぎず、初めて遊ぶ人でも玉ねぎを取得できる難易度にしてください。
5．拍手イベント
ゲーム中にランダムで1〜2回、観客の拍手イベントを発生させてください。
拍手イベント発生時は、画面中央付近に次の表示を出します。
👏 拍手！お辞儀をしてください
拍手開始から約2秒以内に、お辞儀操作が行われた場合は成功です。
成功：30点加算
失敗：減点はしない
成功時：「ありがとうございます」
失敗時：「拍手は静かに去っていきました」
お辞儀中は約0.7秒間、左右移動できないようにしてください。
拍手イベントが玉ねぎ取得の邪魔になりすぎないよう、短い演出にしてください。
6．操作方法
PC
左移動：左矢印キーまたはAキー
右移動：右矢印キーまたはDキー
お辞儀：スペースキー
スマートフォン
ゲーム画面の下に、次の3つのタッチボタンを固定表示してください。
左へ移動
お辞儀
右へ移動
左右ボタンは、押している間だけ継続して移動する仕様にしてください。
タッチ操作では、スクロールやダブルタップ拡大が誤作動しないようにしてください。
7．スマートフォン対応
スマートフォンを優先して設計してください。
縦画面で遊びやすいレイアウト
画面幅320px程度から対応
iPhoneとAndroidの一般的なブラウザで操作可能
ゲーム画面が画面外にはみ出さない
操作ボタンは指で押しやすい大きさ
文字は小さくしすぎない
画面の高さが低い端末にも対応
PCではゲーム画面を中央に配置
横幅が広い画面ではゲーム領域を広げすぎない
ゲーム領域の縦横比は固定しすぎず、端末の表示領域へ収まるようにしてください。
8．画面構成
タイトル画面
表示内容：
玉ねぎ劇場
今日も主役は玉ねぎ。
ゲーム説明
操作方法
「公演を始める」ボタン
説明文：
30秒間、舞台に落ちてくる玉ねぎを集めてください。
観客から拍手が起きたら、お辞儀もお忘れなく。
ゲーム画面
上部に以下を表示してください。
SCORE
残り時間
一時停止ボタンは不要
中央を舞台・ゲーム領域にします。
下部にスマートフォン用の操作ボタンを配置します。
PCでは操作ボタンを表示しても構いませんが、キーボードでも操作できることを示してください。
結果画面
30秒経過後に表示します。
最終スコア
拾った通常玉ねぎの数
拾った大きな玉ねぎの数
お辞儀成功回数
結果に応じた一言
「もう一度遊ぶ」ボタン
結果メッセージ例：
高得点：
今日も主役は、玉ねぎでした。
中得点：
あたたかい拍手に包まれました。
低得点：
本日の玉ねぎは、ほとんど床に落ちました。
9．仮デザイン
背景画像は後から差し替えます。
最初の試作では、CSSだけで簡単な劇場を表現してください。
背景：暗い赤または深い茶色
舞台床：木目を連想させる茶色
左右：緞帳をイメージした赤い領域
中央：やわらかいスポットライト
客席：画面下部に薄いシルエット
UI：玉ねぎ劇場の絵本的な雰囲気に合わせる
ピクセルゲーム風にはしない
派手なネオンやSF的な表現は使わない
後から背景画像を渡した際に、CSSを大きく作り直さず差し替えられる構造にしてください。
背景画像はCSSのbackground-imageまたは独立した背景レイヤーとして管理してください。
10．玉ねぎ素材
通常玉ねぎと大きな玉ねぎは、試作段階では次のいずれかで仮表示してください。
CSSで描いた簡単な玉ねぎ
絵文字
シンプルな仮画像
後から正式な画像へ簡単に差し替えられる構造にしてください。
通常玉ねぎと大きな玉ねぎは、それぞれ別の画像パスまたは設定値で管理してください。
11．効果音
最初の試作では、外部音源を使わなくても構いません。
可能であればWeb Audio APIなどで簡単な効果音を付けてください。
玉ねぎ取得音
大きな玉ねぎ取得音
拍手イベント音
お辞儀成功音
公演終了音
音声は初期状態でオンにし、ミュートボタンを設けてください。
スマートフォンでは、ユーザーが「公演を始める」を押した後に音声を開始してください。
音の実装で動作が不安定になる場合は、ゲーム本体を優先し、効果音は後回しにしてください。
12．実装方法
ブラウザだけで遊べる静的なWebゲームにしてください。
基本構成：
index.html
style.css
script.js
assetsフォルダ
既存ペット素材用フォルダ
外部フレームワークは原則使わず、HTML・CSS・JavaScriptで実装してください。
ローカルでindex.htmlを開いて動作確認できる構成を優先してください。
ただし、既存のペット素材が特定のライブラリや構成に依存している場合は、内容を確認してから最小限の方法で流用してください。
13．実装上の注意
既存のスプライトシートのフレーム位置を正しく読み取る
画像がぼやけたり、不自然に切れたりしないようにする
キャラクターの当たり判定は見た目より少し小さくする
タッチ操作とキーボード操作が競合しないようにする
ゲーム終了後にタイマーや落下処理を確実に停止する
再スタート時にスコアやオブジェクトを完全に初期化する
画面サイズ変更時にもキャラクターが画面外へ出ないようにする
スマートフォンでページ全体が操作中にスクロールしないようにする
コンソールエラーが出ない状態にする
14．今回の作業範囲
まずは、以下が動く試作品を完成させてください。
ペット素材の読み込み
待機・左右移動アニメーション
玉ねぎのランダム落下
接触判定と得点
大きな玉ねぎ
30秒タイマー
拍手とお辞儀イベント
スマートフォンのタッチ操作
結果画面
再スタート
背景画像、正式な玉ねぎ画像、細かな演出は後から追加します。
実装を始める前に、添付したペット素材の構成を確認し、利用できるアニメーション名とフレーム情報を簡潔に報告してください。
素材の仕様が指示書と異なる場合は、勝手に置き換えず、どのように流用するかを先に説明してください。