前不久申请了千问的代码模式，最近发现出现了这个入口，看来是通过了，是时候测试一下了。之前用claude做过游戏，效果不错Claude生成游戏测试：俄罗斯方块 - 集成InsCode快来阅读并即时体验吧~
但这个五子棋就先不调整了，因为中途有崩掉-越做越差了，还是先占个坑，后续再测测其它的。千问大模型的能力还是可以打的，起码在中上水平
环境说明
通义千问web版本：https://tongyi.aliyun.com
模式：代码模式
时间：2024-11-17
模式特色 - 代码分屏（待完善）
单独为代码模式设计的一个全屏编辑和预览弹窗，截图如下所示：
工具栏说明：
- 撤销 取消上一次的修改 （实测不可用，需要从旧的回答重新进入）
- 重做 重用取消的修改
- 添加注释 （自动生成添加注释的提示词重写）
- 转换语言（将代码转换成其它语言 - 测试效果不佳，可能简单的可以）
- 其它：复制 导出 分享 暗色（黑暗模式 - 不知道为何不与外部的统一）
提示词
编写一个web版本的五子棋
结果如下
<!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: #f4f4f9;
}
.board {
display: grid;
grid-template-columns: repeat(15, 30px);
grid-template-rows: repeat(15, 30px);
gap: 2px;
}
.cell {
width: 30px;
height: 30px;
background-color: #d6cdc4;
border-radius: 50%;
cursor: pointer;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
</style>
</head>
<body>
<div class="board" id="board"></div>
<script>
const boardSize = 15;
let currentPlayer = 'black';
let boardState = Array.from({ length: boardSize }, () => Array(boardSize).fill(null));
function createBoard() {
const boardElement = document.getElementById('board');
for (let row = 0; row < boardSize; row++) {
for (let col = 0; col < boardSize; col++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', handleCellClick);
boardElement.appendChild(cell);
}
}
}
function handleCellClick(event) {
const row = parseInt(event.target.dataset.row, 10);
const col = parseInt(event.target.dataset.col, 10);
if (boardState[row][col]) return;
boardState[row][col] = currentPlayer;
event.target.classList.add(currentPlayer);
if (checkWin(row, col)) {
alert(`${currentPlayer} 赢了！`);
resetGame();
return;
}
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
}
function checkWin(row, col) {
const directions = [
{ dx: 1, dy: 0 }, // 水平方向
{ dx: 0, dy: 1 }, // 垂直方向
{ dx: 1, dy: 1 }, // 斜线方向
{ dx: 1, dy: -1 } // 斜线方向 /
];
for (const direction of directions) {
let count = 1;
for (let i = 1; i < 5; i++) {
const newRow = row + direction.dy * i;
const newCol = col + direction.dx * i;
if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize &&
boardState[newRow][newCol] === currentPlayer) {
count++;
} else {
break;
}
}
for (let i = 1; i < 5; i++) {
const newRow = row - direction.dy * i;
const newCol = col - direction.dx * i;
if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize &&
boardState[newRow][newCol] === currentPlayer) {
count++;
} else {
break;
}
}
if (count >= 5) return true;
}
return false;
}
function resetGame() {
boardState = Array.from({ length: boardSize }, () => Array(boardSize).fill(null));
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => cell.className = 'cell');
currentPlayer = 'black';
}
createBoard();
</script>
</body>
</html>
效果预览
默认
落子
整体的设计比较一般，主要不知道怎么想的，这个竟然是用户自己对战，而不是用户下子后自动出白子
总结
整体来看，与cluade相比，功能和完善度都有待提升，不过也能理解，毕竟是测试阶段。生成代码的速度比较快，但这也可能是一个缺点。个人使用来看，claude的速度是不如gpt4o的，但质量会比较高，当然后者也有适用的范围。
而千问的代码模式，因为是测试阶段，不便多评论。比较不解的是，为什么没有和阿里云的功能对接起来，或许大公司的业务割裂确实比较严重，希望能越来越好吧。