在Tic-Tac-Toe游戏JavaScript上找到胜利者

时间:2018-02-14 09:37:37

标签: javascript html algorithm tic-tac-toe

我是JavaScript的新手,我正在用JavaScript和ruby构建一个Tic Tac Toe游戏。 目前我已经获得了如下代码,但我无法告诉胜利者的工作。想知道是否有人可以帮助我?提前谢谢!

const initialBoard = document.getElementById('navbar-new');
initialBoard.addEventListener("click", (e) => {
  e.preventDefault();
  alert('Game starts!');
  grid_0.innerText = '';
  grid_1.innerText = '';
  grid_2.innerText = '';
  grid_3.innerText = '';
  grid_4.innerText = '';
  grid_5.innerText = '';
  grid_6.innerText = '';
  grid_7.innerText = '';
  grid_8.innerText = '';
});

const grid_0 = document.getElementById('grid-0');
const grid_1 = document.getElementById('grid-1');
const grid_2 = document.getElementById('grid-2');
const grid_3 = document.getElementById('grid-3');
const grid_4 = document.getElementById('grid-4');
const grid_5 = document.getElementById('grid-5');
const grid_6 = document.getElementById('grid-6');
const grid_7 = document.getElementById('grid-7');
const grid_8 = document.getElementById('grid-8');

let currentPlayer = "X";

function ticTac(){
  if (this.innerText !== "X" || this.innerText !== "O") {
    this.innerText = currentPlayer;
    currentPlayer = currentPlayer == "X" ? "O" : "X";
  }
};

document.getElementById("grid-0").onclick = ticTac;
document.getElementById("grid-1").onclick = ticTac;
document.getElementById("grid-2").onclick = ticTac;
document.getElementById("grid-3").onclick = ticTac;
document.getElementById("grid-4").onclick = ticTac;
document.getElementById("grid-5").onclick = ticTac;
document.getElementById("grid-6").onclick = ticTac;
document.getElementById("grid-7").onclick = ticTac;
document.getElementById("grid-8").onclick = ticTac;

1 个答案:

答案 0 :(得分:1)

const allThree = (firstBox, secondBox, thirdBox) => {
      let firstBoxOwner = firstBox.innerText;
      let secondBoxOwner = secondBox.innerText;
      let thirdBoxOwner = thirdBox.innerText;

      if ((firstBoxOwner === secondBoxOwner) && (secondBoxOwner === thirdBoxOwner)){
        if (firstBoxOwner === "X"){
          alert('X wins!');
        } else if (firstBoxOwner === "O"){
          alert('O wins!');
        }
      }
      return null;
    };

    const diagonalWinner = () => {
      let leftDownDiag = allThree(grid_0, grid_4, grid_8);
      let rightUpDiag = allThree(grid_2, grid_4, grid_6);

      return leftDownDiag || rightUpDiag;
    };

    const columnWinner = () => {
      let leftCol = allThree(grid_0, grid_3, grid_6);
      let middleCol = allThree(grid_1, grid_4, grid_7);
      let rightCol = allThree(grid_2, grid_5, grid_8);

      return leftCol || (middleCol || rightCol);
    };

    const rowWinner = () => {
      let topRow = allThree(grid_0, grid_1, grid_2);
      let middleRow = allThree(grid_3, grid_4, grid_5);
      let bottomRow = allThree(grid_6, grid_7, grid_8);

      return topRow || (middleRow || bottomRow);
    };

    const getWinner = () => {
      return diagonalWinner() || (rowWinner() || columnWinner());
    };

    const winner = getWinner();
    if (winner) {
      alert("Player " + winner + " won!");
    };

现在这是我的其余代码(使用原始问题发布时间太长)