Amazon Q CLIで簡単な知育ゲームを作ってみた。


## はじめに

Tシャツ欲しさにゲームを作ってみた記事です。

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/


## 案だし。

まずは何を作ろうかと悩んだのですが、私が大好きな子供達と遊べるゲームが良いなと考えました。

また、私が大好きなくだらないゲームだと妻に怒られるので、「知育」要素がある内容とし、別のAIで要件を作りました。

以下、要件定義書です。

    # 迷路風文字集めゲーム要件定義書
    
    ## 1. 概要
    2歳と5歳の子供向けの知育ゲーム。Pygameを使用してシンプルな迷路で文字を集めながら、ひらがな・カタカナ・数字を学習する。
    
    ## 2. 対象年齢・目的
    - **対象年齢**: 2歳～5歳
    - **学習目的**: ひらがな、カタカナ、数字の認識と記憶
    - **操作目的**: 矢印キーでの基本的なPC操作に慣れる
    
    ## 3. 技術要件
    - **開発環境**: Python + Pygame
    - **画面サイズ**: 800x600ピクセル
    - **フレームレート**: 30fps
    - **リソース**: 画像ファイル不使用、フォントと基本図形のみ
    
    ## 4. 画面構成
    
    ### 4.1 レイアウト
    - **上部エリア（100px）**: 収集した文字の表示
    - **メインエリア（500px）**: 迷路とプレイヤー
    - **グリッドサイズ**: 40x40ピクセル
    
    ### 4.2 表示要素
    - **壁**: 黒い四角形
    - **通路**: 白い四角形
    - **プレイヤー**: 青い円（直径30px）
    - **未取得文字**: 黄色背景に黒い大きな文字
    - **取得済み文字**: 薄い灰色の文字
    - **収集エリア**: 取得順に文字を横並び表示
    
    ## 5. 操作仕様
    
    ### 5.1 基本操作
    - **矢印キー（↑↓←→）**: プレイヤーを1マスずつ移動
    - **ESCキー**: ゲーム終了
    - **SPACEキー**: 次のコースへ進む（全文字取得後のみ）
    
    ### 5.2 移動ルール
    - 壁に向かって移動しようとした場合は移動しない（エラー表示なし）
    - 文字のあるマスに移動すると自動的に文字を取得
    - 既に取得した文字のマスも通行可能
    
    ## 6. ゲーム進行
    
    ### 6.1 コース構成
    1. **あいうえおコース**: あ、い、う、え、お（5文字）
    2. **かきくけこコース**: か、き、く、け、こ（5文字）
    3. **さしすせそコース**: さ、し、す、せ、そ（5文字）
    4. **アイウエオコース**: ア、イ、ウ、エ、オ（5文字）
    5. **すうじコース**: 1、2、3、4、5（5文字）
    6. **たんごコース**: ね、こ（「ねこ」として）
    
    ### 6.2 難易度調整
    - **2歳向け**: 
      - 迷路は一本道または簡単な分岐
      - 文字サイズ大（32px）
      - 文字数少なめ（3-5文字）
    - **5歳向け**:
      - 複雑な分岐のある迷路
      - 文字サイズ中（24px）
      - 文字数多め（5-8文字）
    
    ### 6.3 進行フロー
    1. コース開始時に目標文字を上部に薄く表示
    2. プレイヤーが文字を取得すると該当文字が明るく表示
    3. 全文字取得で「完成！」メッセージ表示
    4. SPACEキーで次のコースへ
    
    ## 7. 視覚的フィードバック
    
    ### 7.1 文字取得時
    - 取得した文字が少し拡大してから元のサイズに戻るアニメーション
    - 文字の色が薄い灰色に変化
    - 上部の収集エリアに文字が追加表示
    
    ### 7.2 コース完成時
    - 「かんせい！」の大きな文字表示
    - 収集した文字を点滅させる
    - 「つぎはかきくけこ！」など次のコース予告
    
    ### 7.3 プレイヤー表示
    - 常に少し点滅して現在位置を明確化
    - 移動時は滑らかに移動（0.1秒かけて移動）
    
    ## 8. データ構造
    
    ### 8.1 迷路データ
    ```
    迷路 = 2次元配列
    0: 通路, 1: 壁, 2: 文字配置位置
    ```
    
    ### 8.2 コース管理
    ```python
    COURSES = {
        "あいうえお": {
            "characters": ["あ", "い", "う", "え", "お"],
            "maze": [...],  # 迷路配列
            "start_pos": (1, 1),  # スタート位置
            "char_positions": [(3,1), (5,1), ...]  # 文字配置位置
        }
    }
    ```
    
    ## 9. 実装優先順位
    
    ### Phase 1（基本機能）
    - 基本画面構成とグリッド表示
    - プレイヤー移動機能
    - シンプルな迷路1つ
    - 文字配置と取得機能
    
    ### Phase 2（コース機能）
    - 複数コースの実装
    - コース切り替え機能
    - 進行状況表示
    
    ### Phase 3（体験向上）
    - アニメーション効果
    - 視覚的フィードバック
    - 難易度調整機能
    
    ## 10. 注意事項
    - キーボード入力は矢印キーのみに限定し、文字入力は不要
    - エラー時も優しい表示（「だめ」ではなく単に動かない）
    - 長時間プレイしても疲れない色使い
    - 2歳でも理解できる直感的な操作性

