Zenn
🤖

Amazon Q Developer CLIでゲームを作った〜AWS Pokerゲーム

に公開
Vibe Coding
amazoq
tech

JAWS-UG茨城支部のオンラインイベントで Q Developer CLIでゲームを作ってみました（モデルはclaude4)。短時間で結構面白いハンズオンになりました。

こんな感じのゲームです

https://youtu.be/e_Zp7JMcxxw?si=20hFW8lQh6yrLjSn

作りながらメモを取ればよかったのですが取って無く、後から思い出して書いているのでプロンプトなどは実際とは若干異なると思います。

リポジトリはこちら
https://github.com/bohnen/amazon-q-poker-game

ゲームの内容

AWSということで、AWS Architecture Icons を使った何かを作ろうというところまではイメージを固めていました。

  • 最近Baltro（https://www.playbalatro.com/) にハマっていたので、ハイスコアを競う一人用ポーカーは面白いなと思い、アーキテクチャアイコンを使ったポーカーに決定。
  • 数字と種類（ランクとスートといいます）をどう決定するか悩んだのですが、数字はまあアイコンファイルの順に適当に振っても問題ないだろう、スートはアイコンの色でいいんじゃないかなと考えます。
  • どう考えてもスートに偏りが出るのですが、そこは配点で工夫すればいいかと適当に考えました。

AIに指示するための仕様を作成したのがこれ

# AWS Poker Game

## 概要

AWSのアイコン(Resource-Icons)を使用して、ポーカーゲームを作ります。
一人でできるポーカーゲームで、役を作って得点を競います。
ランクはアイコンの順に適当に決め、スートはアイコンの色で決めます。

## カード一覧

cards.csvに記載する

適当ですが、ここから始めてみました。

AWSのアイコンを使ったポーカーゲームを作ります。仕様はSpec.mdに記載しました。
まずuvを使ってpythonプロジェクトを作成してください。
ゲームはpygameを使った2Dゲームとします。

これで、プロジェクトの骨格と、Hello Worldを表示するだけのpyhonプログラムとテストコードが生成されました。優秀。

開発工程

アイコンの一覧作成

まずは、Architecture Iconsをダウンロードしてプロジェクト内に移動し、アイコンの一覧を作成することから始めます。単にアイコンを表示するだけではなく、サービス名やランク、スートも決定する必要があります。

Architecture-Iconsフォルダの48pixelのアイコンの一覧から、cards.csvを作成して。cards.csvには、サービス名、ランク、スート、ファイルパスを含めてください。
- ランクはファイルの読み取り順に１−Kを順番に割り当てます
- スートはアイコンの色とします

すると、cards.csvを生成するためのpythonコードを書き始めました。一個一個読んでcsv作ると思っていましたが意外です。ただ初期バージョンではアイコンの色は調べず、ファイル名に書いてあるAWSサービスのカテゴリから決め打ちで色を決めていました。

ゲームが動くようになってプレイしてみると、カテゴリの決め打ちの色とアイコンの色が一致しないことが多かったので、ちゃんとアイコンの色を反映させるようにと指示を出すと、scikit-learnを使ってアイコンの色をk-meansで分類し、6色の代表色に近い色を指定してくれるコードを書き始めます。怖い。。。

これでcards.csvができます。どう考えても偏りがありますので、傾斜配点を考える必要があります。

配点の検討

さて配点を検討します。

カードの配点を検討します。一般的なポーカーの役をベースに、cards.csvの一覧から
スートに偏りがあることを考慮して配点を考え、score.txtに記録してください。
また、AWSのゲームなので、AWS固有の役も検討してください。

このように指示をしたところ、cards.csvを分析して分布を計算するpythonスクリプトを作成しました。それをベースに役と配点表を作成したのがscore.txtとして記録されます。

ここでゲームのリソースとルールができたので、実際にゲームのコードを生成していきます。

ゲームの生成

cards.csvのカードをベースにしたポーカーゲームのコードを作成してください。
配点はscore.txtに記録されています。その他の特徴は下記の通りです
- カードはトランプのように対角にランクを表示、中央にアイコンを表示、その下にサービス名とする。スートはカードの枠線の色とする
- 手札のドローは二回までとする
- 配役の決定はプレイヤーが選択し、その時に最も高い配役を自動で計算してスコアに加える
- ラウンドは５回として、合計のスコアをハイスコアに記録する
- 配役とスコアで一意になるようなゲームコードを生成し、共有できるようにする
- ゲームコードを読み込みハイスコアに追加する機能をもつ
- 配役を確認できるボタンをつける
- 残りのカードを確認できるボタンをつける

このような指示で、ゲームを作成して動作させるところまで勝手にやってくれます。自分ではコードを一行も書いていません。すごい。
あとはデバッグをしつつ修正点を会話しながら直していきます。デフォルトでは日本語が文字化けするので、webフォントをダウンロードしてそれを利用するように指定したりしました。

音楽の生成

動画では音は入っていませんが、実はゲームに音もついています。これもゲームが動くようになってから、

ゲームにBGMと操作音を追加してください。音楽ファイルはsounds以下に保存してください。

という指示を与えたら、音楽ファイルを生成するpythonスクリプトを生成して、ゲームで勝手に使ってくれます。

Readmeの生成

コードを生成するだけではなく、Readmeも勝手につくってくれて、ゲームの特徴やルール、起動方法などを詳細に書いてくれます。これが仕様書のようなものです。

まとめ

ハンズオンの時間は2時間弱でしたが、1時間くらいでゲームは動くようになっていて、残りをブラッシュアップの時間に当てることができました。本当にすごい。
他の人の作品を見るとWebアプリとして作った方が見栄えはいいような気がするので、今度はWebアプリで作成してみようかと思いますが、vibeコーディングの楽しさが十分味わえた良い機会でした。

最後にpokerの綴を間違っていたことに気がついて、直して、みたいな適当な指示でちゃんと全部なおしてくれました。これも自分でやるとかなりしんどい上に精神的ダメージも大きいので良いです。

Discussion