開発者がClaude Code OpusとThree.jsを使用して3Dブラウザゲームを構築

プロジェクト概要

開発者はTraffic Architectという3D道路建設・交通管理ゲームを構築しました。このゲームはブラウザ上で完全に動作します。ゲームはcrazygames.com/game/traffic-architect-ticでプレイ可能です。

技術スタックはClaude Code Opus 4.6とThree.jsで構成されています。プロジェクト全体はコード生成されており、外部の画像ファイル、3Dモデル、スプライトシートは一切使用されていません。Claude Codeは実行時にすべてのビジュアルを作成するJavaScriptを生成します。

ゲームメカニクス

Traffic Architectでは、プレイヤーは成長する都市のための道路ネットワークを設計します。建物が出現し、他の建物に到達する必要のある車両を生成します。プレイヤーは道路で建物を接続し、配達から収入を得て、新しい道路タイプをアンロックします。交通が渋滞するとゲームは終了します。

Claude Codeワークフロー戦略

開発者はClaude Codeと効果的に連携するための具体的な戦略を共有しました：

• 計画を優先： コードを書く前に必ず計画を立てることから始めます。作業を小さな焦点を絞ったタスクに分解します - 一度に一つのことに集中します。これによりClaudeが軌道から外れたり、一度に多くのことをしようとするのを防ぎます。
• すべてをレビュー： Claudeが生成するすべてのコード変更をレビューします。ただ受け入れて次に進むのではなく、何かが正しくないように見えたり、より良いアプローチがある場合は、解決策に満足するまで反論し反復します。
• 大きなタスクではなく小さなタスク： タスクは小さく具体的に保ちます。曖昧なタスクや巨大なタスクはClaudeが脱線する傾向があります。小さく明確に定義されたタスクは出力に対するより多くの制御を提供します。
• 共同作業的アプローチ： 最適化の一部は開発者から、一部はClaudeが提案しました。重要なのはすべてを批判的に評価することです - Claudeが提案し、開発者がレビューし、行き来を繰り返します。この関係は「オートパイロットを押すよりも、むしろジュニア開発者と働くようなもの」と表現されています。
• 手を離さない： Claude Codeはループ内に留まっているときに最も効果的に機能します。事前計画、分解、レビュー、反復のサイクルが品質を高く保ちます。

開発者はClaude Codeワークフローに関する質問にオープンで、ゲームへの率直なフィードバックを歓迎しています。