目录
简介
- 通义灵码 AI 程序员,具备多文件代码修改(Multi-file Edit)和工具使用(Tool-use)的能力
- 可以与开发者协同完成编码任务,如需求实现、问题解决、单元测试用例生成、批量代码修改等。
使用
我们介绍两种编辑器插件的使用,一个是VSCODE,另外一个是IDE
VSCODE
- 在新版的通义灵码中,AI程序员已经修改为 文件编辑模式 点击,
- 文件编辑模式:目前只支持 VSCODE
- 打开通义灵码的对话框
- 选择文件编辑模式

- 然后再对话框中输入想要实现的需求便可
- 此外,我们还可以选择相应的模型
,一般用auto便可
IDE
- 打开通义灵码的对话框
- 在左下角选择智能体

- 然后再对话框中输入想要实现的需求便可
协作过程
程序员与AI程序员的协作过程如下
在整个过程中,我们需要完成的也就是四个步骤
- 输入需求
- 确认计划
- 代码审查
- 接受代码变更
实例
写一个贪吃蛇的游戏
VSCODE
-
输入需求时,我们尽量需求的各个细节进行明确,比如我们给如下的简要模板
请用原生JavaScript开发一个贪吃蛇游戏,要求:
2. 20×20网格,键盘控制
3. 包含分数系统和速度递增
4. 代码用面向对象方式组织
5. 包含详细的代码注释 -
选择文件编辑模式,输入需求都对话框,通一灵码开始进行思考

-
思考完成后,通一灵码已经将代码写好了,并带有相应的代码解释

-
相关按钮:
-
查看变更:通过查看变更按钮,可以查看变更的代码;此时会有diff页面出现

-
拒绝:通过绝按钮删除人工智能的书写。拒绝后,可以点击对话框的重新生成按钮,重新生成代码

