如何使用JavaScript编写一个五子棋游戏程序

立即学习“Java免费学习笔记（深入）”；

2. 添加棋子

在生成棋盘之后，我们需要能够在棋盘上添加黑子或者白子。这需要我们使用JavaScript通过事件绑定实现。

方法如下：

1）用变量turn来表示当前下棋方，0代表黑子，1代表白子：

var turn = 0; // 当前下棋方，0代表黑子，1代表白子

2）使用document.getElementById方法获取到所有的棋盘格子，并且添加单击事件：

var cells = document.getElementsByClassName('col');
for (var i = 0, len = cells.length; i < len; i++) {
  cells[i].onclick = function() {
    addChessman(this);
  };
}

其中，addChessman函数表示添加棋子的操作。

3）在addChessman函数中，我们需要进行以下操作：

• 在当前格子中添加棋子，如果其中已经有棋子则不能再添加；
• 将棋子的颜色切换为对手的颜色；
• 判断当前棋局是否已经结束，如果胜利则输出胜利信息。

核心代码如下：

MagicArena

字节跳动推出的视觉大模型对战平台

下载

// 添加棋子
function addChessman(cell) {
  if (cell.className.indexOf('chessman') === -1) {
    // 当前格子中没有棋子，则可以添加
    var chessman = document.createElement('div');
    chessman.className = (turn === 0) ? 'black chessman' : 'white chessman';
    cell.appendChild(chessman);

    // 切换下棋方
    turn = (turn === 0) ? 1 : 0;

    // 判断是否胜利
    if (checkWin(cell)) {
      alert('游戏结束，' + ((turn === 0) ? '黑子' : '白子') + '胜利！');
    }
  }
}

3. 判断胜负

最后一个问题是如何判断游戏是否胜利。事实上，五子棋胜负的判断规则非常简单，只需要在当前下的棋子周围搜索是否有连续的五个棋子即可。

具体操作如下：

1）使用getRow函数获取到当前格子所在的行数：

function getRow(cell) {
  var row = cell.parentNode;
  while (row.nodeName === 'DIV' && row.className.indexOf('row') === -1) {
    row = row.parentNode;
  }
  return parseInt(row.className.replace(/^row/, ''));
}

2）使用getCol函数获取到当前格子所在的列数：

function getCol(cell) {
  return parseInt(cell.className.replace(/^col/, ''));
}

3）使用getChessman函数获取棋盘上指定位置的棋子颜色信息：

// 获取棋盘上指定位置的棋子颜色信息
function getChessman(row, col) {
  var cell = document.querySelector('.row' + row + ' .col' + col);
  if (cell && cell.firstChild && cell.firstChild.tagName === 'DIV') {
    return cell.firstChild.className;
  } else {
    return null;
  }
}

4）使用checkLine函数搜索当前位置周围的所有方向，看是否有连续的五个棋子：

// 检查棋子是否连成五个
function checkLine(row, col, offsetX, offsetY, count) {
  if (count === 5) {
    return true;
  } else if (row < 1 || row > 10 || col < 1 || col > 10) {
    return false;
  } else if (getChessman(row, col) === getChessman(row + offsetX, col + offsetY)) {
    return checkLine(row + offsetX, col + offsetY, offsetX, offsetY, count + 1);
  } else {
    return false;
  }
}

// 判断当前棋局是否结束
function checkWin(cell) {
  var row = getRow(cell);
  var col = getCol(cell);
  var flag = checkLine(row, col, 0, 1, 1) || // 水平方向
             checkLine(row, col, 1, 0, 1) || // 垂直方向
             checkLine(row, col, 1, 1, 1) || // 右斜方向
             checkLine(row, col, -1, 1, 1);  // 左斜方向
  return flag;
}

二、流程图

实现五子棋程序的流程图如下：

如上，当用户点击棋盘上的空白区域时，程序会执行如下的操作：

1. 判断当前位置是否有棋子，有则不进行操作；
2. 在当前位置上添加对应颜色的棋子；
3. 判断当前游戏是否胜利，如果胜利则输出胜利信息；
4. 切换下棋方，等待下一次操作。