## 早速作ろう！

では作ってみます！

### まずはインストール。

PCを新調した以降、Amazon Q CLIを入れてなかったので、以下のページを参考にインストールをします。

https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html

今回手順の詳細は割愛します。

### 作業用ディレクトリを作成し、Amazon Q CLIを起動！

起動してみました！

![スクリーンショット 2025-06-12 4.10.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/2a0c543a-1b04-4364-b212-cea3144c953c.png)

おお、かっこいい！

後から気付いたのですがモデルが`claude-3.7-sonnet`ですね。
今なら`claude-4-sonnet`があるので、そちらにすべきでした！

`claude-4-sonnet`をデフォルト設定にする場合が以下にあったので紹介しておきます！

https://qiita.com/makies/items/50abbd191705f2577314

### 作成開始！

では、事前に作った要件定義をそのまま指示して作ってもらいます。

最初はこんな感じでディレクトリのチェックをしてました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/511c48a2-e2a7-40e5-9b1f-9edf9f0ed232.png)


ここから実際に資材の作成が始まります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/cbc4f41a-d780-4efe-b4b6-f1f399b1cfab.png)


ファイルの書き込み等、一部の操作ではユーザに許可を求めてきます。
一旦信頼してみて、`t`(trust)を選びます。

```
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]:
```

あとは待つだけで資材ができました！
`README.md`もしっかり作ってくれています！

### 追加指示①：日本語対応してもらう。

画像を撮り忘れたのですが、起動してみると日本語が表示されていませんでした。

なので、その旨依頼すると一発で直してもらえました。
よくみると、日本語フォントを外部から取得していますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/cd3006e0-2ce5-45c7-b815-1ebd671912ab.png)

これだけでもう動くレベルです！
🔵の自キャラを矢印キーを動かして日本語を集めることができます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/f37c58f6-ddc9-49ab-be79-3ac8d962bf50.png)

### 追加指示②：文字配置のランダム化

次に、集める文字がいつも同じ場所に表示される仕様だったので、ランダム配置するようにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/a99eff8c-86e5-4c71-92bd-1fa9417d1659.png)

明示的に指定していないですが、以下２点を意識してくれています。

* 通路上に配置し、回収可能となっていること
* 通路の数以上に文字を配置する際の考慮

### 追加指示③：キーボード押しっぱなしに対応してもらう。

次に１マス移動するたびに矢印キーを押さないといけないので、押しっぱなしにも対応していただきました。

難なく対応してくれました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/01146896-4c4e-4f72-a3b3-1c647353f4ee.png)

### 完成！

一部自動生成の迷路が到達不可な迷路になっていたところを手動修正して、作成完了です！

30分くらいでできてしまいました、びっくりです。
しかも無料。

![スクリーンショット 2025-06-12 4.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/f418815e-e23c-4380-9c40-58477c43a561.png)

早速、子供たちに触ってもらいましたが、なかなかの高評価です！
「知育」要素があるので妻にも怒られません！

## 最後に

簡単ではありますが、Amazon Q CLIを使ったゲーム作成体験を味わうことができました。

専門学生時代の頃、こんなゲームを作ってたなぁと懐かしい気持ちになったのと、昨今のAIの進化に改めて感心させられました！

完成品はGithubにあるのでもし興味あればどうぞ！

https://github.com/SatoshiMoriyama/Maze-Letter-Hunt