Режим одиночной игры в крестики-нолики - PullRequest
Новая
       18

Режим одиночной игры в крестики-нолики

0 голосов
/ 12 сентября 2018

Я пытаюсь создать однопользовательскую игру в крестики-нолики с использованием JavaScript.Ниже приведен код для JavaScript, CSS и HTML соответственно: 

const grid = [];
const GRID_LENGTH = 3;
let turn = 'X';

function initializeGrid() {
  for (let colIdx = 0; colIdx < GRID_LENGTH; colIdx++) {
    const tempArray = [];
    for (let rowidx = 0; rowidx < GRID_LENGTH; rowidx++) {
      tempArray.push(0);
    }
    grid.push(tempArray);
  }
}

function getRowBoxes(colIdx) {
  let rowDivs = '';

  for (let rowIdx = 0; rowIdx < GRID_LENGTH; rowIdx++) {
    let additionalClass = 'darkBackground';
    let content = '';
    const sum = colIdx + rowIdx;
    if (sum % 2 === 0) {
      additionalClass = 'lightBackground'
    }
    const gridValue = grid[colIdx][rowIdx];
    if (gridValue === 1) {
      content = '<span class="cross">X</span>';
    } else if (gridValue === 2) {
      content = '<span class="cross">O</span>';
    }
    rowDivs = rowDivs + '<div colIdx="' + colIdx + '" rowIdx="' + rowIdx + '" class="box ' +
      additionalClass + '">' + content + '</div>';
  }
  return rowDivs;
}

function getColumns() {
  let columnDivs = '';
  for (let colIdx = 0; colIdx < GRID_LENGTH; colIdx++) {
    let coldiv = getRowBoxes(colIdx);
    coldiv = '<div class="rowStyle">' + coldiv + '</div>';
    columnDivs = columnDivs + coldiv;
  }
  return columnDivs;
}

function renderMainGrid() {
  const parent = document.getElementById("grid");
  const columnDivs = getColumns();
  parent.innerHTML = '<div class="columnsStyle">' + columnDivs + '</div>';
}

function onBoxClick() {
  var rowIdx = this.getAttribute("rowIdx");
  var colIdx = this.getAttribute("colIdx");
  let newValue = 1;
  grid[colIdx][rowIdx] = newValue;
  renderMainGrid();
  addClickHandlers();
}

function addClickHandlers() {
  var boxes = document.getElementsByClassName("box");
  for (var idx = 0; idx < boxes.length; idx++) {
    boxes[idx].addEventListener('click', onBoxClick, false);
  }
}

initializeGrid();
renderMainGrid();
addClickHandlers();
.parentTop {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gridTop {
  border-color: "#f44336";
  border: '1px solid red';
  display: flex;
  flex-direction: column;
}

.lightBackground {
  background-color: 00FFFF
}

.columnsStyle {
  display: flex;
  flex-direction: column;
}

.rowStyle {
  display: flex;
}

.darkBackground {
  background-color: F0FFFF
}

.box {
  width: 100;
  height: 100;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 100px;
}

.cross {
  color: #f90;
  font-size: 2.5em;
  border-radius: 5px;
  line-height: 100px;
}
<div class="header">
  <h1> Tic Tac Toe</h1>
</div>

<div class="parentTop">
  <div class="gridTop">
    <div id="grid">

    </div>
  </div>
</div>

<script type="text/javascript" src="./index.js"></script>
<link rel="stylesheet" href="./index.css">

Здесь поле представляет один заполнитель для X или 0. У нас есть двумерный массив для представления расположения X или O как сетки 

  0 -> empty box
  1 -> box with X
  2 -> box with O

Пользователь играет с компьютером, поэтому каждый альтернативный ход должен выполняться компьютером X -> player O -> Computer

Я не могу обернуться вокруг реализации алгоритма, используемого длякомпьютер (алгоритм Min-max один) в коде.

1 Ответ

0 голосов
/ 12 октября 2018

Пройдите в цикле сначала как столбец, а затем по строке, а затем по диагонали. Это три случая, когда вам нужно проверять последовательные пользовательские входы, если первые два последовательных пользовательских ввода найдены в любом из указанных выше случаев, тогда ваша программа поместила их значение в третье. один в качестве дополнения

...