Go to Qiita Advent Calendar Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AI・機械学習 Qiita Tech Festa 2025
Qiita Tech Festa20252025年7月15日まで開催中！
@Yusuke824

Amazon Q CLI でブロック崩しゲームを作成してみた

Last updated at Posted at 2025-06-26

1. はじめに

1.1. Tシャツキャンペーン

Amazon Q CLI でゲームを作ろう Tシャツキャンペーンというキャンペーンが2025年5月20日から2025年6月30日まで実施されています。Amazon Q Developer CLIを使ったことがなく試行してみたかったのと、Tシャツ目当てで簡単なゲームを作成してみました。

1.2. Amazon Q Developer

AWSが提供している開発者向けの生成AIアシスタントです。2025年4月に日本語(多言語)に対応しました。
WebインターフェースやVS Code等のIDEプラグインからの利用が従来の使い方でしたが、CLI版の提供によりターミナル上でも対話形式で生成AIに問い合わせが可能で、開発フローを中断することなく利用できることが特徴となっています。
Amazon Q Developer CLIに関する詳細な特徴・機能については、こちらやユーザガイドを参照ください。

1.3 端末環境

今回ゲームを作成した端末の環境は以下の通りです。

  • Windows10

2. 準備

2.1. AWS Builder ID

個人の学習・開発で利用するための無料プロファイルです。こちらから登録しておきます。
なお、組織にて利用する場合は、IAM Identity Centerユーザ(SSOユーザ)を準備します。IAM Identity Centerユーザで認証した場合、CLIによる無料利用枠は利用できません。

2.2. WSL

Windows端末でAmazon Q Developer CLIを利用するため、こちらの手順に従い、WSLをインストールします。LinuxディストリビューションはデフォルトのUbuntuとしました。

2.3. Amazon Q Developer CLI

WSLを起動します。
こちらの手順に従い、WSL上でAmazon Qをダウンロードし、パッケージをインストールます。

2.4. 認証

WSL上でAmazon Q Developer CLIの認証を行います。

# q login

AWS Builder IDを利用するため、Use for Free with Builder IDを選択します。

? Select login method ›
❯ Use for Free with Builder ID
  Use with Pro license

認証用のURLが表示されるので、ブラウザに入力します。

Confirm the following code in the browser
Code: PBWH-LVNZ

Open this URL: https://view.awsapps.com/start/#/device?user_code=XXXX-XXXX
▰▰▰▰▰▰▰ Logging in...

「確認して続行」をクリックし、アクセス許可をクリックします。

image.png

3. ゲームの概要

3.1. 選択したゲームとその理由

今回はブラウザで遊べるブロック崩しゲームを作成してみました。ブロック崩しゲームを選択した理由は以下の通りです。

  • 簡易性
    誰でも一度は遊んだことがあり、ルールを説明しなくても遊べる点
  • カスタマイズ性
    ブロックを崩したときにアイテムを出したり、ゲームに機能追加する等カスタマイズできる要素がある点
    ※ブロックをAWSのサービスアイコンにカスタマイズしようと考えていました
  • プログラミング要素
    ブロックとの当たり判定や玉の速度等、プログラミング要素を備えている点

3.2. 発見した効果的なプロンプト手法

生成AIはコンテキストレングス(context length)といった制約があるため、まずは基本となるブロック崩しゲームを作成し、そこから機能を順次追加する方法で作成しました。機能を追加した後は、動きを確認していき、最後にゲームの見た目の改善の指示を実施しました。

  • 段階的な指示

    > ブロック崩しゲームを作成してください

    > ブロックは、AWSサービスの以下のアイコンにしてください。
> 赤：RDS (./RDS.svn)
> 黄：EC2 (./EC2.svn)
> 緑：S3 (./S3.svn)
> 
> ブロックに当たると、以下の順序で色を変えてください。
> 緑のブロックが無くなるとブロックを消してください。
> 赤 → 黄 → 緑
> :
> (略)
> :

  • 機能改修

    > アイテム効果は下部だとみにくいので、画面左に表示してください。

    > ボールを増加する場合は、ボールを2つに分けるのではなく、1つ追加してください。

  • バグ改修

    > ブラウザで実行すると途中で画面がフリーズします。対処をお願いします。

    > ゲームを開始した直後、いきなりゲームオーバーになります。修正してください。

  • デザインの変更

    > ゲーム画面（ボールやパドル）、ゲーム背景をかっこいい感じにカスタマイズしてください。

