我用Trae 做了个逃离迷宫的游戏助手/算法编程助手

参考

掘金社区地址

Trae下载地址

管理插件

Trae 从入门到实践:AI 编码的妙笔生花

本文内容

我承认 Trae比我强,我的工资可以用来买Trae的Pro啊,尽管也有免费的版本啊!!!!!!

1.确定Trae版本

2.完成基于Trae的提示词和配置信息

3.完成junjin-MCP配置

4.基于提示词完成web开发,并调用juejin-MCP发布应用

Trae版本-0.64

本文是基于6月17日更新后的版本,关于详细的Trae安装教程,我放在了后面(安装与配置Trae编辑器-3月24日安装),最为重要的一点就是如何导入插件,这点特别实用。 以下是更新后的截图

使用 trae 命令快速唤起 Trae。

python 复制代码
Trae

使用 trae trae+mcp 命令在 Trae 中打开一个项目。

python 复制代码
trae trae+mcp 

项目介绍-我用Trae 做了个逃离迷宫的游戏助手/算法编程助手"

完成基于Trae的提示词和配置信息

🧠 项目描述

我计划 用Trae 做个 "逃离迷宫的游戏助手/算法编程助手",主要功能为生成 一个 前端页面,可以模拟迷宫的路径问题。功能1,生成指定行和列的迷宫,功能2,生成障碍点和可通过点,功能3,可以选择广搜和深搜算法和自定义交互路线等三种功能,其中广搜和深搜算法可以指定的路径的方向顺序,自定义交互路线可以允许用户单击迷宫进行探索,但探索也需要一步步探索,并且满足要求,功能4,依据选择的算法和路径方向,在迷宫中走出对应的路线,功能5,生成这个迷宫问题对应的C++/python/js代码,功能6,在迷宫探索过程中,显示执行对应的代码位置,并动态显示代码中变量的值,功能7,。 提供对应的提示词。

生成的提示词如下

迷宫游戏助手/算法编程助手开发提示词 以下是一个详细的提示词,可用于指导Trae IDE生成您所需的迷宫游戏助手应用:

我需要开发一个迷宫游戏助手/算法编程助手,具有以下功能和要求:

python 复制代码
## 项目概述
创建一个交互式前端应用,能够可视化迷宫生成、路径查找算法,并生成相应代码,同时展示算法执行过程。

## 核心功能
1. **迷宫生成**:允许用户指定行数和列数,生成随机或自定义迷宫
2. **障碍设置**:支持自动生成障碍点和可通过点,也允许用户手动编辑
3. **算法选择**:实现广度优先搜索(BFS)和深度优先搜索(DFS)两种路径查找算法
4. **自定义路径**:实现用户在迷宫上单击方格寻找路径的方法,如果到答案终点,提示成功弹窗。
5. **路径方向控制**:允许用户指定路径搜索的方向优先级(上、下、左、右的顺序)
6. **路径可视化**:动态展示算法探索迷宫并找到出口的过程
7. **代码生成**:根据当前迷宫和算法设置,生成对应的C++/Python/JavaScript代码
8. **代码执行可视化**:在算法执行过程中,同步高亮显示对应代码位置,并动态展示变量值变化

## 技术要求
- 使用HTML/CSS/JavaScript构建前端界面
- 采用现代UI设计,响应式布局
- 使用Canvas或SVG绘制迷宫和路径动画
- 代码生成需提供语法高亮显示
- 实现算法执行步骤与代码位置的映射关系
- 可以完成Algorithm Visualizer

## 界面设计
1. **控制面板**:包含迷宫尺寸设置、算法选择、方向顺序配置
2. **迷宫显示区**:可视化展示迷宫、起点、终点、障碍和路径
3. **代码展示区**:显示生成的代码,并高亮当前执行位置
4. **变量监控区**:实时显示算法执行过程中的关键变量值
5. **操作按钮**:开始/暂停/重置模拟,生成代码,下载代码等

## 交互要求
- 迷宫单元格可点击编辑(设置/移除障碍)
- 算法执行过程支持单步调试
- 代码生成后可复制或下载
- 支持调整动画速度

## 代码生成要求
- 代码需包含详细注释
- 遵循各语言的编码规范
- 代码可直接运行,包含完整的迷宫数据结构和算法实现
- 提供多种语言版本的切换

配置MCP-我用Trae 做了个逃离迷宫的游戏助手/算法编程助手"

配置掘金的MCP

在 Trae 或 IDE 的 MCP 配置中,添加以下 JSON 配置:

JSON 复制代码
{
  "mcpServers": {
    "juejin-deploy-mcp": {
      "command": "npx",
      "args": [
        "--registry=https://registry.npmjs.org",
        "-y",
        "@juejin-team/mcp-server@latest"
      ],
      "env": {
        "JUEJIN_TOKEN": ""
      }
    }
  }
}

 

