iTranslated by AI
Building a Game with Amazon Q CLI
This article is part of the following campaign.
Japanese version https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/
English version https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games-with-amazon-q-cli-and-score-a-t-shirt
Let's Build a Game
I participated in a campaign to create a game using AI coding with Amazon Q CLI and receive a T-shirt.
I had it build a Puyo Puyo-style game that runs in the browser using React.
I referred to the following for how to install Amazon Q CLI.
The subsequent work was performed in the following environment.
Environment
macOS Sequoia 15.5
Amazon Q CLI 1.12.1
Volta 2.0.2 (Node.js v24.2.0)
Prompts Provided
I set the prompts as follows.
As a tip, I requested it to git commit using the provided prompt as the commit message so that I could roll back if it completely broke. (This might be better done manually in a professional setting, as allowing it to use git commands might lead to accidental destruction someday.)
Please create a game similar to Puyo Puyo using React.js. In Puyo Puyo, there are puzzle pieces called "Puyo"; please create these using AWS simple icons. Since colors are set according to the type of AWS simple icon service, make it so that icons disappear if they have the same color.
I will explain the rules of Puyo Puyo, so please follow them.
* The field basically consists of a grid of 12 vertical squares by 6 horizontal squares. One block (Puyo Puyo, abbreviated as Puyo) can be placed in each square of the grid. However, one square's worth of Puyo can be placed outside the top of the screen.
* Pairs of Puyo fall from the top (called "set Puyo"). Puyo come in different colors depending on their type, with 3-5 colors available. The player performs one of the following operations on the Puyo: rotation, horizontal movement, or fast drop.
* The next falling Puyo is announced outside the field frame as "NEXT Puyo".
* When falling Puyo collide with the floor of the field or other Puyo, they are fixed in that position. However, if there is a gap below even a single square of Puyo, such as when placing set Puyo horizontally, that Puyo alone is forced to fall.
* If Puyo of the same color as the fixed Puyo are in the four surrounding directions (vertical and horizontal only, not diagonal), they stick to each other.
* When 4 or more Puyo stick together, they disappear and score points.
* Puyo that were above fall due to the disappearance of Puyo. At this time, if 4 or more Puyo stick together again, they disappear, causing a chain reaction. Even just the act of lining up 4 colors and clearing them is considered one chain, and it is called "n chains" depending on the number of disappearances (n times). Clearing multiple colors simultaneously or clearing the same color in different locations is treated as one chain.
* The score obtained when clearing Puyo can be calculated by multiplying the number of cleared Puyo by the set "chain multiplier".
* If a Puyo touches the X mark on the top row, 3rd column, it's "suffocation" and game over.
The rule "Puyo that were above fall due to the disappearance of Puyo" is not being properly followed. Please fix it.
The rule "if there is a gap below even a single square of Puyo, such as when placing set Puyo horizontally, that Puyo alone is forced to fall" is not being properly followed. Please fix it.
I have placed the icons I want you to use in the assets folder. From now on, instead of color, please judge based on whether the directories where the icons are stored are the same. Create a JSON file to store the mapping between directories and icons if necessary.
The icons are not loading correctly. Please fix it.
Please update the README.md.
The number of AWS service categories listed in the README.md is incorrect. Please check carefully and recreate it.
Please modify it to additionally use public/assets/Arch_Artificial-Intelligence.
Detailed explanation of the configuration JSON file is not needed in the README.md. Please explain it simply.
Please delete unused files in public/assets.
Please change the name from AWS Puyo Puyo to AWS icons pazle.
Finished Product
Here is a screenshot of the completed game.
I didn't provide any specific UI instructions; I used the CSS exactly as Amazon Q generated it.
What I Could and Couldn't Do
What I Could Do
Completed the game without any coding
Automated version control by instructing it to "git commit" from then on
What I Couldn't Do
I knew Puyo Puyo was Sega's, but it didn't understand the rules
→ I copied and pasted the rules from Wikipedia, and it built it according to those rules
It didn't fetch assets on its own, so I had to place them in the working directory manually
What I Want to Try in the Future
I'm thinking about having it write the necessary CDK code for deployment and seeing if I can take it all the way to making it public.
While there are still things we can't leave entirely to AI, I think finding the right balance can significantly improve the developer experience. If you haven't tried it yet, why not give it a go?
Discussion