ChatGPT 时代，程序员的生存之道 | 人工智能 AI

标签：const AI 代码 ctx 3D ChatGPT 生存之道 size

前言

ChatGPT 近期炙手可热，仿佛没有什么问题是它不能解决的。出于对 ChatGPT 的好奇，我们决定探索下它对于前端开发人员来讲，是作为辅助工具多一些，还是主力工具更多一些？

2D 能力测试

我们就挑选一个著名的递归回溯问题——“八皇后”，看看 ChatGPT 的表现如何。

什么是“八皇后”

首先，我们先让它完整介绍下“八皇后“问题。让我们拭目以待 ChatGPT 会给出什么样的答案，沟通如下图所示：

只是要求介绍一下“八皇后”问题，它竟然连解题思路也如此清晰地一并给出。

编程能力

既然如此，那就来考考编程能力。

先要求它使用 JavaScript 求解“八皇后”问题的所有解。为了方便查看最终效果，又要求它使用 Canvas 将结果绘制出来。具体问答如图所示：

目不转睛地注视着屏幕中的 ChatGPT ，它一行一行噼里啪啦地给出答案，且代码编写地如此整洁，不禁由衷赞叹。虽然还不确定这些代码能否真的运行起来，得到我们想要的效果，但是从生成代码的结构和逻辑性来看，已经足够令人震撼。

接下来，我们来验证一下代码是否真的可以顺利运行。复制粘贴 ChatGPT 给出的答案，在未更改一行代码的情况下，页面的确运行了。一起看看运行效果：

看着实现出来的效果，我的内心开始忐忑不安。脑海里疯狂计算着这样一个问题：我需要花费多长时间才能解决以上问题？反正肯定无法像 ChatGPT 这样，不到 30S 就给出结果。

输出所有解

再回过头来看答案，却发现只打印出一个结果，所以它能否将所有的结果都打印出来呢？我们接着提出需求，答案如图所示：

Unbelievable，竟然真的可以，立即复制粘贴操作，检验运行效果：

仔细数了下，发现只输出了 16 个解，但是开头提到总共是有 92 个解。通过仔细查阅代码，发现一个小格子被定义为 40 个像素，而整个 Canvas 的大小是 1280 像素，所以这个 Canvas 最多只能画 16 个棋盘。

在此输出中，棋盘和棋盘之间没有点间隔，很难辨别棋盘边界，观看起来有些费力。问题相对简单，只需调整几个参数即可解决，我们选择手动调整，调整后的 drawChessboards 方法。如下所示：

function drawChessboards(solutions) {
    const canvas = document.getElementById('chessboard');
    const ctx = canvas.getContext('2d');


    const n = solutions[0].length;
    const solutionsPerRow = Math.ceil(Math.sqrt(solutions.length));


    const sizeWithGap = canvas.width / solutionsPerRow / n;
    const size = sizeWithGap * 0.95;


    for (let k = 0; k < solutions.length; k++) {
        const offsetX = ((k % solutionsPerRow) * n + 0.2) * sizeWithGap;
        const offsetY = (Math.floor(k / solutionsPerRow) * n + 0.2) * sizeWithGap;


        for (let row = 0; row < n; row++) {
            for (let col = 0; col < n; col++) {
                if ((row + col) % 2 === 0) {
                    ctx.fillStyle = '#FFFFFF';
                } else {
                    ctx.fillStyle = '#000000';
                }


                ctx.fillRect(col * size + offsetX, row * size + offsetY, size, size);


                if (solutions[k][row][col] === 'Q') {
                    ctx.beginPath();
                    ctx.arc(col * size + size / 2 + offsetX, row * size + size / 2 + offsetY, size / 4, 0, 2 * Math.PI);
                    ctx.fillStyle = '#FF0000';
                    ctx.fill();
                }
            }
        }
    }
}

接下来再瞧瞧最终的运行效果：