Крестики нолики на JavaScript

203

02 марта 2019, 16:50

Есть такой код игры крестики нолики, но здесь каждый выбор клетки делаю я сам, а каким образом можно сделать, чтобы против меня компьютер играл? Т.е один ход делаю я, один компьютер. Вот код:

var pos = [ 
  [ 
    [0, 0], 
    [0, 1], 
    [0, 2] 
  ], //1 строка 
  [ 
    [1, 0], 
    [1, 1], 
    [1, 2] 
  ], //2 строка 
  [ 
    [2, 0], 
    [2, 1], 
    [2, 2] 
  ], //3 строка 
 
  [ 
    [0, 0], 
    [1, 0], 
    [2, 0] 
  ], //1 столбец 
  [ 
    [0, 1], 
    [1, 1], 
    [2, 1] 
  ], //2 столбец 
  [ 
    [0, 2], 
    [1, 2], 
    [2, 2] 
  ], //3 столбец 
]; 
 
function check() { 
  var table = document.getElementById("myTable"); 
  var flag; 
 
  for (var i = 0; i < pos.length; i++) { 
    var win = true; 
    for (var k = 0; k < pos[i].length; k++) { 
      if (table.rows[pos[i][k][0]].cells[pos[i][k][1]].innerHTML !== 'X' && table.rows[pos[i][k][0]].cells[pos[i][k][1]].innerHTML !== 'O') 
        win = false; 
    } 
 
    if (win) { 
      flag = true; 
      break; 
    } 
  } 
 
  if (flag) { 
    alert("победа"); 
  } 
} 
 
var tds = document.getElementsByTagName('td'); 
for (var i = 0; i < tds.length; i++) { 
  tds[i].addEventListener('click', function() { 
    if (this.innerHTML !== 'X') { 
      this.innerHTML = 'X'; 
    } else { 
      this.innerHTML = ''; 
    } 
    check(); 
  }) 
} 
for (var i = 0; i < tds.length; i++) { 
  tds[i].addEventListener('click', function() { 
    if (this.innerHTML !== 'O') { 
      this.innerHTML = 'O'; 
    } else { 
      this.innerHTML = ''; 
    } 
    check(); 
  }) 
}

td { 
  width: 30px; 
  height: 30px; 
  border: 1px solid black; 
  cursor: pointer; 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id="myTable"> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
</table>

Answer 1

Для решения, нужно добавить функцию, которая бы эмулировала ход компьютера, например stepComp и вызывать ее после проверки хода игрока:

tds[i].addEventListener('click', function() {
  if (this.innerHTML == '') {
    this.innerHTML = 'X';
    check();
    stepComp(tds);
  }
})

В данном примере функция принимает список ячеек, чтобы сделать ход.

Сама функция может выглядеть следующим образом:

function stepComp(tds) {
  for (var i = 0; i < tds.length; i++) {
    if (tds[i].innerHTML == '') {
      tds[i].innerHTML = 'O';
      check();
      break;
    }
  }
}

То есть, ищет первую свободную ячейку, ставит в нее 'O' и запускает проверку. Алгоритм выбора ячейки может меняться, но суть остается та же.

Пример в сборе: (не корректно работает метод проверки, так как проверяет просто отсутствие пустых ячеек, а не наличие конкретных символов)

var pos = [ 
  [ 
    [0, 0], 
    [0, 1], 
    [0, 2] 
  ], //1 строка 
  [ 
    [1, 0], 
    [1, 1], 
    [1, 2] 
  ], //2 строка 
  [ 
    [2, 0], 
    [2, 1], 
    [2, 2] 
  ], //3 строка 
 
  [ 
    [0, 0], 
    [1, 0], 
    [2, 0] 
  ], //1 столбец 
  [ 
    [0, 1], 
    [1, 1], 
    [2, 1] 
  ], //2 столбец 
  [ 
    [0, 2], 
    [1, 2], 
    [2, 2] 
  ], //3 столбец 
]; 
 
function check() { 
  var table = document.getElementById("myTable"); 
  var flag; 
 
  for (var i = 0; i < pos.length; i++) { 
    var win = true; 
    for (var k = 0; k < pos[i].length; k++) { 
      if (table.rows[pos[i][k][0]].cells[pos[i][k][1]].innerHTML !== 'X' && table.rows[pos[i][k][0]].cells[pos[i][k][1]].innerHTML !== 'O') 
        win = false; 
    } 
 
    if (win) { 
      flag = true; 
      break; 
    } 
  } 
 
  if (flag) { 
    console.log("победа"); 
  } 
} 
 
var tds = document.getElementsByTagName('td'); 
for (var i = 0; i < tds.length; i++) { 
  tds[i].addEventListener('click', function() { 
    if (this.innerHTML == '') { 
      this.innerHTML = 'X'; 
      check(); 
      stepComp(tds); 
    } 
  }) 
} 
 
function stepComp(tds) { 
  for (var i = 0; i < tds.length; i++) { 
    if (tds[i].innerHTML == '') { 
      tds[i].innerHTML = 'O'; 
      check(); 
      break; 
    } 
  } 
}

td { 
  width: 30px; 
  height: 30px; 
  border: 1px solid black; 
  cursor: pointer; 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id="myTable"> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
</table>