JavaScript を使用してバックギャモンゲームプログラムを作成する方法-フロントエンドQ&A-php.cn

JavaScript を使用してバックギャモンゲームプログラムを作成する方法

PHPz

リリース： 2023-04-23 17:39:18

オリジナル

493 人が閲覧しました

バックギャモンゲームは、現代社会において長い歴史を持つ非常に古典的なチェスゲームです。コンピューター技術とインターネットの急速な発展により、人々はオンラインプラットフォームを通じてオンラインバックギャモンをプレイできるようになりました。これらのアプリケーションを実装する場合、人気のあるプログラミング言語として JavaScript について言及する必要があります。

JavaScript を使用してバックギャモンゲームプログラムを作成するにはどうすればよいですか?この記事では、著者が基本的なプログラムの実装アイデアを提供し、実装アイデアに基づいた簡潔かつ明確なフローチャートを示します。

1. プログラム実装のアイデア

チェス盤の生成

チェスゲームとして、バックギャモンゲームの中心となるのはもちろんチェス盤です。 JavaScript では、HTML と CSS を使用して単純なチェス盤を生成できます。コードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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>
  </head>
  <body>
    <div id="chessboard">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
      ...
    </div>
    <script src="main.js"></script>
  </body>
</html>

ログイン後にコピー

上記のコードでは、チェス盤の基本要素として <div> タグを使用し、CSS を使用してスタイルを設定します。ネストされたループを通じて 10 行 10 列のチェス盤を生成します。

チェスの駒の追加

チェス盤を生成した後、黒または白の駒をチェス盤に追加できる必要があります。これには、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 関数では、次の操作を実行する必要があります:

現在のグリッドにチェスの駒を追加します。すでにチェスの駒がある場合は、、これ以上追加できません。 ;
チェスの駒の色を相手の色に切り替えます;
現在のチェスのゲームが終了したかどうかを判断し、勝った場合は勝利情報を出力します。

コアコードは次のとおりです:

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

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

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

ログイン後にコピー

結果を判断する

最後の質問は、ゲームに勝ったかどうかを判断する方法です。。実際、ゴバンの結果を決定するルールは非常に簡単で、現在の駒の周囲に連続する 5 つの駒を探すだけです。

具体的な操作は次のとおりです:

1) getRow 関数を使用して、現在のグリッドの行数を取得します:

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

ログイン後にコピー

2 ) getCol 関数を使用して、現在のグリッドの列数を取得します:

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

ログイン後にコピー

3) getChessman 関数を使用して、チェスの駒の色情報を取得します。チェス盤上の指定された位置:

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

ログイン後にコピー

4) checkLine 関数を使用して、現在位置の周囲の全方向を検索し、連続する 5 つのチェスの駒があるかどうかを確認します:

// 检查棋子是否连成五个
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;
}

ログイン後にコピー

2. フローチャート

バックギャモンプログラムを実装するためのフローチャートは次のとおりです。