3.3. AIが従来のプログラミング課題をどのように処理したか

AIが解決したプログラムの課題について説明します。

  • 処理ロジックの作成
    処理判定やアイテムの効果を実装する際、処理ロジックの検討やデバッグに時間を要します。AIに自然言語で指示することで、意図するロジックを生成してくれました。

  • サーバー・クライアント通信
    サーバ側で最高スコアを記録する機能改善を実施しようとすると、API設計やエラーハンドリングの実装に時間を要します。AIに自然言語で指示することで、 Express.js の実装と RESTful API を自動生成してくれました。

3.4. 時間を節約した開発自動化の例

AIによる開発自動化による節約できた想定時間を以下に記載します。

  • 機能改修
    自動化作業：タイムアタック機能やアイテムシステムの導入等、基本的なブロック崩しに機能を追加
    節約時間: 推定10-12時間 → 20分

  • バグ改修
    自動化作業：不具合の原因特定、修正コードを生成
    節約時間: 推定2-4時間 → 5分

  • デザインの変更
    自動化作業：CSS、Canvas描画、エフェクト、アニメーション等のパーティクル効果の生成
    節約時間：推定8-10時間 → 15分

3.5. AIが生成した興味深いソリューションのコード例

  • パーティクル効果

    let particles = [];

function createParticle(x, y, color) {
    particles.push({
        x: x,
        y: y,
        vx: (Math.random() - 0.5) * 4,
        vy: (Math.random() - 0.5) * 4,
        life: 30,
        maxLife: 30,
        color: color
    });
}

function drawParticles() {
    for (let i = particles.length - 1; i >= 0; i--) {
        const particle = particles[i];
        
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.life--;
    
        if (particle.life <= 0) {
            particles.splice(i, 1);
            continue;
        }
    
        const alpha = particle.life / particle.maxLife;
        ctx.fillStyle = particle.color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
        ctx.fillRect(particle.x, particle.y, 2, 2);
    }
}

  • 最高スコア保存

    async function saveHighScores() {
    try {
        const response = await fetch(`${API_BASE_URL}/highscores`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(highScores)
        });
    
        if (response.ok) {
            const result = await response.json();
            console.log('サーバーに記録を保存しました:', result.message);
        } else {
            throw new Error(`HTTP ${response.status}`);
        }
    } catch (error) {
        console.error('サーバー接続エラー:', error);
        alert('サーバーに接続できません。記録の保存に失敗しました。');
    }
}

3.6. 最終的な作品の特徴

  • 初期のブロック崩しの画面
    image.png

  • 最終的なブロック崩しの画面
    image.png

  • 追加した機能

    • ブロックにAWSサービスのアイコン（RDS、EC2、S3）を使用
    • タイムアタック機能でプレイ時間を計測
    • パドル拡大/縮小、ボール増加、スピード調整等、5種類のアイテムシステムを導入
    • ブロック破壊とゲームクリアボーナスでスコアを計測し、スコアをサーバのセッションに保存
    • ブロック破壊時にエフェクトを描画するパーティクルシステム

  • 技術的成果:

    • HTML5 Canvas + JavaScript (フロントエンド)
    • Node.js + Express (バックエンド)
    • RESTful API

  • 開発統計

    • 総開発時間: 約2時間（従来なら20-30時間相当）
    • 生成されたコード行数: 約1,500行
    • 修正・改善回数: 15回以上
    • 最終的なファイル数: 4ファイル

4. まとめ

Amazon Q Developer CLIを使うことでブロック崩しを短時間で作成することができました。コーディングを全くせずに自然言語で指示するだけで、完成後の高いゲームを作成でき、本当に素晴らしい技術だと思います。
ただ、指示の仕方にもよりますが、意図した通りゲームが実装できないことがあったため、業務で利用する場合は、Amazon Q Developer CLIは補助的に利用し、コードの検証は人が実施する必要があると思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?