截图如下

配置后如下

获取juijin-MCP的token

获取tokens的地址如下: aicoding.juejin.cn/tokens

单击获取Token如下

把这一步的token,填充在"JUEJIN_TOKEN": ""中

基于提示词完成web开发,并调用juejin-MCP发布应用

选择Build With MCP 并完成项目生成

输入前文的提示词

开始推理

生成了多个文件,可以先都接受,然后再修改

在代码生成的地方出现了很多次的尝试

完成的截图如下

测试项目

在工程中,运行index.html

在浏览器中打开,效果如下:

生成迷宫的时候,无法生成,发现控制台有如下问题

修改代码全自动版

添加一个MCP,用来完成自动测试

用playwright自动测试本项目,并解决问题

这个步骤有问题,还是自己修改下

修改代码半自动AK47

把错误发给给Trae的build

python 复制代码
运行index.html提示错误"""index.html:299

GET http://127.0.0.1:5500/app.js net::ERR_ABORTED 404 (Not Found)了解此错误AI

codeGenerator.js:150 Uncaught SyntaxError: Unexpected identifier '$' (at codeGenerator.js:150:22)了解此错误AI

index.html:1 Refused to execute script from 'http://127.0.0.1:5500/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.""" 并且没有生成迷宫地图,迷宫地图应该一个一个的格子,用不同颜色标记能否通过

生成如下

测试后,还是没有生成迷宫,

再次把错误发给trae

javascript 复制代码
提示错误如下:codeGenerator.js:150 Uncaught SyntaxError: Unexpected identifier '$' (at codeGenerator.js:150:22) 如果这个问题不好修改,可以先删除与代码相关的功能

其实做项目还是一步步来比较好,先规划整体的功能,再一个一个完善,下次注意

修改后,还是无法生成迷宫 再次修改,这次删除代码生成代码执行可视化功能

python 复制代码
还是有错误 """codeGenerator.js:150 Uncaught SyntaxError: Unexpected identifier '$' (at codeGenerator.js:150:22)""" 现在不再修改这个问题了,从项目中删除与**代码生成**与**代码执行可视化**功能,目的是使得项目能正常运行起来

输出如下

不再报错了,但依然无法生成迷宫

继续修改

复制代码
生成迷宫 无法生成迷宫 

输出如下

从头来

还是没有反应,添加css样式可以显示迷宫的每个格子,现在从头开始检查,功能1 可以实现迷宫随机生成的功能,功能2再完成广度和深度优先搜索的功能,如果探索成功,输出对应的路径, 功能3可以针对探索过程实现可视化展示 功能4,可以实现手动探索功能,并探索成果,输出路径和完成弹窗

输出如下

再次运行,基本可以了效果如下

再次优化

javascript 复制代码
解决如下问题,

visualization.js:263 Uncaught TypeError: this.updateVariables is not a function
    at Visualization.stepAnimation (visualization.js:263:14)
    at visualization.js:242:18
    
同时生成的迷宫要包含一些障碍点,障碍点不允许通过,障碍点的数量占据20%

思考过程如下

输出如下:

再次运行,效果如下

在线演示的链接如下

5.61 cNJ:/ l@C.Hv 11/17 我用trae做的DFS和BFS的迷宫模拟问题 我用trae做的DFS和BFS的迷宫模拟问题# 少儿编程 # 机器人教育 # 我用trae v.douyin.com/PUB_F1b5tMk... 复制此链接,打开Dou音搜索,直接观看视频!

部署项目到juijin-MCP

把该项目通过juijin-MCP部署起来吧!

输出如下

部署后的链接如下 aicoding.juejin.cn/pens/751788...

相关推荐
小徐_23331 小时前
当年偷偷玩小霸王,现在偷偷用 Trae Solo 复刻坦克大战
trae
创码小奇客1 小时前
深度对比:RocketMQ 凭什么成为阿里系首选消息队列?
后端·消息队列·trae
Goboy2 小时前
轻松实现贪吃蛇游戏:Trae 开发者的新体验
trae
Goboy2 小时前
Trae轻松实现经典数字猜测
trae
水饺2 小时前
Tree Solo 模式体验
trae
前端卧龙人3 小时前
trae初体验,小白也可以快速上手开发游戏
trae
布瑞泽的童话3 小时前
有了SOLO后,一天一个独立产品不是梦
ai编程·trae
bytebeats4 小时前
Trae 让人人皆可成为程序员
trae
bytebeats4 小时前
Trae 2.0 Solo: 这并非又一个 Copilot
trae
bytebeats4 小时前
使用 Trae 进行 iOS 开发
trae