ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

HTML ページ

注釈は非常に明確なので、注意深く研究してください。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、height=デバイス高さ、initial-scale=1.0、user-scalable=no">
  <title>ゴバン</title>
  <スタイル>
    * {
      マージン: 0px;
      パディング: 0px;
    }
 
    。箱 {
      境界線の間隔: 0px;
      境界線: 1px 実線 #3c3c3c;
      背景色: #e1e1e2;
      マージン: 自動;
    }
    
    。ピース {
      境界線の間隔: 0px;
      境界線: 1px 実線;    
    }
  </スタイル>
 
</head>
 
<本文>
  <script type="text/javascript" src="./Gobang.js"></script>
</本文>
 
</html>

ジャバスクリプト

var スクリーン幅 = {
  ドキュメント幅: 500,
  containerWidth: 400, // コンテナのデフォルトの幅 cellWidth: 20 // セルの幅}
document.documentElement.clientWidth < 500 の場合 {
  ScreenWidth.documentWidth = document.documentElement.clientWidth;
  スクリーン幅.コンテナ幅 = スクリーン幅.ドキュメント幅 * 0.8;
  スクリーン幅.セル幅 = スクリーン幅.コンテナ幅 * 0.05;
}
//定数 var reg = /\d{1,2}/g;
var white = []; // 白の駒を配置var black = []; // 黒の駒を配置var tempKey = false; // 黒と白のどちらの駒を動かすか決定var notOver = true; // ゲームが終了しているかどうか決定var tips = "White moves"; // 駒を動かす際のヒントvar count = 0;// 連結した駒の数var bv = false; // 黒が勝つvar wv = false; // 白が勝つvar yCanWin = [];// 同じ垂直要素を持つ配列var xCanWin = [];// 同じ水平要素を持つ配列var xyCanWin = [];// 同じ正負の対角線を持つ配列var yxCanWin = [];// 同じ負正の対角線を持つ配列// タイマーを使用して勝利を監視するvar time = setInterval(function () {
  もし（bv）{
    tips = "黒が勝ちます";
    document.getElementsByTagName("span")[0].innerText = ヒント;
    (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
      document.getElementsByClassName("pieceBox")[i].onclick = null;
    }
    クリア間隔(時間);
  }
  もし（wv）{
    tips = "白が勝ちます";
    document.getElementsByTagName("span")[0].innerText = ヒント;
    (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
      document.getElementsByClassName("pieceBox")[i].onclick = null;
    }
    クリア間隔(時間);
  }
}, 100);
newGame(); // ゲームを開始する function newGame() {
  document.getElementsByTagName("table").length の場合 {
    (var i = 0; i < document.getElementsByTagName("table").length; i++) {
      document.getElementsByTagName("テーブル")[i].remove();
    }
  }
  // 次のコンテンツを初期化します bgInit();
  ピースを初期化します。
  spanFn();
  白 = [];
  黒 = [];
  tempKey = false;
  オーバーではありません = true;
  tips = "白の動き";
  カウント = 0;
  bv = 偽;
  戻り値:
  yCanWin = [];
  戻り値
  yxCanWin = [];
}
 
関数spanFn() {
  var span = document.createElement("span");
  document.body.insertBefore(span, document.getElementsByTagName("script")[0]);
  span.innerText = ヒント;
}
// ボード初期化関数 bgInit() {
  var テーブル = document.createElement("テーブル");
  table.className = "ボックス"
  (var y = 0; y < 20; y++) の場合 {
    var tr = document.createElement("tr");
    (var x = 0; x < 20; x++) の場合 {
      var td = "<td class='box-" + y + "-" + x + "' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid #9c9c9c'></td>";
      tr.innerHTML += td;
    }
    テーブルに子要素を追加します。
  }
  document.body.insertBefore(テーブル、document.getElementsByTagName("script")[0]);
}
 
// チェスの駒の初期化関数 pieceInit() {
  var テーブル = document.createElement("テーブル");
  table.className = "ピース"
  table.style = "位置: absolute; 上: 0; 左: 50%; 左マージン: -" + (ScreenWidth.containerWidth + 42) / 2 + "px";
  (var y = 0; y < 20; y++) の場合 {
    var tr = document.createElement("tr");
    (var x = 0; x < 20; x++) の場合 {
      var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>";
      tr.innerHTML += td;
    }
    テーブルに子要素を追加します。
  }
  document.body.insertBefore(テーブル、document.getElementsByTagName("script")[0]);
}
 
