运行我的 tic tac toe JavaScript 游戏时，X 和 O 没有出现。我该如何解决？

问题描述 投票：0回答：2

我一直在关注 tic tac toe 项目的几个在线教程，但在我尝试的这两次中，我都遇到了相同的错误，其中 X 和 O 没有显示，但其他功能显示。下面是我的 HTML、CSS 和 JavaScript 代码。如果不是最好的，我很抱歉，我是初学者。

const playerTurn = document.querySelector('.turn');

let gameActive = true;
let currentPlayer = "X";
let gameArray = ["", "", "", "", "", "", "", "", ""];

const winMessage = () => `Player ${currentPlayer} wins!`;
const drawMessage = () => `It's a Draw!`;
const currentPlayerTurn = () => `Player ${currentPlayer}'s Turn`;

playerTurn.innerHTML = currentPlayerTurn();

function handleCellPlayed() {
  gameArray[clickedCellIndex] = currentPlayer;
  clickedCell.innerHTML = currentPlayer;
}

function handlePlayerChange() {
  currentPlayer = currentPlayer === "X" ? "O" : "X";
  gameArray.innerHTML = currentPlayerTurn();
}
const winningConditions = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

function handleResultValidation() {
  let roundWon = false;
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];
    let a = gameArray[winCondition[0]];
    let b = gameArray[winCondition[1]];
    let c = gameArray[winCondition[2]];
    if (a === '' || b === '' || c === '') {
      continue;
    }
    if (a === b && b === c) {
      roundWon = true;
      break
    }
  }
  if (roundWon) {
    playerTurn.innerHTML = winMessage();
    gameActive = false;
    return;
  }
  let roundDraw = !gameArray.includes("");
  if (roundDraw) {
    playerTurn.innerHTML = drawMessage();
    gameActive = false;
    return;
  }
  handlePlayerChange();
}

function handleCellClick() {
  const clickedCell = clickedCellEvent.target;
  const clickedCellIndex = parseInt(
    clickedCell.getAttribute('data-cell-index')
  );
  if (gameArray[clickedCellIndex] !== "" || !gameActive) {
    return;
  }
  handleCellPlayed(clickedCell, clickedCellIndex);
  handleResultValidation();
}

function handleRestartGame() {
  gameActive = true;
  currentPlayer = "X";
  gameArray = ["", "", "", "", "", "", "", "", ""];
  playerTurn.innerHTML = currentPlayerTurn();
  document.querySelectorAll('.cell')
    .forEach(cell => cell.innerHTML = "");
}

document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick));
document.querySelector('.restart').addEventListener('click', handleRestartGame);
body {
  font-family: "Courier", sans-serif;
  text-align: center;
}

.game {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 304px;
  margin: 50px auto;
}

.cell {
  font-family: "Permanent Marker", cursive;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 1px #333333;
  border: 1px solid #333333;
  cursor: pointer;
  line-height: 100px;
  font-size: 60px;
}
<h1 class="title">Tic Tac Toe</h1>
<div class="game">
  <div data-cell-index="0" class="cell"></div>
  <div data-cell-index="1" class="cell"></div>
  <div data-cell-index="2" class="cell"></div>
  <div data-cell-index="3" class="cell"></div>
  <div data-cell-index="4" class="cell"></div>
  <div data-cell-index="5" class="cell"></div>
  <div data-cell-index="6" class="cell"></div>
  <div data-cell-index="7" class="cell"></div>
  <div data-cell-index="8" class="cell"></div>
</div>
<h2 class="turn"></h2>
<button class="restart">Restart</button>

在对我的 JavaScript 代码进行了一些更改后，我设法让重启按钮显示出来。

javascript html css tic-tac-toe
2个回答
0
投票

您的函数 

handleCellPlayed
不接受任何参数，因此它不会得到您尝试传递给它的 
clickedCell
或 
clickedCellIndex
。

试试改成