这个时统一灵码写的代码
-
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.game-container {
text-align: center;
}
#gameCanvas {
border: 2px solid #333;
background-color: #fff;
}
.score-board {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.controls {
margin-top: 15px;
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div class="score-board">得分: <span id="score">0</span></div>
<div class="controls">使用方向键控制蛇的移动</div>
</div>
<script>
/**
* 贪吃蛇游戏主类
*/
class SnakeGame {
constructor() {
// 获取画布和上下文
this.canvas = document.getElementById('gameCanvas');
this.ctx = this.canvas.getContext('2d');
// 游戏网格设置
this.gridSize = 20; // 网格大小
this.tileCount = this.canvas.width / this.gridSize; // 网格数量
// 初始化游戏对象
this.snake = new Snake(this.tileCount);
this.food = new Food(this.tileCount);
// 游戏状态
this.score = 0;
this.gameSpeed = 150; // 毫秒
this.gameRunning = false;
// 绑定键盘事件
this.bindKeyboardEvents();
// 开始游戏循环
this.gameLoop();
}
/**
* 绑定键盘控制事件
*/
bindKeyboardEvents() {
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp':
this.snake.changeDirection(0, -1);
break;
case 'ArrowDown':
this.snake.changeDirection(0, 1);
break;
case 'ArrowLeft':
this.snake.changeDirection(-1, 0);
break;
case 'ArrowRight':
this.snake.changeDirection(1, 0);
break;
}
});
}
/**
* 游戏主循环
*/
gameLoop() {
if (this.gameRunning) {
this.update();
this.draw();
}
setTimeout(() => {
requestAnimationFrame(() => this.gameLoop());
}, this.gameSpeed);
}
/**
* 更新游戏状态
*/
update() {
// 移动蛇
this.snake.move();
// 检查是否吃到食物
if (this.snake.head.x === this.food.x && this.snake.head.y === this.food.y) {
this.snake.grow();
this.food.spawn(this.tileCount);
this.score += 10;
this.updateScore();
// 增加游戏速度
if (this.gameSpeed > 50) {
this.gameSpeed -= 2;
}
}
// 检查碰撞
if (this.snake.checkCollision(this.tileCount)) {
this.gameOver();
}
}
/**
* 绘制游戏画面
*/
draw() {
// 清空画布
this.ctx.fillStyle = '#fff';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
// 绘制网格线
this.drawGrid();
// 绘制食物
this.food.draw(this.ctx, this.gridSize);
// 绘制蛇
this.snake.draw(this.ctx, this.gridSize);
}
/**
* 绘制网格线
*/
drawGrid() {
this.ctx.strokeStyle = '#eee';
this.ctx.lineWidth = 1;
// 绘制垂直线
for (let i = 0; i <= this.tileCount; i++) {
this.ctx.beginPath();
this.ctx.moveTo(i * this.gridSize, 0);
this.ctx.lineTo(i * this.gridSize, this.canvas.height);
this.ctx.stroke();
}
// 绘制水平线
for (let i = 0; i <= this.tileCount; i++) {
this.ctx.beginPath();
this.ctx.moveTo(0, i * this.gridSize);
this.ctx.lineTo(this.canvas.width, i * this.gridSize);
this.ctx.stroke();
}
}
/**
* 更新分数显示
*/
updateScore() {
document.getElementById('score').textContent = this.score;
}
/**
* 游戏结束处理
*/
gameOver() {
this.gameRunning = false;
alert(`游戏结束!最终得分: ${this.score}`);
this.reset();
}
/**
* 重置游戏
*/
reset() {
this.snake = new Snake(this.tileCount);
this.food = new Food(this.tileCount);
this.score = 0;
this.gameSpeed = 150;
this.updateScore();
this.gameRunning = true;
}
}
/**
* 蛇类
*/
class Snake {
constructor(tileCount) {
// 初始化蛇的位置(网格坐标)
this.body = [
{x: 10, y: 10}, // 头部
{x: 9, y: 10}, // 身体
{x: 8, y: 10} // 尾部
];
// 初始移动方向(向右)
this.dx = 1;
this.dy = 0;
// 下一帧的方向(防止反向移动)
this.nextDx = this.dx;
this.nextDy = this.dy;
}
/**
* 改变移动方向
*/
changeDirection(dx, dy) {
// 防止反向移动(不能直接掉头)
if (dx !== -this.dx || dy !== -this.dy) {
this.nextDx = dx;
this.nextDy = dy;
}
}
/**
* 移动蛇
*/
move() {
// 应用下一帧的方向
this.dx = this.nextDx;
this.dy = this.nextDy;
// 计算新头部位置
const head = {
x: this.body[0].x + this.dx,
y: this.body[0].y + this.dy
};
// 将新头部添加到身体前端
this.body.unshift(head);
// 移除尾部(除非正在生长)
if (!this.growing) {
this.body.pop();
} else {
this.growing = false;
}
}
/**
* 蛇生长(吃到食物时调用)
*/
grow() {
this.growing = true;
}
/**
* 检查碰撞
*/
checkCollision(tileCount) {
const head = this.body[0];
// 检查边界碰撞
if (head.x < 0 || head.x >= tileCount ||
head.y < 0 || head.y >= tileCount) {
return true;
}
// 检查自身碰撞
for (let i = 1; i < this.body.length; i++) {
if (head.x === this.body[i].x && head.y === this.body[i].y) {
return true;
}
}
return false;
}
/**
* 绘制蛇
*/
draw(ctx, gridSize) {
// 绘制蛇身
ctx.fillStyle = '#4CAF50';
for (let i = 0; i < this.body.length; i++) {
ctx.fillRect(
this.body[i].x * gridSize,
this.body[i].y * gridSize,
gridSize - 1,
gridSize - 1
);
}
// 绘制蛇头(不同颜色)
ctx.fillStyle = '#2E7D32';
ctx.fillRect(
this.body[0].x * gridSize,
this.body[0].y * gridSize,
gridSize - 1,
gridSize - 1
);
}
/**
* 获取蛇头位置
*/
get head() {
return this.body[0];
}
}
/**
* 食物类
*/
class Food {
constructor(tileCount) {
this.spawn(tileCount);
}
/**
* 生成食物位置
*/
spawn(tileCount) {
this.x = Math.floor(Math.random() * tileCount);
this.y = Math.floor(Math.random() * tileCount);
}
/**
* 绘制食物
*/
draw(ctx, gridSize) {
ctx.fillStyle = '#F44336';
ctx.fillRect(
this.x * gridSize,
this.y * gridSize,
gridSize - 1,
gridSize - 1
);
}
}
// 启动游戏
window.onload = function() {
const game = new SnakeGame();
game.gameRunning = true;
};
</script>
</body>
</html>

