从零开始利用原生JS+Canvas打造五子棋游戏

2023-11-20 16:34:07

前言

五子棋是一款古老而有趣的棋盘游戏，如今您可以使用原生JavaScript和Canvas轻松创建自己的五子棋游戏。在这篇文章中，我们将逐步引导您完成整个开发过程，从构建棋盘到实现悔棋功能，让您体验从零开始创造游戏的乐趣。

搭建棋盘

首先，我们需要创建一个画布（Canvas）元素，并获取其上下文。然后，使用Canvas的绘图方法绘制棋盘。我们可以使用一个二维数组来表示棋盘的状态，其中每个元素代表一个格子，值为0表示该格子为空，值为1表示该格子已被黑棋占据，值为2表示该格子已被白棋占据。

// 获取画布和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制棋盘
for (let i = 0; i < 15; i++) {
  for (let j = 0; j < 15; j++) {
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(i * 40, j * 40, 40, 40);
    ctx.strokeRect(i * 40, j * 40, 40, 40);
  }
}

落子与判断胜负

当玩家点击棋盘上的某个格子时，我们首先需要检查该格子是否为空。如果为空，则将棋子放置在该格子上，并更新棋盘状态。然后，我们需要检查是否有玩家已经获胜。五子棋的获胜条件是，有五颗连续的棋子（横向、纵向或斜向）属于同一玩家。

// 落子
canvas.addEventListener('click', (e) => {
  const x = Math.floor(e.offsetX / 40);
  const y = Math.floor(e.offsetY / 40);

  if (board[x][y] === 0) {
    board[x][y] =currentPlayer;
    drawPiece(x, y, currentPlayer);

    // 检查胜负
    if (checkWin(x, y, currentPlayer)) {
      alert('玩家' + currentPlayer + '获胜！');
      return;
    }

    // 切换玩家
    currentPlayer = currentPlayer === 1 ? 2 : 1;
  }
});

// 判断胜负
const checkWin = (x, y, player) => {
  // 检查横向
  let count = 1;
  for (let i = x - 1; i >= 0; i--) {
    if (board[i][y] === player) {
      count++;
    } else {
      break;
    }
  }
  for (let i = x + 1; i < 15; i++) {
    if (board[i][y] === player) {
      count++;
    } else {
      break;
    }
  }
  if (count >= 5) {
    return true;
  }

  // 检查纵向
  count = 1;
  for (let i = y - 1; i >= 0; i--) {
    if (board[x][i] === player) {
      count++;
    } else {
      break;
    }
  }
  for (let i = y + 1; i < 15; i++) {
    if (board[x][i] === player) {
      count++;
    } else {
      break;
    }
  }
  if (count >= 5) {
    return true;
  }

  // 检查左斜线
  count = 1;
  for (let i = x - 1, j = y - 1; i >= 0 && j >= 0; i--, j--) {
    if (board[i][j] === player) {
      count++;
    } else {
      break;
    }
  }
  for (let i = x + 1, j = y + 1; i < 15 && j < 15; i++, j++) {
    if (board[i][j] === player) {
      count++;
    } else {
      break;
    }
  }
  if (count >= 5) {
    return true;
  }

  // 检查右斜线
  count = 1;
  for (let i = x - 1, j = y + 1; i >= 0 && j < 15; i--, j++) {
    if (board[i][j] === player) {
      count++;
    } else {
      break;
    }
  }
  for (let i = x + 1, j = y - 1; i < 15 && j >= 0; i++, j--) {
    if (board[i][j] === player) {
      count++;
    } else {
      break;
    }
  }
  if (count >= 5) {
    return true;
  }

  return false;
};

实现悔棋功能

为了增加游戏的可玩性，我们可以实现悔棋功能。悔棋功能允许玩家撤销上一步棋，从而改变棋盘的状态。实现悔棋功能的关键在于，我们需要保存每次落子的状态，以便在需要时能够还原棋盘。

// 保存每次落子的状态
const history = [];

// 落子
canvas.addEventListener('click', (e) => {
  const x = Math.floor(e.offsetX / 40);
  const y = Math.floor(e.offsetY / 40);

  if (board[x][y] === 0) {
    board[x][y] =currentPlayer;
    drawPiece(x, y, currentPlayer);

    // 保存落子的状态
    history.push({ x, y, player: currentPlayer });

    // 检查胜负
    if (checkWin(x, y, currentPlayer)) {
      alert('玩家' + currentPlayer + '获胜！');
      return;
    }

    // 切换玩家
    currentPlayer = currentPlayer === 1 ? 2 : 1;
  }
});

// 悔棋
document.getElementById('undo-button').addEventListener('click', () => {
  if (history.length > 0) {
    // 获取上一步落子的状态
    const lastMove = history.pop();

    // 销毁棋子
    ctx.clearRect(lastMove.x * 40, lastMove.y * 40, 40, 40);

    // 更新棋盘状态
    board[lastMove.x][lastMove.y] = 0;

    // 切换玩家
    currentPlayer = lastMove.player;
  }
});