javascript五子棋

好的，我可以为您提供一些关于 JavaScript 实现五子棋的思路。

首先，我们需要创建一个棋盘，可以使用 HTML 的 table 元素来实现。然后，我们需要编写 JavaScript 代码来处理用户的点击事件，并在棋盘上显示出棋子。接下来，我们需要编写判断胜负的逻辑，以及实现悔棋和重新开始游戏等功能。

以下是一个简单的实现五子棋的示例代码：

HTML 代码：

<table id="chessboard">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <!-- 共有 15 行 -->
  </tbody>
</table>

JavaScript 代码：

// 定义棋盘大小
const ROWS = 15;
const COLS = 15;

// 定义棋子类型
const EMPTY = 0;
const BLACK = 1;
const WHITE = 2;

// 初始化棋盘数组
let board = [];
for (let i = 0; i < ROWS; i++) {
  board[i] = [];  for (let j = 0; j < COLS; j++) {
    board[i][j] = EMPTY;
  }
}

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

// 处理用户点击事件
chessboard.addEventListener('click', function(event) {
  let cell = event.target;
  if (cell.tagName === 'TD') {
    let row = cell.parentNode.rowIndex;
    let col = cell.cellIndex;
    if (board[row][col] === EMPTY) {
      // 在棋盘上显示棋子
      let chess = document.createElement('div');
      chess.className = 'chess';
      chess.classList.add(board.currentPlayer === BLACK ? 'black' : 'white');
      cell.appendChild(chess);
      // 更新棋盘数组
      board[row][col] = board.currentPlayer;
      // 判断胜负
      if (checkWin(row, col)) {
        alert(board.currentPlayer === BLACK ? '黑方胜利！' : '白方胜利！');
        reset();
      } else {
        // 切换下棋方
        board.currentPlayer = board.currentPlayer === BLACK ? WHITE : BLACK;
      }
    }
  }
});

// 判断胜负
function checkWin(row, col) {
  let player = board[row][col];
  // 判断横向是否连成五子
  let count = 1;
  for (let i = col - 1; i >= 0 && board[row][i] === player; i--) {
    count++;
  }
  for (let i = col + 1; i < COLS && board[row][i] === player; i++) {
    count++;
  }
  if (count >= 5) {
    return true;
  }
  // 判断纵向是否连成五子
  count = 1;
  for (let i = row - 1; i >= 0 && board[i][col] === player; i--) {
    count++;
  }
  for (let i = row + 1; i < ROWS && board[i][col] === player; i++) {
    count++;
  }
  if (count >= 5) {
    return true;
  }
  // 判断左上到右下是否连成五子
  count = 1;
  for (let i = row - 1, j = col - 1; i >= 0 && j >= 0 && board[i][j] === player; i--, j--) {
    count++;
  }
  for (let i = row + 1, j = col + 1; i < ROWS && j < COLS && board[i][j] === player; i++, j++) {
    count++;
  }
  if (count >= 5) {
    return true;
  }
  // 判断右上到左下是否连成五子
  count = 1;
  for (let i = row - 1, j = col + 1; i >= 0 && j < COLS && board[i][j] === player; i--, j++) {
    count++;
  }
  for (let i = row + 1, j = col - 1; i < ROWS && j >= 0 && board[i][j] === player; i++, j--) {
    count++;
  }
  if (count >= 5) {
    return true;
  }
  return false;
}

// 重新开始游戏
function reset() {
  // 清空棋盘数组
  for (let i = 0; i < ROWS; i++) {
    for (let j = 0; j < COLS; j++) {
      board[i][j] = EMPTY;
    }
  }
  // 清空棋盘元素
  let cells = chessboard.getElementsByTagName('td');
  for (let i = 0; i < cells.length; i++) {
    cells[i].innerHTML = '';
  }
  // 切换下棋方
  board.currentPlayer = BLACK;
}

// 初始化游戏
reset();

CSS 代码：

#chessboard {
  border-collapse: collapse;
}
#chessboard td {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  vertical-align: middle;
  text-align: center;
}
.chess {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}
.black {
  background-color: #000;
}
.white {
  background-color: #fff;
}