🕹️ AWS-Powered Tetris: Building a Retro Game with Amazon Q and Amplify

There's something magical about the games we grew up with. The simple mechanics, the blocky graphics, and the maddeningly catchy music are etched into our collective memory. So when AWS announced the Build Games Challenge, a global event to recreate these classics using modern AI tools, I knew I had to jump in.

The mission was clear: build a retro-inspired game using the Amazon Q Developer CLI and document the journey. My choice? The undisputed king of puzzle games: Tetris. But this wouldn't be just any clone. My vision was a full-stack, cloud-powered version with a real-time leaderboard, secure user authentication, and a slick, modern frontend.

This is the story of how I brought a Soviet-era classic into the serverless age, with an AI coding assistant as my partner.

If you want to just look at the code or play the game head over here:-

https://github.com/sjramblings/amazonq-game-builder-challenge
https://tetrics.sjramblings.io/

The Developer's Toolkit

To bring this vision to life, I assembled a powerful trio of technologies:

• Amazon Q Developer CLI: My AI pair programmer. This isn't just autocomplete; it's a generative AI assistant in the terminal that can generate code, refactor applications, and—as I discovered—even interpret images to debug UI issues.
• AWS Amplify: The powerful backbone for the entire application. Amplify is a set of tools and services that makes building and deploying full-stack web and mobile apps on AWS incredibly efficient.
• Phaser.js: A popular and lightweight HTML5 game framework, perfect for the 2D game logic.

Effective Prompting: How to Talk to Your AI

Before diving into the code, it's worth sharing what I learned about communicating with Amazon Q. A good prompt is the difference between a helpful suggestion and a game-changing solution.

• Be Specific and Provide Context: My initial prompt wasn't just "build Tetris." It specified the tools (Phaser, AWS Amplify Sandbox), the goal (scoreboard, authentication), and the technology (DynamoDB, Cognito). This context is crucial.

• Iterate and Refine: Don't expect a perfect solution on the first try. Treat it like a conversation. When Q's first solution for the UI layout wasn't quite right, I didn't start over. I refined the prompt, saying "That's closer, but now it's not resizing..."

• Use Its Own Language: When I encountered a build error, I didn't try to describe it. I fed the entire raw error log directly to Q. It understands its own ecosystem's errors better than I can paraphrase them.

• Show, Don't Just Tell (Multi-modality): The most powerful technique was using screenshots. Describing a visual bug is hard. Showing it is instant and unambiguous.

Chapter 1: The Foundation - From Zero to Live in Minutes

Every great journey starts with a single step. For me, that meant scaffolding a basic project from a public Phaser + React template. With the code cloned, it was time to bring in AWS.

This is where Amplify's magic first shines. Instead of wrestling with infrastructure, the process was pure development automation:

1. I connected my GitHub repository to the Amplify console.
2. Amplify instantly detected the Next.js framework and configured the optimal build settings.
3. I clicked "Save and deploy."

In just a few minutes, I had a live, globally accessible URL running my base template. This seamless CI/CD workflow gave me the confidence to iterate quickly.

With my production pipeline set, I moved to local development. Here, I leveraged one of Amplify Gen 2's killer features: the Sandbox. By running a single command, I spun up a fully-featured, isolated cloud backend on my local machine.

This meant I could build and test new features, like my database and authentication, in a safe, disposable environment without affecting my live URL. It’s the perfect blend of local speed and cloud power.

Chapter 2: The Art of Conversation - Coding with an AI Partner

With the foundation laid, it was time to build the game itself. I fired up the Amazon Q CLI with q chat and began the conversation.

The Initial Prompt: Setting the Stage

A good prompt is the difference between a helpful suggestion and a game-changing solution. I learned to be specific and provide rich context.

My Prompt to Q: "I'm creating a game using the Phaser game engine. I'm working locally within an AWS Amplify Sandbox... Can you assess this repo and create a Tetris game with a scoreboard that logs users' scores into an appropriate AWS Amplify construct, such as DynamoDB? Enable Cognito for authentication so that we can track user scores."

Q didn't just spit out a monolithic code block. It acted like a seasoned developer, analysing my repo, modifying the Amplify data schema for a Score table, and then generating the core game logic, React components, and AWS integration code. In a remarkably short time, Q had scaffolded a complete, playable application.

The Reality of Development: Iterative Debugging

But as any developer knows, the first draft is never the final one. The app was functional but needed refinement. This is where the iterative, conversational nature of Q truly shined.

Challenge 1: Taming the UI

Initially, the app was a mess—the login form, game, and controls were all displayed at once.

Q's solution was a clean refactoring of my root React component, introducing state variables to conditionally render components—a foundational pattern that saved me from manually structuring the entire UI flow.

// AI-generated logic to control the UI flow const [isAuthenticated, setIsAuthenticated] = useState(false); const [showAuth, setShowAuth] = useState(true); // ... later in the return statement {showAuth && !isAuthenticated && <AuthComponent />} {!showAuth && isAuthenticated && <PhaserGame />} 

Challenge 2: When an AI Can See

The game canvas was stuck in the corner.

Describing a visual bug in text is difficult and imprecise. So, I used Q's most impressive feature: multi-modality.

My Prompt to Q: "I've taken a screenshot of the issue here /Screenshot-issue.png. Can you assess this and make the necessary updates?"

Q analysed the image and came back with a perfect diagnosis:

"I can see the issue! The game canvas is not filling the screen properly... it's showing as a small rectangle in the upper left area. The RESIZE mode isn't working as expected."

It then generated the correct Phaser configuration to fix it.

// AI-generated Phaser scale manager configuration const config = { type: Phaser.AUTO, scale: { mode: Phaser.Scale.RESIZE, // Dynamically resizes to fill container autoCenter: Phaser.Scale.CENTER_BOTH // Keeps it centered }, // ... other scene and physics config }; 

However I had limited success with these changes. In the end I actually pasted the contents of a medium blog post into Q to provide guidance and it nailed it in a single shot! Impressive.

Challenge 3: Conquering the Backend Beast

The final boss of bugs was a cryptic backend error: authenticated users couldn't save their scores. I fed the raw, intimidating error log to Q. It expertly diagnosed a conflict in my Amplify authorization rules, identifying that allow.publicApiKey() and allow.guest() were creating duplicate public access pathways. Q guided me to a clean solution using identityPool as the default authorization mode.

// After (AI-suggested fix) const schema = a.schema({ /*...*/ }).authorization( (allow) => [allow.guest(), allow.owner()] ); export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'identityPool', // The key change! }, }); 

This fix, for a complex backend issue, was the ultimate proof of Q's capability. It saved me what could have been hours of documentation-diving and frustration.

The Final Touch: An AWS-Inspired Masterpiece

With the game fully functional, it was time for a creative flourish. I asked Q to theme the game around AWS services. This was development automation at its most fun*.*

Q created a new "AWS TETRICS" mode, theming each piece after a service icon and color scheme: the I-piece became an orange AWS Lambda function, the O-piece a green Amazon S3 block, and so on. The result is a game that is not only fun but a visual celebration of the AWS ecosystem.

Conclusion: A New Era of Development

This challenge was full of fun. AWS Amplify provided the rock-solid, scalable foundation that allowed me to focus on building, not managing infrastructure. The seamless CI/CD and powerful Sandbox environment created a development workflow that was both fast and safe.

But the star of the show was the Amazon Q Developer CLI. It was more than an assistant; it was a true collaborator. It can architect solutions, automate tedious tasks, and debug complex problems across the full stack—even by examining a picture. The future of development is here, and it lives in the command line.

I hope this helps someone else. Cheers