🦆 The Golden Duck: My Experience Building an Educational Web Game with Amazon Q Developer

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

🎮 What I Built

The Golden Duck: Navigation Chronicles is a text-based educational game with a retro aesthetic inspired by DOS/Windows 95. The player learns to navigate operating systems using only the keyboard through interactive narrative missions. The game encourages memory, logic, and navigation skills, and is accessible to visually impaired users.

Each scene is a standalone JavaScript module and part of a broader modular game engine, created with the help and guidance of Amazon Q Developer. The user interface mimics old terminal UIs with modern accessibility considerations. The game was built entirely from scratch using plain HTML, CSS, and JavaScript — thanks to Q Developer's architectural suggestions and efficient implementations.

Demo

Game Website

💻 Code Repository

Explore the code and check out the additional documents, such as:

• Game Context
• README
• Conversation History with Q Developer

Feel free to open suggestions, issues, or pull requests!

GitHub Repository – Golden Duck Game

🤖 How I Used Amazon Q Developer

The entire development process was done with Amazon Q Developer in VSCode, and the experience was fun, productive, and educational. Here's how it went:

1. Initial Setup

1. Installed the Amazon Q Developer plugin in VSCode.
2. Registered a Builder ID for authentication.
3. Created the project context file with game information.

2. Getting Started with Q Developer

I asked Q Developer to help me analyze, plan, and structure the game code. It:

• Analyzed the provided context.
• Planned the project architecture.
• I clicked the "Run" confirmation button, and it created and implemented the necessary files.

After that, it explained how the modular system in JavaScript works for the game, giving an overview of the architecture, chapter flow, how the flow works, main features, architectural benefits, and even taught how to add a new “chapter” with examples of a complete chapter flow.

Note: Right away, I liked the clear description of each file it generated and the terminal integration, offering a practical option to create the folders and directory structure for implementation.

3. Execution and Initial Testing

• I ran the project using Live Server.
• The retro UI looked as expected, but the game wasn't functioning correctly.
• I started inspecting the code and identifying the failure points.

4. Debugging with Q Developer

Debugging went smoothly, thanks to the previous explanations, code quality and comments, and the error message implemented in the console:

    render() {
        if (!this.gameEngine) {
            console.error('Game engine not set for scene:', this.id);
            return;
        }

        // Clear the screen first
        this.gameEngine.renderContent('');

        // Render each component
        this.components.forEach(component => {
            if (typeof component.render === 'function') {
                component.render();
            }
        });
    }

• The console displayed the error: Game engine not set for scene: tutorial.
• I informed and asked Q Developer to analyze the error.
• It identified and fixed the issue in the scene.js file.

After applying the fix, the game worked!

It even added a small debug helper utility to aid development.

Before continuing development, I tested the chat with multiple tabs and disabled the code agent to use one tab only for dialogue, questions, suggestions, etc. I discussed technology choices, the adopted design system, and asked for a more detailed explanation about the "debug helper".

5. Unit Testing

• I asked Q Developer to generate unit tests.
• It configured package.json, created the test structure, and explained the process.
• Some tests failed initially, but with adjustments, we validated most of them.

Note: The process might take some time.

6. Code Review and Improvements

I requested a codebase review focusing on security vulnerabilities and accessibility. Q Developer suggested and implemented improvements, also updating the project documentation. I reran the tests and got one more failure than before, but everything was working fine.

7. Documentation and Workflow

To wrap up, I used Q Developer to generate the documentation and keep the README.md up to date.
It also generated additional files like CONTRIBUTING.md, Chapter Creation Guide, Architecture Document, Educational Design Document, and even a flowchart.

Lastly, I asked it to generate a challenge submission article in Markdown summarizing the whole journey, with an educational tone and clear formatting — which became the basis for this post.

📚 Educational Value

The development process with Amazon Q Developer was highly educational. I learned about:

• Structuring modular projects in JavaScript.
• Implementing unit tests with Jest.
• Best practices for accessibility and security in web apps.
• The importance of clear and objective documentation.

🧠 Conclusion

Amazon Q Developer was an essential partner in creating "The Golden Duck." From concept to implementation, debugging, testing, and documentation, its assistance made the process more efficient and educational. I highly recommend using Amazon Q Developer — especially for those who want to learn by doing, with contextual guidance, and gain more confidence while building real-world projects.

The result is a game that not only teaches keyboard navigation but also showcases how AI assistance can enhance the development process, allowing developers to create more robust, accessible, and educational applications.