Question

我正在尝试使用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->玩家 O->计算机

我无法确定代码中用于计算机的算法（Min-max算法是其中之一）的实现。

Answer 1

首先以循环方式遍历列，然后以行和对角线遍历这三种情况，您必须检查连续的用户输入，如果在上述任何情况下都找到前两个连续的用户输入，则程序将其值放在第三位一个作为支持者

井字游戏中的单人游戏模式

1 个答案: