AWS Logo
Menu
From Zero to Game Dev: Building Dots, Magnets, and Boxes

From Zero to Game Dev: Building Dots, Magnets, and Boxes

Discover how I transformed from a complete coding novice to creating 'Dots, Magnets, and Boxes' using Amazon Q and AWS Amplify.

Published Jan 14, 2025

When I decided to participate in the AWS Game Builder, I had no prior coding experience. I had started from setting up AWS account for the first time! However, with the power of Amazon Q and Amplify I was able to build an innovative and fun twist on the traditional Dots and Boxes game. This blog post will take you through my journey of creating Dots, Magnets, and Boxes, highlighting the game’s unique features and how Amazon Q simplified the entire development process.

The Concept

Before this concept I thought why not make a super game about Space exploration where Players are drifted off on a damaged Shuttle to deserted planets of Advanced Species, Players will gather resources to build up Spaceships, fight Monsters before taking off to nearby Hub. But wait.. this is way out of my league and I don't know if Amazon Q or any other LLM can help me at that level to build game or apps up. So Dots, Magnets, and Boxes! It is a modern reimagining of the classic Dots and Boxes game. The core gameplay remains simple: connect dots to create lines and complete boxes to score points. What sets this version apart are the magnetic powers, which introduce strategic depth and dynamic interactions:
  • Repel: Remove an opponent's line.
  • Attract: Restore a disrupted line.
  • Freeze: Block an area for one turn.
Players take turns connecting dots and strategically using their magnetic powers to gain an advantage, making each match an exciting battle of wits and strategy.

Why Amazon Q and Amplify?

As someone with no prior development experience, I needed a tool that could guide me through the coding process while allowing me to focus on the what should be the Game. I used Amplify template to get started and worked with Amazon Q in VSCode as plugin for,
  • Code Generation: All the code generated by Amazon Q.
  • Integration: with Amplify framework it was more easy to work with both frontend and backend and Q helped manage the errors which it made itself.

Development Process

1. Choosing the Stack
Thanks to Amazon Q, I was able to quickly set up a full-stack application using:
  • Frontend: React.js, for creating an interactive and responsive user interface.
  • Backend: AWS Amplify, for seamless data storage and user authentication.
2. Designing Gameplay
The game design focused on balancing simplicity with engaging mechanics:
  • Players connect dots to form lines.
  • Completing a box earns a point and another turn.
  • Magnetic powers add layers of strategy, enabling players to disrupt their opponent’s plans or protect their own progress.
3. Implementing Features with Amazon Q
Amazon Q helped me generate the necessary code for:
  • Game Logic: Handling turns, scoring, and magnetic power effects.
  • Backend Services: Storing player scores and game states securely in the cloud.
  • Real-Time Updates: Enabling players to see game progress instantly.

How to Play

  • 🎯 Connect Dots: Draw lines between dots to form boxes.
  • 📦 Complete Boxes: Earn points by completing boxes.
  • 🧲 Use Magnetic Powers: Strategically use Repel, Attract, and Freeze to gain an advantage.
Magnetic Powers
  • ⚡ Repel: Remove an opponent’s line.
  • 🧲 Attract: Restore a disrupted line.
  • ❄️ Freeze: Block an area for one turn.

Challenges Faced

  • Understanding Game Logic: Translating the rules of Dots and Boxes into code was initially challenging, (No idea is another phrase for the challenging in my case) but Amazon Q’s guidance simplified the process. Amazon Q just helped me with everything coding.
  • Learning Curve: As a beginner, there was a lot to learn, but Amazon Q’s made the journey manageable.
  • Sometimes, Amazon Q just apologizes for some queries, for example if the Q has generated code in its response along with a simple question 'would you like to help implement?' and If I respond 'Yes', it just wont understand that, also it seems chat history is not accessible as I asked about chat history, and it apologizes.
  • Even using @workspace there seems to be some gap in knowledge the Q had about my project directory, as it gave me partial directory structure when I ask about it. this limits my ability to rely on Q to truly give me code suggestions based on my project.

The Outcome

Dots, Magnets, and Boxes is now a functional and engaging game with:
  • Strategic Gameplay: Magnetic powers add depth to the classic Dots and Boxes formula.
  • AWS-Powered Backend: Secure and scalable infrastructure for storing game data.
  • Beginner-Friendly Development: A testament to how Amazon Q empowers anyone to bring their ideas to life.

Future Plans

This project has sparked my interest in game development, and I’m excited to:
  • Enhance Visuals: Add polished graphics and animations.
  • Introduce Multiplayer: Allow players to compete online in real-time.
  • Expand Mechanics: Experiment with new powers and game modes.

Conclusion

Building Dots, Magnets, and Boxes for the AWS Game Builder was an incredible experience. Amazon Q made it possible for me, a complete beginner, to turn my vision into reality. I’m proud of what I’ve accomplished and can’t wait to see how the game evolves in the future.
Thank you for reading, and I hope you enjoy playing Dots, Magnets, and Boxes as much as I enjoyed creating it!
 

Comments