当前位置：首页 > article >正文

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

article 2024/11/23 7:52:13

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