五子棋对弈，棋盘纵横论英雄

前端

2024-01-01 08:21:04

五子棋，谁与争锋

五子棋，一项源远流长的中国传统游戏，以其简单易懂的规则和丰富的策略而广受欢迎。本文将带领您使用 JavaScript 从零开始开发一个简单的五子棋游戏，让您在棋盘上纵横驰骋，与对手一较高下。

一、规则简述

五子棋的规则十分简单，在纵横各 15 条直线上形成连续的五个棋子即可获胜。棋子可以落子在棋盘上的任意空位，但落子后不可移动或更改。

二、技术栈简介

本次五子棋游戏的开发将采用 JavaScript 作为编程语言，并利用 HTML5 的 canvas 元素作为棋盘。

三、棋盘搭建

首先，我们需要创建一个 15x15 的棋盘，并将其绘制在 canvas 元素上。棋盘的每个格子都是一个正方形，大小为 30px。

const canvas = document.getElementById('chessboard');
const ctx = canvas.getContext('2d');
const gridSize = 30;

for (let i = 0; i <= 15; i++) {
  ctx.moveTo(i * gridSize, 0);
  ctx.lineTo(i * gridSize, 15 * gridSize);

  ctx.moveTo(0, i * gridSize);
  ctx.lineTo(15 * gridSize, i * gridSize);
}
ctx.stroke();

四、棋子绘制

当玩家点击棋盘上的某个格子时，需要在该格子上绘制一个棋子。棋子的大小为 24px，颜色为黑色或白色，由当前玩家决定。

function drawChess(x, y, color) {
  ctx.beginPath();
  ctx.arc(x * gridSize + gridSize / 2, y * gridSize + gridSize / 2, 12, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

五、胜负判定

当玩家落子后，需要检查棋盘上的情况，判断是否有五子连珠的情况出现。如果出现五子连珠，则该玩家获胜，游戏结束。

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

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

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

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

  return false;
}