如何使用JavaScript編寫一個五子棋遊戲程序

五子棋遊戲是一種非常經典的棋類遊戲，在現代社會已經有了很長的歷史。而隨著電腦科技和網路的快速發展，現在人們已經可以透過網路平台進行線上五子棋對戰了。而在實作這些應用中，JavaScript作為一種大眾化程式語言自然也是不得不提的。

如何使用JavaScript來寫一個五子棋遊戲程式呢？在本文中，筆者將為大家提供一個基本的程序實現思路，並根據實現思路給出一份簡潔明了的流程圖。

一、程式實現想法

1. 產生棋盤

#作為一種棋盤遊戲，五子棋遊戲的核心當然是棋盤。在JavaScript中，我們可以使用HTML與CSS結合的方式來產生一個簡單的棋盤。程式碼如下：

nbsp;html>

  
    <meta>
    <title>五子棋游戏</title>
    <style>
      #chessboard {
        width: 540px;
        height: 540px;
        margin: 0 auto;
        border: 1px solid #333;
        position: relative;
      }
      .row {
        height: 30px;
        position: absolute;
        left: 0;
        right: 0;
      }
      .col {
        width: 30px;
        height: 30px;
        float: left;
        border: 1px solid #333;
      }
    </style>
  
  
    <div>
      <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      ...
    </div>
    <script></script>
  

在上述程式碼中，我們使用了<div>標籤作為棋盤的基本元素，並利用CSS對其進行樣式設計。透過循環嵌套產生10行10列的棋盤。 <ol start="2"><li>加上棋子</li></ol> <p>在產生棋盤之後，我們需要能夠在棋盤上加上黑子或白子。這需要我們使用JavaScript透過事件綁定實作。 </p> <p>方法如下：</p> <p>1）用變數<code>turn來表示目前下棋方，0代表黑子，1代表白子：

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

2）使用document.getElementById方法取得到所有的棋盤格子，並且新增點選事件：

var cells = document.getElementsByClassName('col');
for (var i = 0, len = cells.length; i <p>其中，<code>addChessman</code>函數表示新增棋子的操作。 </p><p>3）在<code>addChessman</code>函數中，我們需要進行以下動作：</p>

• 在目前格子中加入棋子，如果其中已經有棋子則不能再加;
• 將棋子的顏色切換為對手的顏色；
• 判斷當前棋局是否已經結束，如果勝利則輸出勝利訊息。

核心程式碼如下：

// 添加棋子
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  10 || 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. #切換下棋方，等待下一次操作。