井字棋游戏本地开发及静态产物验证实践

准备工作

在使用华为云码道前，您需要先创建一个项目，用于集中存放工程中的各类文件。项目创建完成后，建议开启自动批准功能，AI将自动处理相关操作，无需人工干预。

1. 参考快速启动中操作，登录华为云码道。
2. 创建一个项目，用于存放工程中的文件。
   1. 在IDE工具顶部菜单栏中，单击“文件(F)”，选择“新建 > 新建项目”，进入新建项目页面。
   2. 选择项目存放位置，输入项目名称（例如Tic-Tac-Toe_Demo），单击“确定”。

      项目名称必须以字母开头，可包含字母、数字、中划线或下划线，且总长度不能超过64个字符。

      项目创建完成后，在“资源管理器”中可以查看到已创建的TIC-TAC-TOE_DEMO项目。

3. （可选）选择智能体运行模式并授权自动化操作。
   1. 单击华为云码道IDE右上角的设置图标 ，进入华为云码道IDE全局设置页面。
   2. 在“对话流 > 智能体 > 终端命令运行模式”中，选择智能体执行终端命令的运行策略，本实践依赖较多，推荐选择“手动模式”。
   3. 在“对话流 > 智能体 > 自动批准”中，单击 以开启所需的自动批准项目。

      授权自动化操作后，复杂工程级代码生成流程中的各项任务可自动执行。如果您未开启自动化操作授权，在使用华为云码道进行编码时，部分操作将需要您手动确认。

      

      开启自动批准存在操作风险，请在开启前充分评估风险，并在安全可信环境中使用。

      表1 自动批准参数说明

      参数	说明	示例
      编辑	允许智能体调用edit、write、deleteFile等工具来编辑您计算机上的文件。	开启
      使用浏览器	允许智能体在浏览器中访问网站。	开启
      网页抓取工具	允许智能体访问并抓取指定网页的内容。	开启

   4. 退出当前页面，完成授权操作。

生成井字棋核心代码与界面

1. 在华为云码道聊天界面的输入框中，输入如下提示词，并单击发送。

   基于React+TypeScript+Next.js 14 App Router编写井字棋游戏页面，要求：
   1. 游戏棋盘整体在页面水平、垂直居中；
   2. 页面添加标题和游戏玩法说明；
   3. X、O使用不同颜色区分；
   4. 代码结构规范，可直接运行。

2. 任务执行的过程中，所有终端操作及高风险命令的运行，需要手动确认运行，等待项目创建成功。
   图1 项目创建成功
   

3. 单击“全部接受”，接受当前文件修改。

开发环境调试

代码生成完成后，可以先在开发环境完成全量功能验证，确认功能正常后再进行打包配置，提前规避逻辑问题。

1. 启动Next.js本地开发调试服务。
   1. 本地设备上打开命令提示符窗口，以Windows 11操作系统为例。同时按下“Win+R”，在打开的“运行”对话框中输入cmd，按“Enter”。
   2. 切换到当前项目所在的目录，以如下目录为例。

      D:
      cd \VS\Tic-Tac-Toe_Demo

   3. 执行启动命令，启动Next.js本地开发调试服务，等待编译就绪。

      npm run dev

      图2 服务启动完成
      

2. 浏览器打开网址http://localhost:3000，进行逐项功能验证：
   • 界面：标题、玩法说明、棋盘布局展示正常，X/O颜色区分清晰。
   • 交互：点击格子可正常落子，已占用格子无法重复点击。
   • 逻辑：横、竖、斜线连线可正常判定获胜，棋盘填满后正确判定平局。

   

静态打包与验证

开发环境验证通过后，再配置打包规则、执行编译，并最终验证静态资源。

1. 在华为云码道聊天界面的输入框中，输入如下打包规则，并单击发送。

   修改next.config.mjs，开启静态导出，打包输出目录设为out，确保代码无报错、可正常打包。

2. 打包构建项目并预览生产静态资源。
   1. 在本地设备上打开命令提示符窗口，以Windows 11操作系统为例。同时按下“Win+R”，在打开的“运行”对话框中输入cmd，按“Enter”。
   2. 切换到当前项目所在的目录，以如下目录为例。

      D:
      cd \VS\Tic-Tac-Toe_Demo

   3. 执行启动命令，进行生产环境打包构建，等待全量编译优化完成。

      npm run build

   4. 执行如下命令，全局安装静态文件服务（仅首次安装执行）。

      npm install -g serve

   5. 执行如下命令，启动静态服务。

      serve -s out

      图3 本地终端执行启动静态服务命令
      

3. 根据输出地址访问页面，再次完整校验界面、交互、胜负判断等功能，确保静态产物与开发环境验证结果表现一致。

   

常见问题及解决方案

修改next.config.mjs，开启静态导出，打包输出目录设为out，确保代码无报错、可正常打包。