// チェスの駒を動かす for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
  document.getElementsByClassName("pieceBox")[i].onclick = function () {
    if (tempKey) {
      this.style.backgroundColor = "#000"; // 黒い点 tempKey = false;
      black.push(this.className.match(reg));
      victory(black, 0); //黒が勝ったかどうかを判定 if (notOver) {
        ヒント = tipsGo(tempKey);
        document.getElementsByTagName("span")[0].innerText = ヒント;
      }
    } それ以外 {
      this.style.backgroundColor = "#fff"; // Baizi tempKey = true;
      white.push(this.className.match(reg));
      victory(white, 1); //白が勝ったかどうかを判定 if (notOver) {
        ヒント = tipsGo(tempKey);
        document.getElementsByTagName("span")[0].innerText = ヒント;
      }
    }
    this.onclick = null; // クリック後にクリックイベントをキャンセルします}
}
 
// 黒にするか白にするかのヒント function tipsGo(tempKey) {
  if (tempKey) {
    「黒が動く」を返します。
  } それ以外 {
    「白の動き」を返します。
  }
}
 
/**
 * さまざまな勝ちを判断する方法 * x は垂直座標を表し、y は垂直座標を表します * 1. 垂直勝ち、つまり x 値が同じで、y 値を取得して並べ替えて比較します * 2. 水平勝ち、つまり y 値が同じで、x 値を取得して並べ替えて比較します * 3. 前方対角勝ち、x + y が同じ値で、x または y を取得して並べ替えて比較します * 4. 逆対角勝ち、xy が同じ値で、x または y を取得して並べ替えて比較します */
関数の勝利(ターゲット、c) {
  ターゲットの長さが5以上の場合
    // 1. 垂直方向の勝利 yCanWin
    (var i = 0; i < target.length; i++) の場合 {
      (var j = 0; j < target.length; j++) の場合 {
        （ターゲット[j][1] == ターゲット[i][1]）の場合{
          yCanWin.push(target[j]); // 配列yCanWinにxと同じ値を入れる
        }
      }
      yCanWin関数は、yCanWinが0のときに実行されます。
      yCanWin = [];
    }
    // 2. 勝つ xCanWin
    (var m = 0; m < target.length; m++) の場合 {
      (var n = 0; n < target.length; n++) の場合 {
        （ターゲット[n][0] == ターゲット[m][0]）の場合{
          xCanWin.push(target[n]); // yと同じ値を配列xCanWinに格納する
        }
      }
      xWin(xCanWin, c);
      戻り値:
    }
    // 3. 正の斜め勝ち xyCanWin (左下から右上)
    (var a = 0; a < target.length; a++) の場合 {
      (var b = 0; b < target.length; b++) の場合 {
        parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1]) の場合 {
          xyCanWin.push(ターゲット[b])
        }
      }
      yWin(xyCanWin, c);
      戻り値
    }
    // 4. バックスラッシュ win yxCanWin (左上から右下へ)
    (var v = 0; v < target.length; v++) の場合 {
      (var w = 0; w < target.length; w++) の場合 {
        parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1]) の場合
          yxCanWin.push(ターゲット[w])
        }
      }
      xWin(yxCanWin, c);
      yxCanWin = [];
    }
  }
}
// チェスの垂直勝利条件 (チェスの垂直勝利条件)
function yWin(yCanWin, c) { // c = 0 は黒の駒を表す c = 1 は白の駒を表す var sortArray = []; // 配列をソートする for (var i = 0; i < yCanWin.length; i++) {
    sortArray.push(yCanWin[i][0]);
  }
  sortArray.sort(関数(x, y) {
    x - y を返します。
  });
  // 配列をソートした後、最初の数値と最後の数値に 1 を加えた数値を比較します (数値型の変換に注意してください)
  (var j = 0; j < sortArray.length; j++) {
    ソート配列[j + 1]の場合
      parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1]) の場合 {
        count++; // 連続する数字ごとに1を加算し、不連続がある場合はクリアします。if (count == 4 && c == 0) {
          bv = 真;
          notOver = false; // ゲームオーバー return;
        } そうでない場合 (count == 4 && c == 1) {
          真
          notOver = false;
          戻る;
        }
      } それ以外 {
        カウント = 0;
      }
    }
  }
  カウント = 0;
}
// チェスの水平方向の勝利条件（チェスの逆対角方向の勝利条件）
関数xWin(xCanWin, c) {
  var ソート配列 = [];
  (var i = 0; i < xCanWin.length; i++) の場合 {
    sortArray.push(xCanWin[i][1]);
  }
  sortArray.sort(関数(x, y) {
    x - y を返します。
  });
  (var j = 0; j < sortArray.length; j++) {
    ソート配列[j + 1]の場合
      parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1]) の場合 {
        カウント++;
        カウントが4でcが0の場合
          bv = 真;
          notOver = false;
          戻る;
        } そうでない場合 (count == 4 && c == 1) {
          真
          notOver = false;
          戻る;
        }
      } それ以外 {
        カウント = 0;
      }
    }
  }
  カウント = 0;
}

古典的な JavaScript ゲームに関するすべての記事については、学習用の特別トピックを参照してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: