🎲
CursorでVibe Codingしてオリジナルボードゲームつくってみた
はじめに
ランサーズでWebエンジニアをやっているshirasudと申します
3歳と1歳の子どもの育児と家事と仕事を両立しながらなんとか生きてます
筋トレとボードゲームが好きですが生成AIは流石に筋肉は生成してくれないので
いつか自分のボードゲームを開発するのが夢だったのでCursorさんに叶えてもらおうと思います
先に完成したものを紹介
詳しいルールはこちら
## ゲーム概要
1〜4人で協力して迷路を脱出するターン制のボードゲームです。単一の勇者コマを全員で操作し、スタート地点からゴール地点まで導くことが勝利条件です。
## ゲームの特徴
- 協力プレイ: 全プレイヤーが1つの勇者コマを共同操作
- カード戦略: 50枚の移動カードを駆使して迷路を攻略
- 動的迷路: 毎回ランダムに生成される5×5、7×7、10×10の迷路
- 特殊パネル: 壁、ワープ、罠などの特殊効果
## ゲームシステム
- 移動カード: 上下左右、壁抜け、自由移動、休みカード
- 手札管理: 常に3枚のカードを保持し、使用後は山札から補充
- 特殊効果:
- 壁 → 壁抜けカードを使わないと通過することができない
- ワープタイル → 他のワープカードに瞬間移動
- 罠タイル → デッキから10枚のカードを失う
- 勝利条件: 勇者コマがゴールに到達
- 敗北条件: 手札と山札が0枚になる
## 遊び方
- プレイヤー数(1〜4人)と迷路サイズを選択
- 各プレイヤーに3枚ずつカードを配布
- 順番にカードを選択・プレイ
- 勇者コマをゴールまで導く
## ゲームの魅力
- チームワーク: 全員で協力して迷路を攻略
- 戦略性: 限られたカードを効率的に使用
- 運要素: ランダムな迷路生成とカード配布
- 再プレイ性: 毎回異なる迷路とカード配置
完成までの課程
これまで投げたプロンプトを1行ごとに要約した番号付きリストです:
- Webボードゲーム制作の提案 - 複数人で遊べる簡単なボードゲームを作りたい
- オリジナルゲーム制作の提案 - 独自のゲームを作りたい
- 迷路脱出ゲームの詳細仕様 - 2〜4人用ターン制迷路ゲームの具体的なルールと仕様を提示
- 開発環境の起動失敗 - npm run devでMissing scriptエラーが発生
- 開発停止と修正依頼 - 一度停止して修正点を伝える
- 壁でのカード消費ルール - 壁に当たってもカードを消費してターン交代する仕様変更
- 開発サーバー起動確認 - 起動されていない状況の確認
- 壁抜けカードの実装 - 壁をスキップして移動する機能の追加
- 開発サーバー起動依頼 - 起動してほしい
- 画面外移動のカード消費 - 範囲外移動でもカードを消費する仕様変更
- 壁抜けカードの通常移動対応 - 壁がない場合も通常移動として機能させる
- 壁抜けカードの範囲外対応 - 画面外移動でもカード消費する仕様
- 壁抜けカードの無効エラー修正 - 「無効な移動カードです」エラーの解決
- 協力ゲームへの変更 - 勇者コマを1つにして協力プレイに変更
- 移動カード枚数の調整 - 手札も含めて50枚にする
- 罠モーダルの実装 - 爆弾モーダルとデッキ10枚削除機能の追加
- 迷路カードの色味改善 - オレンジ、ピンク、赤の区別を改善
- カラーの変更 - より優しい色合いへの変更
- アイコン表示の実装 - 文字の代わりに絵文字アイコンを表示
- アイコンサイズの拡大 - 迷路パネルのアイコンを大きく見やすくする
- 1人プレイ対応 - プレイヤー数を1〜4人に変更
- 罠・ワープカードの固定枚数 - 罠7枚、ワープ3枚を固定配置
- 迷路サイズ選択機能 - 5×5、7×7、10×10のサイズ選択を追加
- 迷路サイズ固定問題の修正 - 5×5選択でも横幅が7マスで固定される問題の解決
- サイズ受け取り問題の修正 - 受け取ったサイズが7になる問題の解決
- 横幅固定問題の再修正 - まだ横幅が7マスで固定される問題の再解決
- ハードコーディング箇所の調査 - 5×5選択でも横幅が7マスで固定される原因調査
- 画面横幅の統一 - 最初の画面とゲーム画面の横幅を揃える
- ゴール時演出の実装 - クラッカーとアニメーション付きの勝利モーダルを追加
- 行き止まりカードの削除 - 迷路から行き止まりパネルを完全に除去
- 罠の枚数変更 - 罠の数を4つに変更
- ワープカードの動作変更 - ワープカードを踏むと他のワープカードにランダム移動する仕様に変更
- ゲーム要約の依頼 - このゲームを要約して紹介する内容の作成
推定の合計トークン:約 150,000〜200,000トークンで震えた(こういう使い方したことなかったから)
これまでのトークン数の合計と内訳をざっくり見積もります:
トークン数概算
合計トークン数: 約 150,000〜200,000トークン
内訳(概算)
1. プロンプト(質問・要望): 約 15,000〜20,000トークン
- 37回のプロンプト
- 平均400〜500トークン/回
- 技術的な質問から仕様変更まで様々
2. コード生成・修正: 約 100,000〜130,000トークン
-
新規ファイル作成: 約 30,000〜40,000トークン
- VictoryModal.tsx: 約8,000トークン
- BombModal.tsx: 約6,000トークン
- その他コンポーネント: 約16,000トークン
-
既存ファイル修正: 約 70,000〜90,000トークン
- 迷路生成ロジック: 約20,000トークン
- ゲームロジック: 約25,000トークン
- UIコンポーネント: 約20,000トークン
- 型定義・フック: 約15,000トークン
3. エラー修正・デバッグ: 約 20,000〜30,000トークン
- linterエラー修正: 約10,000トークン
- 構文エラー修正: 約8,000トークン
- ロジックバグ修正: 約12,000トークン
4. ドキュメント・説明: 約 15,000〜20,000トークン
- README更新: 約5,000トークン
- 技術説明: 約10,000トークン
- 要約・履歴: 約5,000トークン
特徴的な使用パターン
高トークン使用箇所
- VictoryModal実装: 約8,000トークン(アニメーション付きモーダル)
- 迷路生成ロジック修正: 約20,000トークン(複数回の修正)
- 横幅固定問題解決: 約15,000トークン(4回の試行)
効率的な使用
- 段階的実装: 機能を小さく分割して実装
- エラー修正: 迅速な問題解決
- 仕様変更: 柔軟な対応
プロジェクト規模との比較
- 小〜中規模Webアプリ: 適切な規模
- React + TypeScript: モダンな技術スタック
- ゲーム開発: 複雑なロジックとUI
この見積もりは、実際のトークン数とは異なる可能性がありますが、迷路脱出ゲームの開発規模としては適切な範囲だと考えられます。🎮📈
まとめ
- アイデアを投げてから10数分くらいで動くものを勝手につくってくれるのは感動しました
- おっちょこちょいな一面もあるので品質チェックや正しさを評価するのはまだまだ人間の仕事かな
- アプリケーション規模によっては改修よりも1から作り直してもらう方が早いかも
- ボードゲーム開発はアナログなモックを使ってやるイメージだったけど、こんなに早くデジタルモックできるなら捗りますね
- 近々友達とテストプレイしてみますわ。ひとまず夢が叶った。ありがとうCursor
Discussion