初心者がAmazon Q Developer CLIでマージ2ゲームを作ってみた

Last updated at 2025-06-16Posted at 2025-06-15

ゲームを作ってみたい！

ずっと前からマッチ2ゲームを作ってみたかった。
Appstoreにいくつかあるけど、サブスクが高いか、絵が可愛くないか、広告が多いの気に入らなかったゲームが多かったので、 Amazon Q CLI でゲームを作ろう Tシャツキャンペーン　に紹介されたらすごくいい機会だと思った。

事前の悩み

Amazon Q CLIは使ったことない。インストールと使い方は難しいのかな？
AIに最初からコードを書くことをお願いしたことないので、伝え方は大丈夫かな？
初心者なので、コードを書いてもらっても、問題のところを自分で治せる知識があるかな？

作成開始！

準備

まずはAWS Builder ID を作成した。

次、Amazon Q　CLIをインストールしたかったけど、どこから始まるかを迷った。
とりあえず Windows 11を利用しているので、コマンドラインに以下のコードを打ってみた。

wsl -d Ubuntu

インストールされていなかったようなので、これにした

wsl.exe --install

インストール→再起動→再インストールを成功した
あとはこちらの記事通りにフォローした

## Change Directory
cd 

## Install missing packages
sudo apt install unzip

## Download installer
curl --proto '=https' --tlsv1.2 -sSf https://desktop-release.codewhisperer.us-east-1.amazonaws.com/latest/q-x86_64-linux-musl.zip -o q.zip

## Unzip installer
unzip q.zip

## Change directory
cd q

## Allow installer to be executable
chmod +x install.sh

## Install
./install.sh

modify shell configを許可して、無料アカウントでログインできた！

Amazon Qを使ってみよう

q chat で始めました
大きな文字でAmazon Qがでたので、ちゃんと動いてることが分かった。

プロンプトは@Neville様の投稿と同じフォーマットにしてみた。
母語は英語なので、英語でプロンプトを書いたDeeplからの翻訳を見に来たみんな様のために残す。
pygameは既にインストールされていたので、インストールは不要だった。

pygame を使って以下のルールで merge 2 ゲームを作成し、ローカルに保存してください。

ゲームルール

オブジェクトをドラッグ＆ドロップで12x8のマスに配置します。

各マスに入ることができるオブジェクトは1つだけです。

グリッド上には2種類のオブジェクトがあります：円」と「星」です。

丸には5つのレアリティがあります：コモン、アンコモン、レア、スーパーレア、スペシャル。

スターはユニークなオブジェクトです。マージすることはできません。スターをクリックすると、近くの空いているマスにコモンサークルがスポーンします。すべてのタイルが埋まっている場合は何も生まれません。

合体が成功するたびに、得点カウンターに1点加算される。

サークルの色

共通：白

アンコモン：赤、紺、オレンジ、黄、ティール、紫、緑、茶色

レア：ラベンダー、パステルイエロー、ブルー、ライトグリーン

スーパーレア：ピンク、ライトブルー

スペシャル：黒

サークルマージ・ルール

レアリティの異なる2つのサークルを合体させた場合、出来上がるサークルはレアリティの低い方のランダムな色になる

コモンサークルをマージしてランダムなアンコモンサークルを作ることができる

アンコモン、レア、スーパーレアのレアリティの場合、同じ色の2つのサークルをマージして、親の色の子を作ることができる

以下の最良の色の組み合わせは、常に以下の上位のカラーサークルを作成する：

赤＋紺＝ラベンダー

オレンジ＋イエロー＝パステルイエロー

ティール＋パープル＝ブルー

ダークグリーン＋ブラウン＝ライトグリーン

ラベンダー＋パステルイエロー＝ピンク

ブルー＋ライトグリーン＝ライトブルー

ピンク＋水色＝黒

アンコモンとレアのレアリティについては、2つの円のt

Please create a merge 2 game with these rules using pygame and save it locally.

# Game rules
- Drag and drop objects on a 12x8 grid of squares.
- Only one object may be in each square of the grid.
- There are 2 kinds of objects on the grid: 'circles' and 'star'
- Circles have 5 rarities: Common, uncommon, rare, super rare, special.
- Star is a unique object. It cannot be merged. Clicking on the star will spawn a common circle in a nearby unoccupied square. If all tiles are occupied, nothing will be spawned.
- Every time there is a successful merge, add 1 point to the score counter.

# Circle colors
- Common: White
- Uncommon: red, dark blue, orange, yellow, teal, purple, green, brown. 
- Rare: Lavender, pastel yellow, blue, light green
- Super rare: pink, light blue
- Special: Black 

