使用Trae开发一个简单的网页版贪吃蛇游戏
Trae，字节推出的AI IDE，相较于Cursor不菲的价格，Trae目前免费，这大大降低其使用门槛。 认识一个新的工具最好的方式就是使用它，首先下载Trae，地址：www.trae.ai 点击DownLoad Trae，下载安装即可。 安装好Trae后，打开，主界面如下： Trae集成了多种大模型，默认使用Claude-3.5-Sonnet，其他的还有：GPT-4o、DeepSeek-Reasoner(R1)、DeepSeek-V3等。 Trae提供了两种交互模式：Chat和Builder。 * Chat：就是聊天问答模式。
- Builder：就是代理模式，可以通过提示词指令，由Trae自动实现项目创建、文件创建、编辑，生成交互提示，如代码审核、运行等操作。 上述两种模式使用前需要使用账号登录，使用Google、Github等账号均可登录，但是需要梯子。 登录以后，选择使用Builder模式，通过提示词由Trae来根据任务自动完成技术选型、方案设计、代码编写。补充一句，登录后，使用Chat或Builder不再需要梯子。 这里，我通过设计实现一个贪吃蛇游戏来体验Trae的功能如何。 Trae推荐的技术栈是HTML+JavaScript，其中HTML页面绘制游戏画面，JavaScript控制游戏动作。在项目文件夹目录下，自动创建项目文件index.html和game.js，并且在Builder模式中创建完成，给出审查交互提醒，由操作者审查AI编写的代码，拒绝还是接受。自动创建好的文件结构如下： index.html源码如下： ```
分数: 0
游戏结束!
最终分数: 0
重新开始move() {
this.direction = this.nextDirection;
const head = { ...this.segments[0] };
switch (this.direction) {
case 'up': head.y--; break;
case 'down': head.y++; break;
case 'left': head.x--; break;
case 'right': head.x++; break;
}
this.segments.unshift(head);
return this.segments.pop();
}
grow() {
const tail = this.segments[this.segments.length - 1];
this.segments.push({ ...tail });
}
checkCollision(gridSize) {
const head = this.segments[0];
if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) {
return true;
}
return this.segments.slice(1).some(segment =>
segment.x === head.x && segment.y === head.y
);
}
}
class Game { constructor() { this.canvas = document.getElementById('game-canvas'); this.ctx = this.canvas.getContext('2d'); this.gridSize = 20; this.tileSize = this.canvas.width / this.gridSize; this.snake = new Snake(); this.food = this.generateFood(); this.score = 0; this.gameOver = false; this.intervalId = null;
document.addEventListener('keydown', this.handleKeyPress.bind(this));
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
}
generateFood() {
while (true) {
const food = {
x: Math.floor(Math.random() * this.gridSize),
y: Math.floor(Math.random() * this.gridSize)
};
if (!this.snake.segments.some(segment =>
segment.x === food.x && segment.y === food.y
)) {
return food;
}
}
}
handleKeyPress(event) {
const keyMap = {
'ArrowUp': 'up',
'ArrowDown': 'down',
'ArrowLeft': 'left',
'ArrowRight': 'right'
};
const newDirection = keyMap[event.key];
if (!newDirection) return;
const opposites = {
'up': 'down',
'down': 'up',
'left': 'right',
'right': 'left'
};
if (opposites[newDirection] !== this.snake.direction) {
this.snake.nextDirection = newDirection;
}
}
update() {
if (this.gameOver) return;
const tail = this.snake.move();
if (this.snake.checkCollision(this.gridSize)) {
this.endGame();
return;
}
const head = this.snake.segments[0];
if (head.x === this.food.x && head.y === this.food.y) {
this.snake.segments.push(tail);
this.food = this.generateFood();
this.score += 10;
document.getElementById('score').textContent = `分数: ${this.score}`;
}
}
draw() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// 绘制食物
this.ctx.fillStyle = '#ff0000';
this.ctx.fillRect(
this.food.x * this.tileSize,
this.food.y * this.tileSize,
this.tileSize,
this.tileSize
);
// 绘制蛇
this.snake.segments.forEach((segment, index) => {
this.ctx.fillStyle = index === 0 ? '#2ecc71' : '#27ae60';
this.ctx.fillRect(
segment.x * this.tileSize,
segment.y * this.tileSize,
this.tileSize,
this.tileSize
);
});
}
endGame() {
this.gameOver = true;
clearInterval(this.intervalId);
document.getElementById('final-score').textContent = this.score;
document.getElementById('game-over').style.display = 'block';
}
restart() {
this.snake = new Snake();
this.food = this.generateFood();
this.score = 0;
this.gameOver = false;
document.getElementById('score').textContent = '分数: 0';
document.getElementById('game-over').style.display = 'none';
this.start();
}
start() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.update();
this.draw();
}, 150);
}
}
const game = new Game(); game.start();
在浏览器中打开index.html，显示效果如下： 游戏界面是一个黑色边框的矩形，最上方提示分数，中间红色的方块是随机生成的食物，绿色方块的是蛇身，通过上下左右键调整蛇头的前进方向，当蛇头移过食物时，判定食物被吃掉，蛇身增长一个方块的长度，然后食物随机出现在游戏界面的某个位置，继续游戏，当蛇头撞到游戏界面的边界后，本次游戏结束，给出得分。 虽然Trae给出的贪吃蛇界面比较简陋，但编写出的代码质量还是不错的，可以生成完直接在浏览器中运行，这一点还是很惊艳的。 总的来说，Trae用起来的门槛很低，理解能力也很强，善于将任务拆解为一步步可以执行的动作，并逐步去执行，开发效率很高，当然想要更好的用好Trae ，需要更加完善、准确的提示词作为保障，这方面可以在使用中通过不断总结逐步完善起来。当今AI IDE领域不断涌现新的工具，这会大大降低开发门槛，让技术背景不深的人也有了开发出软件的能力。对于技术人员来说，拥抱新事物，运用这些新的工具提高生产力则势在必行，未来十倍程序员将会越来越多。
> 原文链接: https://www.cnblogs.com/maomu/p/18809594