function handleCellPlayed(clickedCell, clickedCellIndex) {
0
投票

handCellClick 函数的参数 clickedCellEvent 用于修复 clickedCellIndex 未正确设置的错误，我所做的所有更改： 我对代码进行了以下更改：

创建一个常量 游戏细胞 存储所有游戏单元格。
创建了一个常量 重启按钮 存储重启按钮。
移动了 点击单元格索引 里面的变量声明 handleCellClick 功能。
改变了 gameArray.innerHTML 到 playerTurn.innerHTML 在里面 处理PlayerChange 功能。
添加了一个参数 点击单元格事件 到 handleCellClick 修复错误的函数 点击单元格索引 设置不正确。
改变了 document.querySelectorAll('.cell') 到 gameCells.forEach() 简化代码。
改变了 document.querySelector('.restart') 到 重启按钮 简化代码。
添加注释以解释每个函数和变量的用途。 删除了不必要的分号。

这是javascript：

    const playerTurn = document.querySelector('.turn');
    const gameCells = document.querySelectorAll('.cell');
    const restartButton = document.querySelector('.restart');

    let gameActive = true;
    let currentPlayer = "X";
    let gameArray = ["", "", "", "", "", "", "", "", ""];

    const winMessage = () => `Player ${currentPlayer} wins!`;
    const drawMessage = () => `It's a Draw!`;
    const currentPlayerTurn = () => `Player ${currentPlayer}'s Turn`;

    playerTurn.innerHTML = currentPlayerTurn();

    function handleCellPlayed(clickedCell, clickedCellIndex) {
    gameArray[clickedCellIndex] = currentPlayer;
    clickedCell.innerHTML = currentPlayer;
    }

    function handlePlayerChange() {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    playerTurn.innerHTML = currentPlayerTurn();
    }

    const winningConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
    ];

    function handleResultValidation() {
    let roundWon = false;
    for (let i = 0; i <= 7; i++) {
        const winCondition = winningConditions[i];
        let a = gameArray[winCondition[0]];
        let b = gameArray[winCondition[1]];
        let c = gameArray[winCondition[2]];
        if (a === '' || b === '' || c === '') {
        continue;
        }
        if (a === b && b === c) {
        roundWon = true;
        break
        }
    }
    if (roundWon) {
        playerTurn.innerHTML = winMessage();
        gameActive = false;
        return;
    }
    let roundDraw = !gameArray.includes("");
    if (roundDraw) {
        playerTurn.innerHTML = drawMessage();
        gameActive = false;
        return;
    }
    handlePlayerChange();
    }

    function handleCellClick(clickedCellEvent) {
    const clickedCell = clickedCellEvent.target;
    const clickedCellIndex = parseInt(
        clickedCell.getAttribute('data-cell-index')
    );
    if (gameArray[clickedCellIndex] !== "" || !gameActive) {
        return;
    }
    handleCellPlayed(clickedCell, clickedCellIndex);
    handleResultValidation();
    }

    function handleRestartGame() {
    gameActive = true;
    currentPlayer = "X";
    gameArray = ["", "", "", "", "", "", "", "", ""];
    playerTurn.innerHTML = currentPlayerTurn();
    gameCells.forEach(cell => cell.innerHTML = "");
    }

    gameCells.forEach(cell => cell.addEventListener('click', handleCellClick));
    restartButton.addEventListener('click', handleRestartGame);

这是您的 HTML： 这是你的 html:

最后，这是您的 CSS：

        body {
        font-family: "Courier", sans-serif;
        text-align: center;
    }
    
    .game {
        display: grid;
        grid-template-columns: repeat(3, auto);
        width: 304px;
        margin: 50px auto;
    }
    
    .cell {
        font-family: "Permanent Marker", cursive;
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 1px #333333;
        border: 1px solid #333333;
        cursor: pointer;
        line-height: 100px;
        font-size: 60px;
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.