简介
GPT-4很火，大家都在体验，我从前端代码方面来对其进行基础的测试，目标是生成一个直接在浏览器中运行的五子棋游戏，以下是我跟GPT-4的互动。
内容
一回合：
Q:请生成一个五子棋游戏，棋盘大小跟围棋一致，有淡黄色的渐变背景，棋子为黑白色，请用VUE3实现
GPT A:
这是一个简单的五子棋游戏实现，使用Vue 3。请将以下代码保存为名为Gomoku.vue的文件，然后将其导入到您的Vue项目中。
<template>
<div class="gomoku" @click="placePiece">
<canvas ref="board" :width="boardSize" :height="boardSize"></canvas>
</div>
</template>
<script>
import { ref, onMounted, reactive } from 'vue';
export default {
setup() {
const boardSize = 640;
const gridSize = 18;
const cellSize = boardSize / gridSize;
const board = ref(null);
const game = reactive({
board: new Array(gridSize * gridSize).fill(null),
currentPlayer: 'black',
gameOver: false,
});
const drawBoard = () => {
const ctx = board.value.getContext('2d');
ctx.fillStyle = 'linear-gradient(rgba(240, 230, 160, 1), rgba(238, 230, 133, 1))';
ctx.fillRect(0, 0, boardSize, boardSize);
ctx.strokeStyle = '#000';
for (let i = 1; i < gridSize; i++) {
ctx.beginPath();
ctx.moveTo(i * cellSize, cellSize);
ctx.lineTo(i * cellSize, boardSize - cellSize);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(cellSize, i * cellSize);
ctx.lineTo(boardSize - cellSize, i * cellSize);
ctx.stroke();
}
};
const drawPiece = (row, col, color) => {
const ctx = board.value.getContext('2d');
ctx.beginPath();
ctx.arc(col * cellSize, row * cellSize, cellSize / 2 - 4, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.stroke();
};
const placePiece = (event) => {
if (game.gameOver) return;
const x = event.clientX - board.value.getBoundingClientRect().left;
const y = event.clientY - board.value.getBoundingClientRect().top;
const col = Math.round(x / cellSize);
const row = Math.round(y / cellSize);
const index = row * gridSize + col;
if (game.board[index]) return;
game.board[index] = game.currentPlayer;
drawPiece(row, col, game.currentPlayer);
if (checkWin(row, col)) {
game.gameOver = true;
alert(`Player ${game.currentPlayer} wins!`);
return;
}
game.currentPlayer = game.currentPlayer === 'black' ? 'white' : 'black';
};
const checkWin = (row, col) => {
// Implement the logic to check if the current player wins
};
onMounted(() => {
drawBoard();
});
return {
board,
boardSize,
placePiece,
};
},
};
</script>
<style scoped>
.gomoku {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
</style>
这个组件创建了一个五子棋游戏。棋盘大小为640x640像素，共有18x18个格子。棋盘背景使用了淡黄色的渐变。黑白棋子会根据玩家的点击位置放置在棋盘
二回合：
观察到checkWin 函数没有内容，继续提问
Q:请补充 checkWin 方法
GPT A:
请将以下checkWin方法添加到Gomoku.vue组件的setup()函数中。这个方法会检查在给定的行和列位置是否有五子连珠，从而判断当前玩家是否获胜。
const checkWin = (row, col) => {
const directions = [
{ x: 0, y: 1 }, // vertical
{ x: 1, y: 0 }, // horizontal
{ x: 1, y: 1 }, // diagonal up-right
{ x: 1, y: -1 }, // diagonal down-right
];
const currentPlayer = game.board[row * gridSize + col];
for (const direction of directions) {
let count = 1;
for (let i = 1; i < 5; i++) {
const newRow = row + direction.y * i;
const newCol = col + direction.x * i;
const newIndex = newRow * gridSize + newCol;
if (
newRow >= 0 &&
newRow < gridSize &&
newCol >= 0 &&
newCol < gridSize &&
game.board[newIndex] === currentPlayer
) {
count++;
} else {
break;
}
}
for (let i = 1; i < 5; i++) {
const newRow = row - direction.y * i;
const newCol = col - direction.x * i;
const newIndex = newRow * gridSize + newCol;
if (
newRow >= 0 &&
newRow < gridSize &&
newCol >= 0 &&
newCol < gridSize &&
game.board[newIndex] === currentPlayer
) {
count++;
} else {
break;
}
}
if (count >= 5) {
return true;
}
}
return false;
};
这个方法遍历了四个方向（垂直、水平、对角线上右、对角线下右），检查在给定行和列位置是否有五子连珠。如果在任何方向上找到五子连珠，该方法将返回true，表示当前玩家已经获胜。否则，返回false。
现在，当玩家放置一个棋子并调用checkWin方法时，该方法将正确地判断当前玩家是否获胜。如果检测到获胜，游戏将显示一条胜利消息并结束。
三回合：
此时GPT-4给出的五子棋组件的代码完整了，本地用vite创建vue3项目，将代码复制上去，并运行，发现整个棋盘是黑色的，没有棋盘的线。
检查代码发现，线条是黑色，修改白色可以正常绘制出来，这就说明问题出在背景色的设置绘制上了，将 ctx.fillStyle 改成单一的颜色则可以展示。我对canvas的api并不熟悉，于是将问题抛给GPT-4.
Q:现在背景为黑色，看不到棋盘线条，请修复
GPT A:
为了让棋盘线条可见，我们需要更改绘制棋盘线条时使用的颜色。请更新drawBoard方法中设置ctx.strokeStyle的值，将其更改为浅色，例如白色，以使其在黑色背景上可见。将ctx.strokeStyle = '#000';更改为ctx.strokeStyle = '#fff';：
ctx.strokeStyle = '#fff'; // Change this line to use a lighter color
现在，棋盘线条将以白色绘制，使其在黑色背景上清晰可见。
四回合：
很明显，GPT没有关联到上下文，我需要背景色为淡黄色且渐变
Q:背景不要黑色，改为护眼的淡黄色
GPT A:
为了将棋盘背景更改为淡黄色，请更新drawBoard方法中设置ctx.fillStyle的值。将渐变更改为淡黄色的渐变，例如从rgba(245, 222, 179, 1)到rgba(255, 250, 205, 1)。这将创建一个淡黄色的渐变背景，有助于保护眼睛。
ctx.fillStyle = 'linear-gradient(rgba(245, 222, 179, 1), rgba(255, 250, 205, 1))'; // Change this line to create a pale yellow gradient
五回合：
背景色仍未为黑色
Q:棋盘背景色没有改变还是黑色，请检查是否存在其它原因
GPT A:
抱歉，我之前的回答没有解决问题。请尝试以下解决方案：
在组件的<style>部分，将.gomoku的背景颜色更改为淡黄色。例如，您可以将背景颜色设置为rgba(245, 222, 179, 1)。这会将整个棋盘区域的背景颜色更改为淡黄色：
<style scoped>
.gomoku {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(245, 222, 179, 1); /* Add this line to change the background color */
}
</style>
现在，整个棋盘区域的背景颜色应为淡黄色。如果棋盘背景仍然是黑色，请确保您的浏览器没有启用任何可能影响背景颜色的设置，例如夜间模式、暗色主题或自定义样式。
六回合：
上面的修改style不可能解决问题，我也将问题定位到 ctx.fillStyle 这里,并继续问
Q:ctx.fillStyle
GPT A:
在之前的回答中，我提到了使用ctx.fillStyle属性来设置棋盘背景的颜色。ctx.fillStyle是Canvas 2D 渲染上下文（CanvasRenderingContext2D对象）的属性，它决定了绘制形状时要使用的颜色、渐变或图案。在这个五子棋游戏中，我们使用ctx.fillStyle设置棋盘背景的颜色。
对于五子棋游戏，我们可以将ctx.fillStyle设置为淡黄色的渐变。以下是设置ctx.fillStyle的代码段：
javascriptCopy code
const ctx = board.value.getContext('2d');
ctx.fillStyle = 'linear-gradient(rgba(245, 222, 179, 1), rgba(255, 250, 205, 1))';
这里，我们使用linear-gradient()函数创建一个从rgba(245, 222, 179, 1)到rgba(255, 250, 205, 1)的线性渐变。然后，我们将此渐变应用于ctx.fillStyle属性。
要实际绘制背景，我们需要调用ctx.fillRect()方法，如下所示：
javascriptCopy code
ctx.fillRect(0, 0, boardSize, boardSize);
这将在整个画布上绘制一个矩形，其大小与画布大小相同。矩形将使用我们之前设置的ctx.fillStyle属性中的颜色、渐变或图案填充。
以上是使用ctx.fillStyle设置和绘制棋盘背景的方法。如果您有任何其他问题，请随时提问。
七回合：
GPT-4未能解决我的问题，我将ctx.fillStyle = 'linear-gradient 提给New Bing,New Bing 据此分析出我需要在canvas中设置渐变填充，并给出实例
你好，这是必应。ctx.fillStyle = 'linear-gradient是一个用于设置画布上填充形状的颜色、渐变或图案的属性³。它的值可以是一个CSS颜色值，一个线性或径向的渐变对象，或者一个图案对象¹²。
如果你想使用线性渐变作为填充样式，你需要先使用ctx.createLinearGradient()方法创建一个线性渐变对象，并且指定渐变线的起点和终点坐标。然后你可以使用addColorStop()方法给渐变对象添加不同的颜色停止点。最后你可以把渐变对象赋值给ctx.fillStyle属性，并且用fillRect()方法绘制一个填充矩形。
下面是一个示例代码，它创建了一个从黑色到红色到白色的线性渐变，并且用它来填充一个矩形：
```js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
源: 与必应的对话， 2023/3/20(1) CanvasRenderingContext2D.fillStyle - Web APIs | MDN - Mozilla. developer.mozilla.org/en-US/docs/… 访问时间 2023/3/20. (2) HTML canvas fillStyle Property - W3Schools. www.w3schools.com/tags/canvas… 访问时间 2023/3/20. (3) CanvasRenderingContext2D.createLinearGradient() - Web APIs | MDN - Mozilla. developer.mozilla.org/en-US/docs/… 访问时间 2023/3/20.
我则根据New Bing 提示调试代码，完成黄色渐变。并用new bing给我的API提示GPT-4
Q:ctx.createLinearGradient
GPT A:
为了将棋盘背景更改为淡黄色，请更新drawBoard方法中设置ctx.fillStyle的值。将渐变更改为淡黄色的渐变，例如从rgba(245, 222, 179, 1)到rgba(255, 250, 205, 1)。这将创建一个淡黄色的渐变背景，有助于保护眼睛。
ctx.fillStyle = 'linear-gradient(rgba(245, 222, 179, 1), rgba(255, 250, 205, 1))'; // Change this line to create a pale yellow gradient
ctx.createLinearGradient()是Canvas 2D API中的一个方法，用于创建一个线性渐变对象。这个对象可以用作ctx.fillStyle或ctx.strokeStyle的值来绘制渐变。以下是如何使用ctx.createLinearGradient()创建一个线性渐变的示例：
首先，在drawBoard方法中，我们将创建一个线性渐变对象。我们需要为该方法提供两个点（x0, y0）和（x1, y1），渐变将沿着这两个点之间的线进行。以下是创建一个从左上角到右下角的线性渐变的示例：
javascriptCopy code
const gradient = ctx.createLinearGradient(0, 0, boardSize, boardSize);
接下来，我们需要为渐变添加颜色停靠点。颜色停靠点表示在渐变中颜色的变化位置。我们可以通过调用gradient.addColorStop(offset, color)方法为渐变添加颜色停靠点，其中offset是0到1之间的值，表示颜色在渐变中的位置，color是要使用的CSS颜色值。
以下是为渐变添加两个颜色停靠点的示例：
javascriptCopy code
gradient.addColorStop(0, 'rgba(245, 222, 179, 1)');
gradient.addColorStop(1, 'rgba(255, 250, 205, 1)');
现在，我们已经创建了一个线性渐变对象并添加了颜色停靠点。我们可以将其应用于ctx.fillStyle，然后使用ctx.fillRect()方法绘制矩形，如下所示：
javascriptCopy code
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, boardSize, boardSize);
将上述代码段整合到drawBoard方法中：
javascriptCopy code
const drawBoard = () => {
const ctx = board.value.getContext('2d');
// Create a linear gradient
const gradient = ctx.createLinearGradient(0, 0, boardSize, boardSize);
gradient.addColorStop(0, 'rgba(245, 222, 179, 1)');
gradient.addColorStop(1, 'rgba(255, 250, 205, 1)');
// Apply the gradient to fillStyle and draw the background
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, boardSize, boardSize);
// ... (rest of the drawBoard method)
};
现在，棋盘背景将显示为从左上角到右下角的淡黄色渐变。
八回合：
现在一个简单的五子棋代码就完成了
但是下完一盘棋，还得刷新页面才能重新来一盘，不够好，继续添加功能。
Q:添加，重新开始，棋子回退方法
GPT A:
在您的五子棋组件中，我们可以添加resetGame和undoMove方法以实现重新开始和棋子回退功能。将以下方法添加到您的Gomoku.vue组件的setup()函数中：
javascriptCopy code
const resetGame = () => {
game.board = Array(gridSize * gridSize).fill(null);
game.currentPlayer = 'black';
game.gameOver = false;
game.winner = null;
game.moves = []; // 添加这行以存储走棋历史
};
const undoMove = () => {
if (game.moves.length === 0 || game.gameOver) {
return;
}
const lastMove = game.moves.pop();
const index = lastMove.row * gridSize + lastMove.col;
game.board[index] = null;
game.currentPlayer = game.currentPlayer === 'black' ? 'white' : 'black';
};
resetGame方法将重置游戏的状态，包括棋盘、当前玩家、游戏结束状态和赢家。同时，我们添加了一个名为game.moves的新数组来存储每一步的走棋历史。
undoMove方法将弹出最后一步走棋并撤销该步骤。它首先检查是否有走棋历史以及游戏是否已结束。然后，将最后一步弹出并将相应的棋盘单元格设为空。最后，切换当前玩家。
接下来，我们需要更新placeStone方法以在每次走棋时将走棋历史添加到game.moves数组中：
javascriptCopy code
const placeStone = (row, col) => {
if (game.board[row * gridSize + col] !== null || game.gameOver) {
return;
}
game.board[row * gridSize + col] = game.currentPlayer;
// 添加这行以将走棋历史添加到 game.moves 数组中
game.moves.push({ row, col, player: game.currentPlayer });
if (checkWin(row, col)) {
game.gameOver = true;
game.winner = game.currentPlayer;
} else {
game.currentPlayer = game.currentPlayer === 'black' ? 'white' : 'black';
}
};
最后，您需要在组件模板中为重新开始和棋子回退功能添加按钮。将以下按钮添加到Gomoku.vue组件的模板中：
htmlCopy code
<button @click="resetGame">重新开始</button>
<button @click="undoMove">回退一步</button>
现在，您的五子棋游戏应具有重新开始和棋子回退功能。点击“重新开始”按钮将重新开始游戏，点击“回退一步”按钮将撤销上一步棋子。
undoMove 里需要清除棋子显示
你是对的，我们需要在undoMove方法中确保清除撤销的棋子显示。为此，我们需要在undoMove方法中调用drawBoard函数以重绘整个棋盘。同时，我们还需要修改drawBoard函数以绘制棋子。
首先，我们将修改drawBoard函数以在棋盘上绘制棋子：
javascriptCopy code
const drawBoard = () => {
// ... (existing code to draw the board)
// Draw the stones
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const player = game.board[row * gridSize + col];
if (player) {
drawStone(row, col, player);
}
}
}
};
接下来，在undoMove方法的末尾，调用drawBoard函数以重绘整个棋盘：
javascriptCopy code
const undoMove = () => {
if (game.moves.length === 0 || game.gameOver) {
return;
}
const lastMove = game.moves.pop();
const index = lastMove.row * gridSize + lastMove.col;
game.board[index] = null;
game.currentPlayer = game.currentPlayer === 'black' ? 'white' : 'black';
drawBoard(); // Add this line to redraw the board
};
现在，当您点击“回退一步”按钮时，撤销的棋子将从棋盘上清除，并显示更新后的棋盘状态。
九回合：
发现每次回退都是重新绘制全部的棋盘和所有的棋子，这样肯定会很耗性能，作为有追求的程序员一定要优化一下，让GPT也更有追求。
Q:每次都重新绘制棋盘，会不会太耗性能了，有没有更好的方法
GPT A:
您的担忧是合理的，每次回退时重绘整个棋盘可能会影响性能。一种更好的方法是仅清除撤销的棋子而不是整个棋盘。这可以通过在undoMove方法中调用一个专门用于清除特定棋子的函数来实现。
我们可以创建一个名为clearStone的函数，该函数仅清除指定单元格上的棋子。将此函数添加到setup()函数中：
javascriptCopy code
const clearStone = (row, col) => {
const ctx = board.value.getContext('2d');
const x = col * cellSize + cellSize / 2;
const y = row * cellSize + cellSize / 2;
const padding = 2;
// Clear the stone by drawing a rectangle with the background color over it
ctx.fillStyle = '#F5DEB3'; // Background color
ctx.fillRect(x - cellSize / 2 + padding, y - cellSize / 2 + padding, cellSize - padding * 2, cellSize - padding * 2);
// Redraw the grid lines
ctx.strokeStyle = '#000';
ctx.beginPath();
ctx.moveTo(x, y - cellSize / 2 + padding);
ctx.lineTo(x, y + cellSize / 2 - padding);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x - cellSize / 2 + padding, y);
ctx.lineTo(x + cellSize / 2 - padding, y);
ctx.stroke();
};
接下来，更新undoMove方法以调用clearStone函数清除撤销的棋子：
javascriptCopy code
const undoMove = () => {
if (game.moves.length === 0 || game.gameOver) {
return;
}
const lastMove = game.moves.pop();
const index = lastMove.row * gridSize + lastMove.col;
game.board[index] = null;
game.currentPlayer = game.currentPlayer === 'black' ? 'white' : 'black';
clearStone(lastMove.row, lastMove.col); // Add this line to clear the stone
};
现在，当您点击“回退一步”按钮时，应用程序将仅清除撤销的棋子，而不是重绘整个棋盘。这样可以提高性能，特别是在大型棋盘上。
九回合：
将代码运行起来，发现回退时重绘的位置错了
让GPT-4继续处理
Q:位置计算错了，应该是交叉点，棋子的位置
GPT A:
对不起，我犯了一个错误。的确，我们需要在交叉点而非单元格中心清除棋子。下面是修复后的clearStone函数，该函数在正确的位置清除棋子：
javascriptCopy code
const clearStone = (row, col) => {
const ctx = board.value.getContext('2d');
const x = col * cellSize + cellSize / 2;
const y = row * cellSize + cellSize / 2;
const padding = 2;
// Clear the stone by drawing a rectangle with the background color over it
ctx.fillStyle = '#F5DEB3'; // Background color
ctx.fillRect(x - cellSize / 2 + padding, y - cellSize / 2 + padding, cellSize - padding * 2, cellSize - padding * 2);
// Redraw the grid lines
ctx.strokeStyle = '#000';
ctx.lineWidth = 1; // You can adjust the grid line width here
// Redraw the horizontal line
ctx.beginPath();
ctx.moveTo(x - cellSize / 2 + padding, y);
ctx.lineTo(x + cellSize / 2 - padding, y);
ctx.stroke();
// Redraw the vertical line
ctx.beginPath();
ctx.moveTo(x, y - cellSize / 2 + padding);
ctx.lineTo(x, y + cellSize / 2 - padding);
ctx.stroke();
};
这个修复后的clearStone函数应该可以正确地清除棋子和重绘交叉点的网格线。如您所指出的那样，我们确实需要在交叉点（而非单元格中心）进行操作。这个修复后的函数应该会按照预期工作。再次为之前的错误道歉，并感谢您的耐心。
十回合：
回退时重绘的位置还是错的，手动调试，将
const x = col * cellSize + cellSize / 2;
const y = row * cellSize + cellSize / 2;
改为:
const x = col * cellSize;
const y = row * cellSize;
并反馈给GPT-4.
Q:还是错了 const ctx = board.value.getContext('2d'); const x = col * cellSize; const y = row * cellSize; const padding = 2; 改成这样就没问题了
GPT A:
抱歉给您带来困扰。您是对的，应该使用col * cellSize和row * cellSize计算x和y。以下是修复后的clearStone函数：
javascriptCopy code
const clearStone = (row, col) => {
const ctx = board.value.getContext('2d');
const x = col * cellSize;
const y = row * cellSize;
const padding = 2;
// Clear the stone by drawing a rectangle with the background color over it
ctx.fillStyle = '#F5DEB3'; // Background color
ctx.fillRect(x + padding, y + padding, cellSize - padding * 2, cellSize - padding * 2);
// Redraw the grid lines
ctx.strokeStyle = '#000';
ctx.lineWidth = 1; // You can adjust the grid line width here
// Redraw the horizontal line
ctx.beginPath();
ctx.moveTo(x + padding, y + cellSize / 2);
ctx.lineTo(x + cellSize - padding, y + cellSize / 2);
ctx.stroke();
// Redraw the vertical line
ctx.beginPath();
ctx.moveTo(x + cellSize / 2, y + padding);
ctx.lineTo(x + cellSize / 2, y + cellSize - padding);
ctx.stroke();
};
这个修复后的函数应该能够在正确的位置清除棋子并重绘交叉点的网格线。感谢您的反馈，希望这次能够满足您的需求。
总结
十个回合的五子棋体验下来，GPT-4能完成90%的工作量，但有些地方仍需程序员调试，大部分代码由GPT-4完成并且有良好的注释，说不清是AI辅助我还是我辅助AI。使用者需发现问题，一旦遇到AI无法解决，需要能够解决问题，这些地方依然需要开发者的经验技巧。 使用先进工具，需要掌握这些工具的技巧，使其理解上下文，完成人物，五子棋游戏简单了点，我在这十个回合的沟通中还有许多需要优化的点，望大家查漏补缺。
