Building My First Game with Amazon Q Developer and AWS Amplify
I used JS, CSS, HTML + Amazon Q Developer and deployed on AWS Amplify for the AWS Game Challenge as a noob coder beginner
Published Nov 1, 2024
Creating my first game was a rewarding and challenging journey, and using Amazon Q Developer made it surprisingly approachable. In this post, I’ll share my experience building an AWS-themed memory game using Amazon Q Developer, deploying it with AWS Amplify, and experimenting with AWS S3 and DynamoDB for future enhancements. If you’re interested in game development or AWS tools, I hope my journey will provide some helpful insights!
Please play the game here! https://main.d1g6sms06wt3la.amplifyapp.com/
And see a playtest here: https://youtu.be/euFH2pwIsZA
I wanted to create a simple memory game where players match pairs of AWS service icons on a grid. The idea was to make something educational and fun while learning how to use AWS services myself. Being a beginner, I needed guidance and support throughout the coding process, which Amazon Q Developer provided.
The AWS Memory Game displays a grid of cards, each with an AWS service icon. Players flip over two cards at a time, aiming to match the icons. If they match, they stay visible; otherwise, they flip back over. It’s a test of memory with an AWS twist!
As a beginner, I was initially overwhelmed by the idea of coding a game from scratch. Amazon Q Developer turned out to be a lifesaver. I used Visual Studio Code and integrated Amazon Q Developer directly into my editor. Here’s how Amazon Q helped:
- Generating the Basic Structure: Amazon Q provided code suggestions for setting up the HTML structure and creating a CSS grid for the game board.
- Implementing Game Logic: I needed help writing JavaScript functions to handle game logic like card flipping and matching. Q provided guidance and example code snippets for each function.
Here’s the basic HTML structure that Amazon Q helped me design:
And here’s the CSS to style the game grid:
And eventually my final JavaScript for the game:
After building the basic game, I was excited to deploy it. AWS Amplify turned out to be an ideal tool for this. Its simple configuration allowed me to deploy the game quickly and easily, making the application accessible from anywhere.
Setting up Amplify involved connecting my GitHub repository, configuring the build settings, and clicking "Deploy." It was that simple! Within minutes, the game was live, and I could share it with others. This smooth deployment experience encouraged me to keep experimenting and improving my project.
To make the game more advanced, I wanted to:
- Use AWS S3 for storing game assets (like the AWS service icons) for faster access and scalability.
- Implement a leaderboard using DynamoDB to keep track of player scores.
However, as a beginner, I faced some challenges:
My initial idea was to store the game’s images on S3 and access them via S3 URLs. While I managed to upload the assets to S3, configuring public access permissions and understanding the best way to link these assets in my JavaScript code was tricky. I ultimately decided to use local image files for this iteration but plan to use S3 for future versions.
For a leaderboard, I wanted to store each player’s score and completion time in DynamoDB. Here’s the JavaScript code I tried to use to write scores to DynamoDB:
Despite setting up DynamoDB and writing this function, I ran into issues with permissions and data structure. For now, I’m displaying a local leaderboard, but DynamoDB remains on my roadmap as I learn more.
Building this game was a learning-intensive experience. Some of the main challenges I faced were:
- Understanding AWS Permissions: Configuring public access on S3 and correctly setting up IAM permissions for DynamoDB were challenging but rewarding once I got a basic understanding.
- Working with JavaScript Timers: Implementing a live timer added complexity, as it required precise intervals and event handling.
Here’s the code I used for the live timer:
Moving forward, I plan to:
- Fully implement AWS S3 to host game assets, which will allow for faster loading and better scalability.
- Set up a leaderboard with DynamoDB to enable competition and improve player engagement.
- Continue exploring Amazon Q Developer for more advanced coding assistance as I expand the game’s functionality.
Building the AWS Game taught me invaluable lessons in both coding and using AWS services. With Amazon Q Developer, I could overcome many coding challenges, and AWS Amplify provided a smooth deployment experience. Although I didn’t fully implement S3 and DynamoDB, I now have a clearer roadmap for future enhancements.
If you’re a beginner like me, I highly recommend exploring Amazon Q Developer and AWS services. They provide powerful tools that make complex projects more accessible.