週末でカードゲームをリリースした話

Pršíのブラウザ版を制作しました。これはチェコのカードゲームです。シンプルなAIとの1対1の対戦ゲームで、マウスまたはタッチ操作でプレイできます。

ここからプレイできます: https://czsoftcode.github.io/prsi/

多くの人はこれを「バイブ・コーディング（vibe coding）」と呼びますが、私はそうは思いません。バイブ・コーディングとは、多くの場合、アプリの概要を説明してAIが出力したものをそのまま受け入れることを指します。私は異なる手法を用いました。

私はClaude Codeを使用し、10の明確なフェーズに分けて開発を進めました。各フェーズには特定の目標と、検証可能なアウトプットが設定されていました。

フェーズの内容は以下の通りです：

  • ViteとTypeScriptのスキャフォールド（雛形）のセットアップ
  • ゲームエンジンのデータモデルの構築
  • 基本的な動きと特殊カードの追加
  • AI対戦相手のロジック作成
  • UIとインタラクションループの構築
  • 200回のエンドツーエンドAIシミュレーションの実行
  • サイトのデプロイ

次のフェーズに進む前に、各フェーズの計画とレビューを行いました。これにより、コードをクリーンに保つことができました。また、約300個のユニットテストを作成しました。AIがミスをした際も、テストですぐに検知できました。

最も困難だったのはコードではなく、ゲームのルールでした。

  • 7のスタック：プレイヤーは7を最大4枚まで重ねることができ、相手に8枚のカードを引かせることができます。
  • クイーンのワイルドカード：クイーンは要求されるスートを変更します。エンジンがこれを正しく処理できるようにする必要がありました。

技術的なハードルもありました：

  • デプロイ：パスのエラーにより、GitHub Pagesで画像が表示されなくなりました。これはViteのbase URLを使用することで解決しました。
  • バージョニング：リリースをタグ付けした後、package.jsonの更新を忘れてしまいました。

AIはシンプルに保ちました。ルールに基づいた有効な手のみを指します。目標は「賢いAI」ではなく「正しいAI」を作ることでした。200回のシミュレーションゲームを行い、ゲームが必ず勝利または引き分けで終了することを証明しました。

「バイブス」に頼るのではなく、フェーズごとに構築することで、自分が真に理解しているプロダクトをリリースすることができました。

Source: https://dev.to/stkremen/i-shipped-a-card-game-in-a-weekend-but-i-didnt-really-vibe-code-it-34g9

Optional learning community: https://github.com/czsoftcode/prsi