-
我们发现打开这个代码,蛇就开始移动,往往反应不过来,这个时候我们增加需求:添加开始/暂停按钮来开始和暂停游戏,我们在对话框中输入如下
当前的游戏,网页一打开贪吃蛇就开始运动,游戏开始。请添加开始,结束,暂停按钮来控制游戏
-
注意需要把文件添加为上下文

修改后的代码如下
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.game-container {
text-align: center;
}
#gameCanvas {
border: 2px solid #333;
background-color: #fff;
}
.score-board {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.controls {
margin-top: 15px;
font-size: 16px;
color: #666;
}
.game-buttons {
margin-top: 20px;
}
.game-buttons button {
padding: 10px 20px;
margin: 0 10px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
}
.game-buttons button:hover {
background-color: #45a049;
}
.game-buttons button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div class="score-board">得分: <span id="score">0</span></div>
<div class="controls">使用方向键控制蛇的移动</div>
<div class="game-buttons">
<button id="startBtn">开始游戏</button>
<button id="pauseBtn" disabled>暂停游戏</button>
<button id="resetBtn">重新开始</button>
</div>
</div>
<script>
/**
* 贪吃蛇游戏主类
*/
class SnakeGame {
constructor() {
// 获取画布和上下文
this.canvas = document.getElementById('gameCanvas');
this.ctx = this.canvas.getContext('2d');
// 游戏网格设置
this.gridSize = 20; // 网格大小
this.tileCount = this.canvas.width / this.gridSize; // 网格数量
// 初始化游戏对象
this.snake = new Snake(this.tileCount);
this.food = new Food(this.tileCount);
// 游戏状态
this.score = 0;
this.gameSpeed = 150; // 毫秒
this.gameRunning = false;
this.gamePaused = false;
// 获取按钮元素
this.startBtn = document.getElementById('startBtn');
this.pauseBtn = document.getElementById('pauseBtn');
this.resetBtn = document.getElementById('resetBtn');
// 绑定事件
this.bindKeyboardEvents();
this.bindButtonEvents();
// 初始化显示
this.updateButtonStates();
this.draw();
}
/**
* 绑定键盘控制事件
*/
bindKeyboardEvents() {
document.addEventListener('keydown', (e) => {
// 只有游戏运行时才响应键盘事件
if (!this.gameRunning || this.gamePaused) return;
switch(e.key) {
case 'ArrowUp':
this.snake.changeDirection(0, -1);
break;
case 'ArrowDown':
this.snake.changeDirection(0, 1);
break;
case 'ArrowLeft':
this.snake.changeDirection(-1, 0);
break;
case 'ArrowRight':
this.snake.changeDirection(1, 0);
break;
}
});
}
/**
* 绑定按钮事件
*/
bindButtonEvents() {
this.startBtn.addEventListener('click', () => {
this.startGame();
});
this.pauseBtn.addEventListener('click', () => {
this.togglePause();
});
this.resetBtn.addEventListener('click', () => {
this.resetGame();
});
}
/**
* 开始游戏
*/
startGame() {
if (!this.gameRunning) {
this.gameRunning = true;
this.gamePaused = false;
this.updateButtonStates();
this.gameLoop();
} else if (this.gamePaused) {
this.gamePaused = false;
this.updateButtonStates();
this.gameLoop();
}
}
/**
* 暂停/继续游戏
*/
togglePause() {
this.gamePaused = !this.gamePaused;
this.updateButtonStates();
if (!this.gamePaused) {
this.gameLoop();
}
}
/**
* 重置游戏
*/
resetGame() {
this.gameRunning = false;
this.gamePaused = false;
this.snake = new Snake(this.tileCount);
this.food = new Food(this.tileCount);
this.score = 0;
this.gameSpeed = 150;
this.updateScore();
this.updateButtonStates();
this.draw();
}
/**
* 更新按钮状态
*/
updateButtonStates() {
if (!this.gameRunning) {
this.startBtn.disabled = false;
this.startBtn.textContent = '开始游戏';
this.pauseBtn.disabled = true;
this.pauseBtn.textContent = '暂停游戏';
} else if (this.gamePaused) {
this.startBtn.disabled = false;
this.startBtn.textContent = '继续游戏';
this.pauseBtn.disabled = false;
this.pauseBtn.textContent = '继续游戏';
} else {
this.startBtn.disabled = true;
this.startBtn.textContent = '游戏中...';
this.pauseBtn.disabled = false;
this.pauseBtn.textContent = '暂停游戏';
}
}
/**
* 游戏主循环
*/
gameLoop() {
if (this.gameRunning && !this.gamePaused) {
this.update();
this.draw();
}
if (this.gameRunning && !this.gamePaused) {
setTimeout(() => {
requestAnimationFrame(() => this.gameLoop());
}, this.gameSpeed);
}
}
/**
* 更新游戏状态
*/
update() {
// 移动蛇
this.snake.move();
// 检查是否吃到食物
if (this.snake.head.x === this.food.x && this.snake.head.y === this.food.y) {
this.snake.grow();
this.food.spawn(this.tileCount);
this.score += 10;
this.updateScore();
// 增加游戏速度
if (this.gameSpeed > 50) {
this.gameSpeed -= 2;
}
}
// 检查碰撞
if (this.snake.checkCollision(this.tileCount)) {
this.gameOver();
}
}
/**
* 绘制游戏画面
*/
draw() {
// 清空画布
this.ctx.fillStyle = '#fff';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
// 绘制网格线
this.drawGrid();
// 绘制食物
this.food.draw(this.ctx, this.gridSize);
// 绘制蛇
this.snake.draw(this.ctx, this.gridSize);
// 如果游戏暂停,显示暂停提示
if (this.gamePaused) {
this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fillStyle = '#ffffff';
this.ctx.font = '30px Arial';
this.ctx.textAlign = 'center';
this.ctx.fillText('游戏已暂停', this.canvas.width/2, this.canvas.height/2);
}
}
/**
* 绘制网格线
*/
drawGrid() {
this.ctx.strokeStyle = '#eee';
this.ctx.lineWidth = 1;
// 绘制垂直线
for (let i = 0; i <= this.tileCount; i++) {
this.ctx.beginPath();
this.ctx.moveTo(i * this.gridSize, 0);
this.ctx.lineTo(i * this.gridSize, this.canvas.height);
this.ctx.stroke();
}
// 绘制水平线
for (let i = 0; i <= this.tileCount; i++) {
this.ctx.beginPath();
this.ctx.moveTo(0, i * this.gridSize);
this.ctx.lineTo(this.canvas.width, i * this.gridSize);
this.ctx.stroke();
}
}
/**
* 更新分数显示
*/
updateScore() {
document.getElementById('score').textContent = this.score;
}
/**
* 游戏结束处理
*/
gameOver() {
this.gameRunning = false;
this.gamePaused = false;
alert(`游戏结束!最终得分: ${this.score}`);
this.updateButtonStates();
}
}
/**
* 蛇类
*/
class Snake {
constructor(tileCount) {
// 初始化蛇的位置(网格坐标)
this.body = [
{x: 10, y: 10}, // 头部
{x: 9, y: 10}, // 身体
{x: 8, y: 10} // 尾部
];
// 初始移动方向(向右)
this.dx = 1;
this.dy = 0;
// 下一帧的方向(防止反向移动)
this.nextDx = this.dx;
this.nextDy = this.dy;
}
/**
* 改变移动方向
*/
changeDirection(dx, dy) {
// 防止反向移动(不能直接掉头)
if (dx !== -this.dx || dy !== -this.dy) {
this.nextDx = dx;
this.nextDy = dy;
}
}
/**
* 移动蛇
*/
move() {
// 应用下一帧的方向
this.dx = this.nextDx;
this.dy = this.nextDy;
// 计算新头部位置
const head = {
x: this.body[0].x + this.dx,
y: this.body[0].y + this.dy
};
// 将新头部添加到身体前端
this.body.unshift(head);
// 移除尾部(除非正在生长)
if (!this.growing) {
this.body.pop();
} else {
this.growing = false;
}
}
/**
* 蛇生长(吃到食物时调用)
*/
grow() {
this.growing = true;
}
/**
* 检查碰撞
*/
checkCollision(tileCount) {
const head = this.body[0];
// 检查边界碰撞
if (head.x < 0 || head.x >= tileCount ||
head.y < 0 || head.y >= tileCount) {
return true;
}
// 检查自身碰撞
for (let i = 1; i < this.body.length; i++) {
if (head.x === this.body[i].x && head.y === this.body[i].y) {
return true;
}
}
return false;
}
/**
* 绘制蛇
*/
draw(ctx, gridSize) {
// 绘制蛇身
ctx.fillStyle = '#4CAF50';
for (let i = 0; i < this.body.length; i++) {
ctx.fillRect(
this.body[i].x * gridSize,
this.body[i].y * gridSize,
gridSize - 1,
gridSize - 1
);
}
// 绘制蛇头(不同颜色)
ctx.fillStyle = '#2E7D32';
ctx.fillRect(
this.body[0].x * gridSize,
this.body[0].y * gridSize,
gridSize - 1,
gridSize - 1
);
}
/**
* 获取蛇头位置
*/
get head() {
return this.body[0];
}
}
/**
* 食物类
*/
class Food {
constructor(tileCount) {
this.spawn(tileCount);
}
/**
* 生成食物位置
*/
spawn(tileCount) {
this.x = Math.floor(Math.random() * tileCount);
this.y = Math.floor(Math.random() * tileCount);
}
/**
* 绘制食物
*/
draw(ctx, gridSize) {
ctx.fillStyle = '#F44336';
ctx.fillRect(
this.x * gridSize,
this.y * gridSize,
gridSize - 1,
gridSize - 1
);
}
}
// 启动游戏
window.onload = function() {
const game = new SnakeGame();
};
</script>
</body>
</html>
画面如下

现在游戏就可以玩了。
IDE
这里使用的是pycharm来做示例
-
打开通义灵码的对话框。我们可以通过快捷键
ctrl+shift+L,或者点击侧边栏的按钮打开对话框
-
在对话框中,左下角两个选项,一个是智能体,另外另外一个是智能问答

- 智能问答普通的问答模式,而智能体模式具备自主决策、环境感知、工具使用等能力
- 更适合项目级别的开发,他可以自动感知工程框架、技术栈、所需代码文件、错误信息等工程内信息,无需手动添加工程上下文,任务描述更轻松
-
我们选择智能体,把上面的需求粘贴并发送
请用原生JavaScript开发一个贪吃蛇游戏,要求:
4. 20×20网格,键盘控制
5. 包含分数系统和速度递增
6. 代码用面向对象方式组织
7. 包含详细的代码注释 -
当发送后,智能体开始思考并生成代码,如图

-
当运行完成后,界面直接进入diff模式查看代码,同时也具有vscode的相应的按钮,来决定是否接受代码

-
如果接受代码,那么可以直接关闭diff模式的弹窗,查看项目代码或者直接运行项目
-
不接受代码也可以让他重新生成。