VUE+Canvas轻松实现经典五子棋游戏：趣味无穷，智趣并存！

用 Vue 和 Canvas 创建经典五子棋游戏：策略对决，趣味无穷

简介

五子棋，一种历史悠久的策略棋类游戏，因其简单规则和烧脑玩法而备受喜爱。如今，得益于现代技术，我们可以在虚拟世界中重现这一经典游戏，让更多的人体验它的乐趣。本文将指导您使用 Vue 和 Canvas 技术创建一款简单的五子棋游戏。

棋盘绘制

第一步是绘制游戏棋盘。我们可以使用 Canvas 的绘图 API，轻松实现棋盘的绘制。棋盘由 19 条横线和 19 条竖线组成，形成 361 个方格。

function drawBoard() {
  // 获取画布元素
  const canvas = document.getElementById("board");

  // 获取画布上下文
  const ctx = canvas.getContext("2d");

  // 设置线条颜色
  ctx.strokeStyle = "black";

  // 绘制横线
  for (let i = 0; i < 19; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * 30);
    ctx.lineTo(570, i * 30);
    ctx.stroke();
  }

  // 绘制竖线
  for (let i = 0; i < 19; i++) {
    ctx.beginPath();
    ctx.moveTo(i * 30, 0);
    ctx.lineTo(i * 30, 570);
    ctx.stroke();
  }
}

棋子落点判定

当玩家点击棋盘时，需要判断棋子应落在哪个方格。我们可以根据鼠标点击的位置来确定棋子的落点。

function getCell(x, y) {
  // 计算棋子落在哪个方格中
  const cellX = Math.floor(x / 30);
  const cellY = Math.floor(y / 30);

  return {
    x: cellX,
    y: cellY
  };
}

判断胜负

当棋盘上已有五个棋子连成一线时，游戏结束，并且落子的一方获胜。我们可以使用数组和字符串来判断最后的赢家。

function checkWinner(board) {
  // 检查横向是否有五子连线
  for (let i = 0; i < 19; i++) {
    let count = 0;
    for (let j = 0; j < 19; j++) {
      if (board[i][j] === currentPlayer) {
        count++;
      } else {
        count = 0;
      }

      if (count >= 5) {
        return currentPlayer;
      }
    }
  }

  // 检查纵向是否有五子连线
  for (let j = 0; j < 19; j++) {
    let count = 0;
    for (let i = 0; i < 19; i++) {
      if (board[i][j] === currentPlayer) {
        count++;
      } else {
        count = 0;
      }

      if (count >= 5) {
        return currentPlayer;
      }
    }
  }

  // 检查右斜线是否有五子连线
  for (let i = 0; i < 14; i++) {
    for (let j = 0; j < 14; j++) {
      let count = 0;
      for (let k = 0; k < 5; k++) {
        if (board[i + k][j + k] === currentPlayer) {
          count++;
        } else {
          count = 0;
        }

        if (count >= 5) {
          return currentPlayer;
        }
      }
    }
  }

  // 检查左斜线是否有五子连线
  for (let i = 0; i < 14; i++) {
    for (let j = 4; j < 19; j++) {
      let count = 0;
      for (let k = 0; k < 5; k++) {
        if (board[i + k][j - k] === currentPlayer) {
          count++;
        } else {
          count = 0;
        }

        if (count >= 5) {
          return currentPlayer;
        }
      }
    }
  }

  // 如果没有五子连线，则游戏继续
  return null;
}

代码示例

下面是一个简单的 Vue 组件代码示例，演示了如何使用 Vue 和 Canvas 来实现五子棋游戏：

<template>
  <div id="app">
    <canvas id="board" width="570" height="570"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      board: [],
      currentPlayer: "black",
      winner: null
    };
  },
  mounted() {
    this.drawBoard();
  },
  methods: {
    drawBoard() {
      const canvas = document.getElementById("board");
      const ctx = canvas.getContext("2d");

      // 设置线条颜色
      ctx.strokeStyle = "black";

      // 绘制横线
      for (let i = 0; i < 19; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * 30);
        ctx.lineTo(570, i * 30);
        ctx.stroke();
      }

      // 绘制竖线
      for (let i = 0; i < 19; i++) {
        ctx.beginPath();
        ctx.moveTo(i * 30, 0);
        ctx.lineTo(i * 30, 570);
        ctx.stroke();
      }
    },
    getCell(x, y) {
      // 计算棋子落在哪个方格中
      const cellX = Math.floor(x / 30);
      const cellY = Math.floor(y / 30);

      return {
        x: cellX,
        y: cellY
      };
    },
    checkWinner(board) {
      // 检查横向是否有五子连线
      for (let i = 0; i < 19; i++) {
        let count = 0;
        for (let j = 0; j < 19; j++) {
          if (board[i][j] === this.currentPlayer) {
            count++;
          } else {
            count = 0;
          }

          if (count >= 5) {
            return this.currentPlayer;
          }
        }
      }

      // 检查纵向是否有五子连线
      for (let j = 0; j < 19; j++) {
        let count = 0;
        for (let i = 0; i < 19; i++) {
          if (board[i][j] === this.currentPlayer) {
            count++;
          } else {
            count = 0;
          }

          if (count >= 5) {
            return this.currentPlayer;
          }
        }
      }

      // 检查右斜线是否有五子连线
      for (let i = 0; i < 14; i++) {
        for (let j = 0; j < 14; j++) {
          let count = 0;
          for (let k = 0; k < 5; k++) {
            if (board[i + k][j + k] === this.currentPlayer) {
              count++;
            } else {
              count = 0;
            }

            if (count >= 5) {
              return this.currentPlayer;
            }
          }
        }
      }

      // 检查左斜线是否有五子连线
      for (let i = 0; i < 14; i++) {
        for (let j = 4; j < 19; j++) {
          let count = 0;
          for (let k = 0; k < 5; k++) {
            if (board[i + k][j - k] === this.currentPlayer) {
              count++;
            } else {
              count = 0;
            }

            if (count >= 5) {
              return this.currentPlayer;
            }
          }
        }
      }

      // 如果没有五子连线，则游戏继续
      return null;
    }
  }
};
</script>

常见问题解答

**1. 如何玩五子棋