通义千问综合代码能力测试：制作web版五子棋

前不久申请了千问的代码模式，最近发现出现了这个入口，看来是通过了，是时候测试一下了。之前用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>