見出し画像

「Claude Code」などを初使用して、「対戦！タワーディフェンス」を開発・公開しました。

miya

「対戦！タワーディフェンス」をリリースしました。
対人戦とシングルプレイモードが楽しめるシンプルなウェブゲームです。
以下のURLからプレイ可能です。

本ゲームのプレイはこちらから

今回、アプリ開発支援AIツールの「Claude Code」と「Build apps with Gemini」、およびAnthropicの最新LLM「Claude Sonnet 4」を初めて使用しました。
また、「Gemini 2.5 Pro」も開発に使用しました。

所感

Claude Sonnet 4、Gemini 2.5 Proのどちらも非常に優秀なモデルですが、Claude Sonnet 4はデザイン面、Gemini 2.5 Proはロジックの実装が得意という印象があります。
Claude CodeとBuild apps with Geminiのどちらも、使用することでバイブコーディングの生産性が大きく向上したと感じます。

本ゲームについて

タイトル

対戦！タワーディフェンス (Versus Tower Defense - VTD)

概要

ブラウザでプレイできるシンプルなタワーディフェンスゲームです。
シングルプレイヤーモードと、ローカル対戦が可能なVSモードを備えています。

機能

  1. 2つのゲームモード:

    • シングルプレイモード: 次々と現れる敵のウェーブから基地を守り、ボスを倒してゲームクリアを目指します。

    • 対人戦モード: 2人のプレイヤーがそれぞれの陣地で戦い、相手より長く生き残るか、先にボスを倒すことを目指します。

  2. タワー:

    • 3種類のタワー（基本、高速、重装）が存在します。

    • タワーはゴールドを消費して建設できます。

  3. タワーアップグレード:

    • 各タワーは射程、攻撃速度、攻撃力を個別にアップグレード可能です。

    • アップグレードにもゴールドが必要です。

  4. 敵:

    • 通常、高速、タンクといった特性の異なる敵が登場。

    • 各モードの最終ウェーブには強力なボスが出現します。

  5. ウェーブシステム:

    • 準備できたら次のウェーブを開始できます。

    • ウェーブが進むごとに敵は手強くなります。

  6. リソース管理:

    • 敵を倒すとゴールドを獲得できます。

    • ライフが0になるとゲームオーバーです。

遊び方

  1. モード選択:

    • ゲーム開始時に「シングルプレイ」か「対人戦モード」を選択します。

  2. シングルプレイモード:

    • 目標: 敵の侵攻を食い止め、最終ウェーブに出現するボスを倒します。

    • 操作方法:

      • マウスでタワーを配置したい場所をクリックします。

      • 画面下部のコントロールボタンで建設するタワーの種類を選択したり、次のウェーブを開始したりします。

      • 配置済みのタワーをクリックすると、アップグレードパネルが表示されます。

    • ゲームの流れ:

      • 敵を倒すと獲得できるゴールドを使って新しいタワーを建設したり、既存のタワーをアップグレードしたりして防衛を強化します。

      • ライフが0になる前にボスを撃破すればゲームクリアです。

  3. 対人戦モード:

    • 目標: 対戦相手より長く生き残るか、先に対戦相手より早くボスを倒します。

    • 操作方法:

      • プレイヤー1 (左側):

        • カーソル移動: `W` (上), `A` (左), `S` (下), `D` (右)

        • 決定/配置/選択: `F`

      • プレイヤー2 (右側):

        • カーソル移動: `↑` (上), `←` (左), `↓` (下), `→` (右)

        • 決定/配置/選択: `/` (スラッシュキー)

      • 画面下部のタワーコントロールや、タワー選択時に表示されるアップグレードパネルは、それぞれのプレイヤーがキーボードで操作します。

      • カーソルがキャンバスの一番下にあるときに `S` または `↓` を押すと、タワーコントロールボタン群にフォーカスが移動します。

      • カーソルがタワーコントロールボタン群にあるときに `W` または `↑` を押すと、キャンバスにフォーカスが戻ります。

    • ゲームの流れ:

      • 各プレイヤーは独立したゲームエリア内で、それぞれタワーを建設・アップグレードして敵を迎撃します。

      • 相手のライフが0になるか、自分が先にボスを倒すと勝利です。

今後の展望

  1. AIとの対戦機能の実装

  2. 減速・早送り・一時停止機能の実装

  3. タワーの売却機能の実装

  4. 難易度調整

  5. 敵の攻撃機能の実装

  6. グラフィック・エフェクト・BGMの実装（または改良）

  7. GitHubにオープンソースで公開

使用技術

1. Claude Sonnet 4

以下の用途に使用しました。

  • ベースとなる全ての画面の作成

    • シングルプレイモード画面

    • タイトル画面

    • 対人戦モード画面

2. Gemini 2.5 Pro

以下の用途に使用しました。

  • タイトル画面

    • UIの微修正

  • シングルプレイモード画面

    • UIの微修正

  • 対人戦モード画面

    • タワーのアップグレードができないバグの修正

    • カーソル移動でタワーの種類やアップグレード項目を選択できる機能の追加

    • UIの微修正

  • 本ゲームのReadme.mdの作成

3. Claude Code

4. Build apps with Gemini

5. html/javascript/css

動画タイムライン

  • 0:00-0:10: 各画面の画面遷移（タイトル -> シングルプレイモード -> タイトル -> 対人戦モード）

  • 0:10-1:19: シングルプレイモード

    • 0:35-0:53: 10倍速

    • 0:53-1:19: ボス戦

  • 1:19-2:18: 対人戦モード

    • 1:34-1:49: 10倍速

    • 1:49-2:18: ボス戦

使用素材

  1. 雑魚敵撃破音

    • 効果音ラボ様の撃破音（爆発1.mp3）を使用させていただきました。

  2. ボス撃破音

    • 効果音ラボ様の撃破音（爆発3.mp3）を使用させていただきました。

関連URL

いいなと思ったら応援しよう！