javascript - Tic-Tac_Toe 计算机算法

Question

我一直在开发一个简单的井字棋游戏，但遇到了一堵砖墙。

虽然大多数游戏功能都已到位，但我缺少适当放置计算机图 block 所需的关键算法。

我需要一种算法，可以搜索 3x3 的瓷砖网格，并在网格中搜索计算机瓷砖的最佳位置。

对于如何设计此算法的任何指导或见解，我将不胜感激。

不完整的井字游戏算法:

function placeComputerTile(el){
  if(computerTurn === true && userTurn === false){
    var tileIsEmpty = true;
    // If the selected tile has at least one child,
    // do not allow placement of another tile.
    if (el.firstChild) {
        tileIsEmpty = false;
      }
    if(tileIsEmpty === true){
      cloneComputerIcon();
    }
    el.appendChild(newComputerIcon);
    addClass(el, "x");
    newComputerIcon.style.display = null;
  }
}

完整的 Javascript:

var gameIcons    = document.getElementsByClassName('gameIcon');
var turnDisplays = document.getElementsByClassName('turnDisplay');

for (var i = 0; i < gameIcons.length; i++) {
  gameIcons[i].style.display = 'none';
}

for (var i = 0; i < turnDisplays.length; i++) {
  turnDisplays[i].style.display = 'none';
}

var userTurn     = true;
var computerTurn = false;
var currentTurn  = 1;
var maxTurn      = 10;

var userTurnDisplay     = document.getElementById("userTurnDisplay");
var computerTurnDisplay = document.getElementById("computerTurnDisplay");

function evaluateTurn(){
  currentTurn += 1;
  for(var i = 0; i < maxTurn; i++) {
    if(currentTurn % 2 === 0){
      userTurn     = true;
      computerTurn = false;
    }else if(currentTurn % 2 !== 0){
      userTurn     = false;
      computerTurn = true;
    }
  }
  if(currentTurn === maxTurn){
    alert("Draw!");
    userTurnDisplay.style.display = "none";
    computerTurnDisplay.style.display = "none";
  }
  //Change display depending on players turn.
  if(userTurn === true && currentTurn !== maxTurn) {
    computerTurnDisplay.style.display = null;
    userTurnDisplay.style.display = "none";
  }else if(computerTurn === true && currentTurn !== maxTurn){
    userTurnDisplay.style.display = null;
    computerTurnDisplay.style.display = "none";
  }
}

var cloneUserIcon = function(){
  var userIcon = document.getElementById("userIcon");
  newUserIcon = userIcon.cloneNode(true);
}

var cloneComputerIcon = function(){
  var computerIcon = document.getElementById("computerIcon");
  newComputerIcon = computerIcon.cloneNode(true);
}

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function placeUserTile(el){
  if(userTurn === true && computerTurn === false){
    var tileIsEmpty  = true;
    // If the selected tile has at least one child,
    // do not allow placement of another tile.
    if (el.firstChild) {
      tileIsEmpty = false;
    }
    if(tileIsEmpty === true){
      cloneUserIcon();
    }
    el.appendChild(newUserIcon);
    addClass(el, "o");
    newUserIcon.style.display = null;
  }
}

///////////////////////////////////////////////////////////////////////////////
//                        computer move logic                                //
//                                                                           //

function placeComputerTile(el){
  if(computerTurn === true && userTurn === false){
    var tileIsEmpty = true;
    // If the selected tile has at least one child,
    // do not allow placement of another tile.
    if (el.firstChild) {
        tileIsEmpty = false;
      }
    if(tileIsEmpty === true){
      cloneComputerIcon();
    }
    el.appendChild(newComputerIcon);
    addClass(el, "x");
    newComputerIcon.style.display = null;
  }
}

//                                                                           //
//                                                                           //
///////////////////////////////////////////////////////////////////////////////

// Search an array of tiles.
function hasTile(tilesArray){

   var allHaveChild = tilesArray.length > 0;
   for(var i = 0; i < tilesArray.length; i++){
     if(!tilesArray[i].firstChild){
       allHaveChild = false;
     }
   }
   if(allHaveChild)
    return true;
   else
    return false;
}

