用 Amazon Q 开发教育网页游戏的实践

这是 Amazon Q Developer “Quack The Code”挑战赛的参赛作品，参赛类别：That's Entertainment！

《The Golden Duck: Navigation Chronicles》是一款采用复古美学风格的文本教育游戏，其设计灵感来自 DOS/Windows 95。玩家将在互动叙事任务中学习如何仅使用键盘操作操作系统。游戏旨在锻炼记忆力、逻辑思维和导航能力，同时也支持视障用户无障碍游玩。

每个场景都是独立的 JavaScript 模块，同时也是一个更大的模块化游戏引擎的一部分。整个项目是在 Amazon Q Developer 的帮助和指导下创建的。用户界面模拟了老式终端 UI，同时融入了现代无障碍设计理念。得益于 Q Developer 提供的架构建议和高效实现，这款游戏完全使用原生 HTML、CSS 和 JavaScript 从零构建而成。

你可以探索代码，并查看其他补充文档，例如：

与 Q Developer 的对话历史

欢迎提出建议、创建 issue 或提交 pull request！

GitHub 仓库——Golden Duck Game

🤖 我如何使用 Amazon Q Developer

整个开发过程都是在 VSCode 中使用 Amazon Q Developer 完成的，这段经历既有趣、高效，又让我学到了很多。具体过程如下：

在 VSCode 中安装 Amazon Q Developer 插件。

注册 Builder ID，用于身份验证。

创建包含游戏信息的项目上下文文件。

2. 开始使用 Q Developer

我请 Q Developer 帮助我分析、规划并组织游戏代码。它完成了以下工作：

分析提供的上下文。

规划项目架构。

我点击“Run”确认按钮后，它便创建并实现了所需文件。

随后，它解释了游戏所采用的 JavaScript 模块化系统如何运作，概述了整体架构、章节流程、流程运行机制、主要功能和架构优势，甚至还通过完整章节流程的示例，教我如何添加新的“章节”。

注意：从一开始，我就很喜欢它对每个生成文件所做的清晰说明，以及它与终端的集成方式。它提供了一种非常实用的选择，可以直接创建实现所需的文件夹和目录结构。

3. 运行与初步测试

我使用 Live Server 运行了项目。

复古 UI 看起来符合预期，但游戏无法正常运行。

于是，我开始检查代码并定位故障点。

4. 使用 Q Developer 调试

调试过程非常顺利，这要归功于此前的讲解、良好的代码质量与注释，以及控制台中实现的错误提示：

    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();
            }
        });
    }

控制台显示了以下错误：Game engine not set for scene: tutorial。

我把这个情况告诉 Q Developer，并请它分析错误。

它定位并修复了 scene.js 文件中的问题。

应用修复后，游戏成功运行了！

它甚至还添加了一个小型 debug helper 工具，以辅助后续开发。

在继续开发之前，我测试了多标签页聊天功能，并禁用了 code agent，只保留一个标签页用于对话、提问和获取建议等。我还与它讨论了技术选型、项目采用的设计系统，并请它更详细地解释“debug helper”。

我请 Q Developer 生成单元测试。

它配置了 package.json，创建了测试结构，并解释了整个过程。

最初有一些测试未能通过，但经过调整后，我们验证了其中的大部分测试。

注意：这个过程可能需要一些时间。

6. 代码审查与改进

我要求它审查整个 codebase，重点关注安全漏洞和无障碍问题。Q Developer 提出并实现了相应改进，同时更新了项目文档。我重新运行测试后，发现相比之前又多了一个失败项，不过所有功能都运行正常。

7. 文档与工作流

在项目收尾阶段，我使用 Q Developer 生成文档，并持续更新 README.md。它还生成了其他文件，包括 CONTRIBUTING.md、Chapter Creation Guide、Architecture Document、Educational Design Document，甚至还有一张流程图。

最后，我请它生成一篇 Markdown 格式的挑战赛投稿文章，以富有教育意义的语气和清晰的格式总结整个开发历程——这也成为了本文的基础。

使用 Amazon Q Developer 的开发过程让我受益匪浅。我学到了：

如何组织 JavaScript 模块化项目。

如何使用 Jest 实现单元测试。

Web 应用无障碍与安全方面的最佳实践。

清晰、客观的文档有多么重要。

在创建《The Golden Duck》的过程中，Amazon Q Developer 是不可或缺的合作伙伴。从概念构思到实现，再到调试、测试和文档编写，它的协助让整个过程变得更加高效，也更具教育意义。我非常推荐使用 Amazon Q Developer——尤其是对于那些希望通过实践学习、获得上下文指导，并在构建真实项目的过程中提升自信的开发者。

最终成果不仅是一款教授键盘导航操作的游戏，也展示了 AI 辅助如何改善开发流程，帮助开发者打造更健壮、更易访问且更具教育价值的应用。

如需采取进一步措施，你可以考虑屏蔽此人和/或举报滥用行为。