AWS Logo
Menu
A Simple Game Hosted on AWS S3 with Amazon Q

A Simple Game Hosted on AWS S3 with Amazon Q

The sliding puzzle game challenges players to arrange tiles. With the assistance of Amazon Q, the development process becomes faster and more efficient.

game-challengeaws-qamazon-s3s3
Chao Yu
Published Dec 5, 2024

Introduction

The game features a 3x3 grid with 8 numbered tiles and one empty space. Players slide adjacent tiles into the empty space to rearrange them, aiming to achieve the correct numerical sequence. To keep the game simple, a timer is included to track players' performance, while move counting and ranking are reserved for future enhancements. Additionally, a reset button allows players to restart the game, either for multiple attempts or to reset an unsolvable configuration.
Interface of the game
Interface of the game

Installation of Amazon Q

Using Amazon Q in Visual Studio Code is straightforward. Simply navigate to the Extensions view, search for Amazon Q, and click the "Install" button. Once installed, Amazon Q is ready to assist. After logging in, the AWS IDE extensions are fully integrated and ready to use within the Visual Studio Code interface.
Amazon Q in Visual Studio Code
Amazon Q in Visual Studio Code

Development with Amazon Q

The following three types of files are essential for building a web-based game. For those with limited experience in game development, Amazon Q can provide valuable assistance in generating code:
  1. HTML Structure: Amazon Q provides code snippets and suggestions to create the foundational HTML layout for the game grid, ensuring a solid starting point.
  2. CSS Styling: It offers guidance in designing a responsive and visually appealing grid, helping to craft an engaging user interface.
  3. JavaScript Logic: Amazon Q assists in implementing key functionalities, such as handling tile movements, detecting win conditions, and managing the game state effectively.
    Using Amazon Q to help coding
    Using Amazon Q to help coding

Deployment with AWS S3

After completing the game's development, deploying it with AWS S3 was a straightforward process:
  1. Uploading Files to S3: Uploading the required files (HTML, CSS, and JavaScript) to S3 was simple and efficient, utilizing S3 as a reliable storage solution.
  2. Configuring Permissions:
    • Step 1: Set the "Block Public Access" option to "off" in the permissions tab.
    • Step 2: Apply a bucket policy to enable public access, as shown in the image below.
      While these settings may evolve in the future, they remain applicable and useful at this time.
      AWS S3 permission settings
      AWS S3 permission settings
  3. Copying the URL: Copy the public URL of the HTML file. With a single click, the game became live and accessible online.
This seamless deployment process made it easy to share the game with others and inspired me to continue refining and expanding on the project.

Exploring AWS Amplify, DynamoDB and More

To enhance the game experience, I explored the following possibilities:
  1. Deploying with AWS Amplify: Hosting the game and its assets on AWS Amplify to improve performance, scalability, and ease of deployment.
  2. Implementing a Leaderboard with DynamoDB: Tracking player times and scores to create a dynamic leaderboard for a more competitive and engaging experience.
  3. Utilizing Additional AWS Services: Exploring functions such as Lambda, API Gateway, EC2, and Cognito to add advanced features and further expand the game's functionality.

Challenges Faced

  1. Unable to Register for AWS:
    Amazon may deny the registration process if multiple AWS registrations are attempted from the same IP address within a short period. This is a security measure to prevent potential misuse. To resolve this issue, try using a mobile phone hotspot to complete the registration successfully.
  2. DynamoDB Integration:
    Setting up the DynamoDB database and connecting it to the HTML page can present challenges, particularly with database configuration and efficient data handling. Careful planning and troubleshooting are key to overcoming these obstacles.

Key Takeaways

  1. Leveraging AI Assistance: Amazon Q Developer greatly simplified the development process, making it an invaluable tool for both beginners and experienced programmers alike.
  2. Understanding AWS Services: Deploying with AWS S3 and exploring services like Lambda, API Gateway, EC2, Amplify, and DynamoDB provided hands-on insights into the powerful capabilities of cloud computing.
  3. Continuous Learning: Every challenge faced along the way became an opportunity to enhance coding and problem-solving skills, contributing to ongoing growth and improvement.

Conclusion

Working on this project was both challenging and rewarding. Combining hands-on coding with the utilization of AWS services offered a comprehensive and enriching learning experience. I hope this article inspires everyone to create their own web-based games on AWS S3 and contribute to the growing AWS ecosystem.
A special thanks to Amazon Q for its support, which made it possible for me to proudly publish my game on AWS S3. In the future, I plan to explore Amazon Amplify, DynamoDB, and many other powerful AWS services to enhance my projects and bring more meaningful and enjoyable experiences to life.
If you found this article helpful, feel free to leave a comment or reach out to the author directly for further discussion.
Try the game: https://bucketchao2.s3.us-east-2.amazonaws.com/HuarongRoad/index.html
Codes on Github: https://github.com/MinorDem/HuarongRoad.git
(Both links are available before March 31st, 2025)
 

Comments