function hasClass(element, className) {
  return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

// Row 1 Tiles
const R1C1             = document.getElementById('r1c1');
const R1C2             = document.getElementById('r1c2');
const R1C3             = document.getElementById('r1c3');
//
// // Row 2 Tiles
const R2C1             = document.getElementById('r2c1');
const R2C2             = document.getElementById('r2c2');
const R2C3             = document.getElementById('r2c3');
//
// // Row 3 Tiles
const R3C1             = document.getElementById('r3c1');
const R3C2             = document.getElementById('r3c2');
const R3C3             = document.getElementById('r3c3');

//Set of all row tiles
var rowOneTiles        = [R1C1,R1C2,R1C3];
var rowTwoTiles        = [R2C1,R2C2,R2C3];
var rowThreeTiles      = [R3C1,R3C2,R3C3];

// Set of all column tiles
var columnOneTiles     = [R1C1,R2C1,R3C1];
var columnTwoTiles     = [R1C2,R2C2,R3C2];
var columnThreeTiles   = [R1C3,R2C3,R3C3];

//Set of left-diagonal & right-diagonal tiles
var leftDiagonalTiles  = [R1C1,R2C2,R3C3];
var rightDiagonalTiles = [R1C3,R2C2,R3C1];

function checkRow1(){
  // If the entire row is filled:
  if(hasTile(rowOneTiles)){
    var el_1 = rowOneTiles[0];
    var el_2 = rowOneTiles[1];
    var el_3 = rowOneTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkRow2(){
  // If the entire row is filled:
  if(hasTile(rowTwoTiles)){
    var el_1 = rowTwoTiles[0];
    var el_2 = rowTwoTiles[1];
    var el_3 = rowTwoTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkRow3(){
  // If the entire row is filled:
  if(hasTile(rowThreeTiles)){
    var el_1 = rowThreeTiles[0];
    var el_2 = rowThreeTiles[1];
    var el_3 = rowThreeTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkColumn1(){
  // If the entire row is filled:
  if(hasTile(columnOneTiles)){
    var el_1 = columnOneTiles[0];
    var el_2 = columnOneTiles[1];
    var el_3 = columnOneTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkColumn2(){
  // If the entire row is filled:
  if(hasTile(columnTwoTiles)){
    var el_1 = columnTwoTiles[0];
    var el_2 = columnTwoTiles[1];
    var el_3 = columnTwoTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkColumn3(){
  // If the entire row is filled:
  if(hasTile(columnThreeTiles)){
    var el_1 = columnThreeTiles[0];
    var el_2 = columnThreeTiles[1];
    var el_3 = columnThreeTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkLeftDiagonal(){
  // If the entire row is filled:
  if(hasTile(leftDiagonalTiles)){
    var el_1 = leftDiagonalTiles[0];
    var el_2 = leftDiagonalTiles[1];
    var el_3 = leftDiagonalTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkRightDiagonal(){
  // If the entire row is filled:
  if(hasTile(rightDiagonalTiles)){
    var el_1 = rightDiagonalTiles[0];
    var el_2 = rightDiagonalTiles[1];
    var el_3 = rightDiagonalTiles[2];
    if(hasClass(el_1,"x") && hasClass(el_2,"x") && hasClass(el_3,"x")){
      alert("Sorry, you've lost.");
    }else if(hasClass(el_1,"o") && hasClass(el_2,"o") && hasClass(el_3,"o")){
      alert("Congratulations, you've won!");
    }
  }
}

function checkForWin(){
  checkRow1();
  checkRow2();
  checkRow3();
  checkColumn1();
  checkColumn2();
  checkColumn3();
  checkLeftDiagonal();
  checkRightDiagonal();
}

function main(el){
  evaluateTurn();
  if(userTurn === true){
    placeUserTile(el);
  }
  if(computerTurn === true){
    placeComputerTile(el);
  }
  checkForWin();
}

完整的 HTML:

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tic-Tac-Toe</title>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles/game.css">

  </head>
  <body>

    <div class="container">
      <h1>Tic-Tac-Toe</h1>
    </div>

    <div class="container" id="tileContainer">
      <!-- id listed by row-column notation. -->
      <div class="row">
        <div class="col-xs-6 col-md-12 tile rowOne columnOne"   id="r1c1" onclick="main(this)"></div>
        <div class="col-xs-6 col-md-12 tile rowOne columnTwo"   id="r1c2" onclick="main(this)"></div>
        <div class="col-xs-6 col-md-12 tile rowOne columnThree" id="r1c3" onclick="main(this)"></div>
      </div>

      <div class="row">
        <div class="col-xs-6 col-md-12 tile rowTwo columnOne"   id="r2c1" onclick="main(this)"></div>
        <div class="col-xs-6 col-md-12 tile rowTwo columnTwo"   id="r2c2" onclick="main(this)"></div>
        <div class="col-xs-6 col-md-12 tile rowTwo columnThree" id="r2c3" onclick="main(this)"></div>
      </div>

      <div class="row">
        <div class="col-xs-6 col-md-12 tile rowThree columnOne"   id="r3c1" onclick="main(this)"></div>
        <div class="col-xs-6 col-md-12 tile rowThree columnTwo"   id="r3c2" onclick="main(this)"></div>
        <div class="col-xs-6 col-md-12 tile rowThree columnThree" id="r3c3" onclick="main(this)"></div>
      </div>
    </div>
    <!-- End of tile container -->

    <div class="container" id="turnDisplayContainer">
      <div class="row">
        <div class="col-xs-9 col-md-6 turnDisplay" id="userTurnDisplay">
          <h4>Your Turn</h4>
        </div>
        <div class="col-xs-9 col-md-6 turnDisplay" id="computerTurnDisplay">
          <h4>Computer's Turn</h4>
        </div>
      </div>
    </div>

    <img class="img img-responsive gameIcon" src="assets/img/green-ring.png" alt="Green Ring Icon" id="userIcon" />
    <img class="img img-responsive gameIcon" src="assets/img/red-x.png"      alt="Red X Icon"      id="computerIcon" />

    <!-- Custom JS -->
    <script type="text/javascript" src="scripts/game.js"></script>

  </body>
</html>

完整的 CSS:

h1{
  text-align: center;
}

h4{
  text-align: center;
}

.container{
  margin: 0px;
  padding: 0px;
  width: auto;
}

.row{
  margin: 0 auto;
  max-width: 300px;
}

.tile{
  width:             100px;
  height:            100px;
  border:   1px solid blue;
  background-color:  white;
}

Answer 1

看看这个链接: http://userpages.umbc.edu/~hoban/FLEX/CourseDocs/TicTacToe.pdf

想一想您如何将井字棋玩成一系列 if-then 语句:“如果我先走，然后在中间放一个 X”。“如果我的对手连续有两个 O(行、列或对 Angular 线中 O 的计数总和 = 2)，则在该行中放一个 X”等等等等

阐明您在玩游戏时自己使用的规则。