前言

今天和大家分享一些关于如何利用 ChatGPT 辅助游戏创作的想法。随着人工智能技术的不断发展，ChatGPT 的出现为游戏创作带来了新的可能性。它可以帮助我们更快地生成游戏角色、场景和剧情，让游戏开发变得更加高效和有趣。接下来，让我们一起探索如何利用 ChatGPT 来辅助游戏创作吧！

游戏规则

这个完全可以交给 ChatGPT 完成。

五子棋是一种双人对弈的棋类游戏，游戏规则如下：

1. 棋盘为 15 行 15 列，黑方先行。

2. 每个玩家轮流在棋盘上下棋子，黑方用黑色棋子，白方用白色棋子。

3. 棋子下在空白的交叉点上，每个交叉点只能下一枚棋子。

4. 玩家的目标是在棋盘上形成五个同色棋子连成一条线（横、竖、斜线均可）。

5. 如果一方玩家在棋盘上形成了五个同色棋子连成一条线，则该玩家获胜。

6. 如果棋盘上所有的交叉点都下满了棋子，但没有任何一方玩家形成五个同色棋子连成一条线，则游戏结束，双方平局。

游戏思路

如果你不知道怎么设计游戏，没关系，交给 ChatGPT 完成。

给 ChatGPT 发送指令，让它提供游戏的设计思路，内容如下：

1. 棋盘的绘制 首先需要绘制一个棋盘。可以使用 HTML 的 canvas 标签来实现。可以设置棋盘大小、背景颜色、线条颜色等等。

2. 棋子的放置 当用户点击棋盘时，需要判断当前这个位置是否已经有了棋子。如果没有，则根据当前玩家的角色（黑子或白子），在这个位置上绘制一个棋子。

3. 判断输赢 在每次棋子放置后，需要判断当前玩家是否获胜。可以从当前放置的棋子开始，向上下左右、斜着两个方向检查是否有连续五个相同颜色的棋子。如果有，则当前玩家获胜。

4. 切换玩家 每次棋子放置后，需要切换当前玩家的角色（黑子或白子）。

5. 悔棋功能 如果用户误操作或者想要重新开始游戏，可以提供悔棋功能。可以记录下所有棋子的落点，当用户点击悔棋按钮时，回退到上一步棋的状态。

6. 重新开始 当游戏结束后，可以提供重新开始游戏的按钮，回到初始状态。

有了以上游戏思路，我们就可以让 ChatGPT 帮助我们一步步来实现完整的游戏。

界面设计

绘制棋盘

我们给 ChatGPT 发送指令，让它绘制一个 15x15 的五子棋棋盘，输出代码如下：

<script>
   var canvas = document.getElementById("chessboard");
   var ctx = canvas.getContext("2d");

   // 设置棋盘颜色
   ctx.fillStyle = "#F9B87C";
   ctx.fillRect(0, 0, 750, 750);

   // 绘制棋盘线条
   ctx.strokeStyle = "#000";
   ctx.lineWidth = 1;

   for (var i = 0; i < 15; i++) {
       ctx.beginPath();
       ctx.moveTo(50 + i * 50, 50);
       ctx.lineTo(50 + i * 50, 700);
       ctx.stroke();

       ctx.beginPath();
       ctx.moveTo(50, 50 + i * 50);
       ctx.lineTo(700, 50 + i * 50);
       ctx.stroke();
   }

   // 绘制棋盘上的点
   ctx.fillStyle = "#000";

   for (var i = 0; i < 3; i++) {
       for (var j = 0; j < 3; j++) {
           ctx.beginPath();
           ctx.arc(200 + i * 300, 200 + j * 300, 5, 0, 2 * Math.PI);
           ctx.fill();
       }
   }

   ctx.beginPath();
   ctx.arc(350, 350, 5, 0, 2 * Math.PI);
   ctx.fill();
</script>

绘制棋子

我们给 ChatGPT 发送指令，让它写一个绘制棋子的函数，输出代码如下：

function drawPiece(x, y, color) {
   ctx.beginPath();
   ctx.arc(x * gridSize, y * gridSize, pieceSize, 0, 2 * Math.PI);
   if (color === BLACK) {
    ctx.fillStyle = "#000";
   } else {
    ctx.fillStyle = "#fff";
   }
   ctx.fill();
}

其中，ctx是canvas上下文对象；gridSize是网格大小；pieceSize是棋子半径大小；BLACK和WHITE分别表示黑色和白色棋子的常量。

代码实现

初始化棋盘

初始化棋盘的代码如下：

var chess = []; // 存储棋盘状态的二维数组，0表示空位，1表示黑子，2表示白子

// 初始化棋盘数组
for (var i = 0; i < 15; i++) {
 chess[i] = [];
 for (var j = 0; j < 15; j++) {
   chess[i][j] = 0;
 }
}

玩家下棋

放置棋子的代码如下：

function playChess(x, y) {
   // 检查是否可以下棋
   if (!canPlay) {
    return;
   }
   // 检查该位置是否已经下过棋
   if (board[x][y] !== 0) {
    return;
   }
   // 下棋
   board[x][y] = player;
   drawChess(x, y);
   // 检查胜负
   var result = checkWin(x, y);
   if (result) {
    alert(player === 1 ? "黑方胜利！" : "白方胜利！");
    canPlay = false;
    return;
   }
   // 切换玩家
   player = player === 1 ? 2 : 1;
}

鼠标事件

玩家下棋时触发鼠标事件的代码如下：

//获取棋盘元素
const chessboard = document.getElementById('chessboard');

//监听鼠标点击事件
chessboard.addEventListener('click', function(event) {
   //获取点击位置的坐标
   const x = event.offsetX;
   const y = event.offsetY;

   //将坐标转换为棋盘上格子的行列数
   //将floor改成round，离交叉线最近的哪个落子点
   //CELL_SIZE指一个格子的像素大小
   const row = Math.round(y / CELL_SIZE);
   const col = Math.round(x / CELL_SIZE);

   //玩家落子
   playChess(row, col);
});

判断输赢

让 ChatGPT 写一个判断胜负的函数，代码如下：

function checkWin(row, col, player, board) {
   let directions = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]];
   for (let i = 0; i < directions.length; i++) {
       let count = 0;
       let d = directions[i];
       let r = row + d[0];
       let c = col + d[1];
       while (r >= 0 && c >= 0 && r < board.length && c < board[0].length && board[r][c] === player) {
           count++;
           r += d[0];
           c += d[1];
           if (count >= 5) {
            return true;
        }
    }
   }
   return false;
}

//调用方法
if (checkWin(row, col, player, board)) {
console.log("player " + player + " wins!");
} else {
console.log("keep playing");
}

说明：

该函数接受四个参数：row表示当前下子的行号，col表示当前下子的列号，player表示当前下子的玩家（1或2），board表示当前棋盘状态。

将八个方向分别用一个二元数组表示，并遍历八个方向，分别检查当前位置下的子是否能够和同色棋子连成五子相连，如果能，则返回true。

如果循环完八个方向都没有返回true，则代表当前局面下仍然没有胜者，返回false。

电脑下棋

如果是2人对战，就很简单，只需要切换玩家就可以。如果是人机对战，就要复杂很多。

我们仍让 ChatGPT 写一个函数，代码如下：

function computerPlay() {
   var maxScore = 0;
   var bestMove = [];
   for (var i = 0; i < BOARD_SIZE; i++) {
       for (var j = 0; j < BOARD_SIZE; j++) {
           if (board[i][j] === EMPTY) {
               var score = getScore(i, j);
               if (score > maxScore) {
                   maxScore = score;
                   bestMove = [i, j];
               }
           }
       }
   }
   board[bestMove[0]][bestMove[1]] = COMPUTER;
   updateBoard();
   checkWin();
   currentPlayer = HUMAN;
}

这段代码只是给出了电脑方下棋的逻辑，缺少 getScore() 函数的实现。而 getScore() 这个函数才是人机对战的核心代码。我试着让它给我这个函数的代码，以下是它的回答：

抱歉，无法给出具体代码。因为五子棋游戏电脑方下棋的实现方式有很多种，而其中用于评估每个空位得分的算法也有很多。需要根据具体的实现方式和算法来编写对应的getScore()函数。

这个算法的核心是计算每一个空位的得分，得分最大的即为最佳落子点。试了很多提问方式，最终还是没有得到算法的代码，只能放弃。然而实在不想动手写这个代码，于是从 Github 找了一个算法来实现。

结束语

本篇我们分享了一个用 ChatGPT 辅助游戏创作的案例。从构思到完成创作，并修改代码使其在浏览器中运行，整个过程大概半天时间。以下是我的一些使用心得：

1. ChatGPT 的代码编写能力确实非常强大，很多代码基本无需改动就能直接使用；

2. 提问的方式很重要，提问时尽量给出明确的关键词，提问越准确就越能得到我们想要的结果；

3. ChatGPT给出的代码并不是完全正确的，需要我们在运行环境中调试及修改完善；

4. 如果是开发网页类小游戏，使用者应有一定的 html，canvas、javascript 技术的基础。

总之，ChatGPT 是一个非常强大的生成式 AI 工具，如果掌握了提问技巧，能极大的提高我们的工作效率。