# Circle merge rules
- If two circles of different rarites are merged, the resulting circle will be a random color of the lower rarity.
- Common circles can be merged to create a random uncommon circle. 
- For uncommon, rare and super rare rarities, two circles of the same color can merge to create a child of the parents color.
- The following best color combinations always create the following higher tier color circle:
  - red + dark blue = lavender
  - orange + yellow = pastel yellow
  - teal + purple = blue
  - dark green + brown = light green
  - lavender + pastel yellow = pink
  - blue + light green = light blue
  - pink + light blue = black
- For uncommon and rare rarity, two circles of the same rarity but not best color combinations can merge to create a child that is the same rarity with these color inheritance rules: 45% parent 1 color, 45% parent 2 color, 10% same rarity non-parent color.

# Game end conditions
- The game ends when the black circle has been created.

作成して保存してくれたけど、どこで保存されたか分からなかった。
C:ドライブを頑張って探しても見つけられなかった
ググりながらいろんなフォルダーを探してみた20分後、セットアップ時の対応でどこに作成されたか気づいた。

一番苦労したところはこれです。
初心者を笑わないでください。

デスクトップに移して、コマンドラインでゲームを開いてみた。

py merge_game.py

おおお！！悪くない！！

キレイにしよう

実際にプレイしてみると問題に気づいた。
白い〇は白いbgで見えないに決まってるだろ！

これぐらいの問題は自分で治せそうだけど、せかっくＱを使ってるなら任せられると思った。

マージゲームは良いのですが、グリッドの背景色が白だと白い円が見えません。

The merge game is good, but I can't see white circles if the background color of the grid is also white. can you give all the circles a black 1px outline?

Qが直して、丁寧に変えたところを説明してくれた。

Here are the changes I made:

1. Modified the Circle.draw() method to add a black outline:

python
   def draw(self, screen):
       center = (self.x * (CELL_SIZE + MARGIN) + MARGIN + CELL_SIZE // 2,
                self.y * (CELL_SIZE + MARGIN) + MARGIN + CELL_SIZE // 2)
       # Draw the filled circle
       pygame.draw.circle(screen, self.color, center, self.radius)
       # Draw a black outline (1px)
       pygame.draw.circle(screen, BLACK, center, self.radius, 1)



2. Also updated the code for drawing the dragged circle to include the same outline:

python
   # Draw selected object being dragged
   if self.selected_object and self.selected_object.dragging:
       mouse_pos = pygame.mouse.get_pos()

初心者として、説明がちょっと分かる気がした！
ゲームはできるようになったけど、色は分かりずらかった。
コードを開いて、PineappleOnPizza様のpear36パレットからいろんな色を選んだ。

変更前より良くなったけど、色によってマージはうまくいかないことも気付いた。
Ｑにロジックの説明をお願いしてみた。

色の合成の一部が期待した結果にならないのですが、合成時の色計算の各部分について説明してもらえますか？

some of the color merging isn't having the expected result - can you explain each part of the color calculation when merging?

Qが詳しく説明してくれたけど、自分の経験が足りなくてあんまり理解できなかった・・
でも、直すことも提案してくれたので、どの色がうまく合成していないことを確認して、Qに修正をお願いしてみた。

はい、お願いします。赤＋紺とオレンジ＋黄色は、予想通りベストマッチを生み出さない。

Yes please. Red + dark blue and orange + yellow is not creating their best match as expected.

Qが直してくれたんだけど、すべてのケースを書いたコードになったので、もっと大きなゲームだったらこれは良くないかもしれないと思った
でも今回はお試しなので、ＯＫ！

実際にプレイして、231合成でクリアできた！
ただ、おめでとうよりゲームオーバーの表示だった
それ＋他の細かいところの修正をＱにお願いした

以下の変更をお願いできますか？

星をドラッグ＆ドロップできるようにして、プレイヤーが星の位置を変えられるようにする。

星の輪郭も黒くしてください。

ゲームオーバー！」の代わりに、「あなたの勝ち！」というテキストにしてください。

右下に『Clear board』ボタンを作り、盤面からすべての円を消すことができるようにする。ユーザーは、本当に盤面をクリアすべきかどうかを確認する必要があるはずです。

Can you please make the following changes?
- Allow the star to be dragged and dropped around the board so that the player can change it's location.
- Give the star a black outline too.
- Instead of 'Game Over!' the text should be "You Win!"
- Create a 'Clear board' button in the bottom right that can clear the board of all circles. The user should have to confirm whether or not the board should really be cleared.

Qは要求されたすべての変更してくれた
特に印象に残ったのは、これ：

5. Additional Improvements:
   • Added a semi-transparent overlay when the confirmation dialog is shown
   • Improved the star dragging visualization to show the star shape while dragging
   • Added a special case for the star: holding SHIFT while clicking the star will spawn a common circle (original
behavior)

依頼せず、QoL系の変更をいれてくれたのすごくない？？？

と思ったけど、星を動かしたらゲームがクラッシュしたｗ
クリアボタンも押しても何も起こらなかったので、また修正をお願いした。

いくつか問題がある。星をドラッグしようとすると、ゲームがクラッシュした。盤面を消すボタンも、盤面からすべての円を消すことはできなかった。

There are some problems. When I tried to drag the star, the game crashed. The clear board button also did not remove all circles from the board.

問題を見つけたら、詳しく説明してくれた！

The problem was in the handle_release method where it was trying to merge any two objects, including when one of them
was a star. This caused the game to crash because the merge_circles function expects both objects to be circles.
I modified the handle_release method to check if both objects are circles before attempting to merge

すごい！けど！またクラッシュした！
クラッシュした後、コマンドラインで以下のエラーが出た。

AttributeError: module 'pygame' has no attribute 'K_SHIFT'. Did you mean: 'K_LSHIFT'?

コードを開いて、 K_SHIFT → K_LSHIFTに変更してみて、解決できた
でも☆をクリックしても新しい〇が出なくなった

Ｑに私が修正したところを伝えて、〇についての問題を教えてくれた。

K_SHIFTをK_LSHIFTに変えて、星をドラッグ・アンド・ドロップできるようになった。でも今は、星をクリックすると、星がスポーンされるのではなく、星がピックアップされてしまいます。クリックすると星が円を描き、1秒以上クリックしたままだとドラッグ＆ドロップできるようにできないでしょうか？

That sort of worked - I had to change K_SHIFT to K_LSHIFT and I can drag and drop the star. But now, clicking on the star picks it up instead of allowing me to spawn stars. Can we change the behavior of the star to create a circle when clicked, but be able to be dragged and dropped if the star is clicked and held for more than one second?

Qは必要な変更を行った。
星をクリックしたままにすると、青いローディング・アークが現れる。
円弧がいっぱいになると、星をグリッドの周りにドラッグ＆ドロップできるようになった！
クリアボタンも使えるようになった

でも、初めてプレイした人はどうすればいいか分からないだろうね
そして、自分でやった時もずっとメモを書いてプレイしたので、ユーザーのために少し変更しよう

以下の変更をお願いします：

ボードのサイズを8x6に変更する

碁盤の左側にUI要素のための領域を追加する。

ゲームタイトル「Mergemon 」をこのスペースの上部中央に大きな文字で追加する。

その下にスコアを追加

ゲームのクリア方法を追加します：「星をクリックするとマーゲモンが出現します。合体のルールを理解し、つかみどころのないブラックメルゲモンを作ろう！"

説明の下に入力欄を追加し、ユーザーがメモを書き込めるようにする。

Please make the following changes:
- Change the board size to 8x6
- Add an area on the left of the board for UI elements.
  - Add the game title "Mergemon" in big letters centered in the top center of this space
  - Add the score underneath that 
  - Add the instructions on how to clear the game: "Click on the star to spawn Mergemon. Figure out the rules of merging, and create the elusive Black Mergemon!"  
  - Add an input section beneath the instructions so that the user may write notes.

理想に近づいた！
よく見たら、指定をしなくても、App名・ゲーム名も変えてくれたのはとてもうれしい！！

とはいえ、まだまだMSPaintで描いたものに見えるので、画像を作成していれよう
やり方は分からないけど、きっと先生は教えてくれる！

次のことを教えてください：

ボードの周りの上、左、右の間にもう少しスペースを追加してください。今のところ少し窮屈に感じる。

アセットがドラッグされているとき、そのアセットがアクティブオブジェクトとして表示されるように、不透明> - 度を少し下げてもらえませんか？

グリッドの四角の角を少し丸くしてほしい

アセットを追加したいのですが、具体的には新しいフォント、新しいロゴ画像、各円を置き換える画像を追加したいです。これらを変更するためのフォルダを作成してもらえますか？

Please help me with the following:
- Add a bit more space between the top, left, and right sides around the board? It feels a bit cramped at the moment. 
- When an asset is being dragged, can you lower the opacity very slightly to show it as the active object?  
- I want each of the grid squares to have slightly rounded corners.
- I want to add my assets, specifically a new font, a new logo image, and images to replace each of the circles. Can you create a folder for me to change these things?

ちょっと時間かかったけど、アセット用フォルダーを作成して、自分の画像などの入れ方も丁寧に説明してくれた

1. Custom Font:
   • Place a TTF or OTF font file in /assets/fonts/ named custom_font.ttf
   • The game will automatically use this font for all text

2. Logo Image:
   • Place a PNG image in /assets/images/ named logo.png
   • This will replace the "Mergemon" text in the UI panel

3. Custom Mergemon Images:
   • Place PNG images in /assets/images/ following the naming convention:
     • common.png for white common Mergemon
     • uncommon_red.png, uncommon_dark_blue.png, etc. for uncommon Mergemon
     • rare_lavender.png, etc. for rare Mergemon
     • And so on for all rarities and colors

4. Star Image:
   • Place a PNG image in /assets/images/ named star.png
   • This will replace the default star shape

ちなみに、コード内で画像のサイズなどの指定もコメントしてくれてすごく分かりやすかった

+    43: ## Image Requirements
+    44:
+    45: - All images should be PNG format with transparency
+    46: - Recommended size: 50x50 pixels for Mergemon and star images
+    47: - Logo image can be larger, but should fit within the UI panel width (300px)
+    48: - Images will be automatically scaled to fit the grid cells

Aespriteで可愛いモンスターを作って、アセットフォルダーに入れた。
monogram という無料フォント（作成者：datagoblin）もいれてみた。

ちょっとだけ本当のゲームに見えない？
今にして思えば、最終的に画像にしたかったら、色変えはしなくてもよかったよね。
それはそう。まぁ、勉強になった。

もう少し可愛くできそうので、Q先生にいろんな編集をお願いしました。

素晴らしい出来栄えですが、もう少し変更点を教えていただけませんか？

ボードエリアの背景を画像を使ってタイル状にしたいのですが

背景が見えるように、ボードのマスを少し透明にしたい

星がドラッグ＆ドロップされるまでの時間を短くしたい。0.3秒にして、青いローディングバーを白に変えることは可能ですか？

メモ『セクションを』Merge Memo'に変更する

It's looking fantastic, but can you help me with a few more changes?
- I want to make my own tiling background for the board area using an image. 
- I want the board squares to be slightly transparent so that the background can be seen
- I want the star to take less time before being allowed to be dragged and dropped. Is it possible to make it 0.3 seconds, and the blue loading bar changed to white?
- change the 'notes' section to 'Merge Memo'

惜しい・・
てか四角の角がまた固くなった

もう少し詳しく編集をお願いしてみた

いくつか追加したので、もう少し視覚的な変更を加えたい。

clear board『ボタンとプロンプトを含むすべてのテキストがassets/fontsフォルダ内の』monogram.ttf'フォントを使用していることを確認してください。

clear board'ボタンの左側が一番右のグリッドマスの右端と一直線になるようにしてください。また、ボタンはグリッドの上辺と同じ間隔を下辺にも持つようにします。

タイリングの背景はクリアボードボタンの後ろにも広がるようにする。

クリアボードボタンの角は丸くする。

ボードのマスも角を丸くする。

I added some stuff and want to make a few more visual changes.
- Make sure all text, including the 'clear board' button and prompts, use the 'monogram.ttf' font in the assets/fonts folder
- I want the left side of the 'clear board' button to be in line with the right edge of the right most grid squares. The button should also have the same among of space along the bottom as the grid does to the top.
- The tiling background should aslso extend behind the clear board button.
- the clear board button corners should be rounded
- the squares of the board should also have rounded corners

え？ダメだった・・？

納得できない！！もうちょっと詳しく聞いてみよう
今回不満なところをもっと具体的に言ってみて、自分の判断で問題のところも言ってみた。

いくつかの変更が表示されていないようです。もう一度確認してもらえますか？

碁盤の角の白い四角が丸くなっていない。

クリアボードのボタンがボードの端を越えています。ボタンの右側が、ボードとボタンの境界半径を含むボードの右側と一直線になるように移動できますか？

私の背景はまだクリアボードボタンを超えていません。背景はゲームボードの後ろの領域とクリアボタンの領域の両方をカバーする必要があります。

Some of the changes don't seem to have appeared. Can you check again?
- The white squares of the board's corners are not rounded anymore, but i want them to be.
- The clear board button is still going past the board edge, i think because of the border radius. Can you move it so that the right side of the button is aligned with the right side of the board inclusive of the board and button's border radius?
- my background still isn't going past the clear board button. the background should cover both the area behind the game board and the clear button area

直してくれた！！もしかして完成？！

・・と思ったけど、友達に見せたらバグ発見

バグってるところをQに伝えて、ほしかった機能を説明した

ありがとう！見た目はとてもいいのですが、メモエリアがちょっとバグっています。
ユーザーがメモエリアに入力したとき、テキストが入力エリアからはみ出さず、次の行に折り返されるようにしてください。エリアがスクロールできるようにする。一度に1つのキーではなく、バックスペースを押したままテキストを速く削除できるようにする。

Thanks! It looks great, but the memo area is a little bit buggy.
When the user types into the memo area, make sure the text doesn't go out of the input area, and instead wraps to the next line. Make sure the area is scrollable. Allow the user to hold backspace to delete text faster instead of one key at a time.

直してくれた！
ほぼ完成だけど、あとちょっとうまくできそうので、最後の依頼をしてみた。
星を動かすときのホールドアニメーションは気に入らなかったので、消すことをお願いした。

I love it! I think this is almost complete, but can you help with one more thing? I think I don't like the loading arc of the star. Can we remove the loading star arc and allow the star to be dragged and dropped if pressed for more than 0
.2 seconds?

ほしかった機能はできた。音楽とsfxもあったらいいよね？
ついでにメモのところのPADDINGも増やしたい

もう少し変更をお願いします：

メモの部分に少しパディングを追加して、テキストが入力の境界線に近いように見えないようにしてください。

ゲーム中に自動的に流れるBGMを追加したい。

マージ成功時の効果音を追加したい。

クリアボードをクリックした時の効果音を追加したい。

ボードクリア時の効果音を追加したい

スターがマーゲモンをスポーンした時の効果音を追加したい

クリアボタンポップアップメニューの「はい」ボタンをクリックした時の効果音を追加したい

クリアボタンポップアップメニューの「いいえ」ボタンをクリックした時の効果音を追加したい。

クリアボタンとクリアボタンのポップアップメニューの「はい」「いいえ」ボタンは、マウスホバー時に黒いアウトラインを表示させたい

A few more changes please:
- Please add a little padding to the memo section so the text doesn't look so close to the input border.
- I want to add a background music that plays automatically while the game is running.
- I want to add a sound effect for a successful merge.
- I want to add a sound effect when the clear board is clicked
- I want to add a sound effect for when the board is cleared
- I want to add a sound effect for when the star spawns a mergemon
- I want to add a sound effect for when the clear button popup menu 'yes' button is clicked
- I want to add a sound effect for when the clear button popup menu 'no' button is clicked
- I want the clear button and the clear button's popup menu yes/no buttons to have a black outline on mouse hover

SFXはSoundTonic様の「SFX Pack 1 - UI menu sounds」
BGMはOtoLogic様の「NES General B02」

非常にゲームっぽくなったけど、ポップアップのボタンホバーSFXも欲しい
全体的に音楽とSFXのボリュームも下げたい

This is great~! Can I ask for a couple more things? I want to add a sound effect for when I over over the yes/no buttons. I also want the background music and all sound effects to be at half the current volume.

追加してくれたけど、ボタンのアウトラインは今気づいた。
ホバーだけのはずなのに、ずっとあるんですね。
そして、クリアボタンもホバーしたらSFXも出るけど、思ったより良かったのでそれは放置

ボタンにカーソルを合わせるまで輪郭が出ないようにしてください。SFXの音量が少し大きいのですが、すべてのSFXの音量を下げることはできますか？背景の音量はそのままでいいと思います。また、ゲームウィンドウのアイコンをデフォルトのpythonのものではなく、私に指定させてください。

The buttons should not have an outline until hovered. The SFX are a bit loud - can you reduce the volume of all the SFX? I think the background volume is fine as it is. Please also let me specify the icon for the game window instead of the default python one.

ほぼ完成！
まだまだゲームっぽくできそうので、おめでとうのSFXと特別合成SFXも追加したい
BGMはOtoLogic様の「フレーズ02」にした。

テストしたらSFXに不満なかったけど、You Win画面はダメだった
黒Mergemonはあんまり見えないので、色を変える

これは素晴らしいことだ！もうひとつ修正すべき点があります。
You Win'画面がポップアップしたら、テキストの後ろに白い四角があるようにして、テキストが読めるようにしてください。ボードとスコアをリセットする紫色の『Play Again』ボタンを追加してください。

This is great! I can see one more thing we need to fix.
When the 'You Win' screen pops up, make sure theres a white square behind the text so that the text can be read. Include a purple 'Play Again' button that resets the board and score.