Блог

Главная - Вопросы по программированию - Я создаю приложение для реакции на крестики-нолики

Я создаю приложение для реакции на крестики-нолики

#reactjs

Вопрос:

Я делаю игру в крестики-нолики, используя react. Я застрял на части, чтобы убедиться, что пользователь может играть на квадрате только один раз. Моя программа в ее нынешнем виде позволяет пользователю дважды щелкнуть по div. Не знаю, почему это происходит.

 import "./styles.css";
import { useState } from "react";

export default function App() {
  const [player, setPlayer] = useState("X");
  const [gameOver, setGameOver] = useState(false);
  const [board, setBoard] = useState(new Array(9));
 
  const checkGameOver = () => { 
      const square_a = board[0];
      const square_b = board[1];
      const square_c = board[2];
      //vertical win check
      if(square_a === board[3] amp;amp;  square_a === board[6] amp;amp; square_a !== undefined) {return true;}
      if(square_b === board[4] amp;amp;  square_b === board[7] amp;amp; square_b !== undefined) {return true;}
      if(square_c === board[5] amp;amp;  square_c === board[8] amp;amp; square_c !== undefined) {return true;}
      //diagonal win check
      if(square_a === board[4] amp;amp;  square_a === board[8] amp;amp; square_a !== undefined) {return true;}
      if(square_c === board[4] amp;amp;  square_c === board[6] amp;amp; square_c !== undefined) {return true;}
      //horizontal win check
      if(board[0] === board[1] amp;amp; board[1] === board[2] amp;amp; board[0] !== undefined) {return true;}
      if(board[3] === board[4] amp;amp; board[4] === board[5] amp;amp; board[3] !== undefined) {return true;}
      if(board[6] === board[7] amp;amp; board[7] === board[8] amp;amp; board[6] !== undefined) {return true;}
      
      return false;
  }
  
  const handlePlayerChange = (e) => {
    if(checkGameOver() === true){setGameOver(true); }
    else if(board[e.target.id-1] !== undefined) {alert("Can't play on this square");}
    else { 
      if(player === "X") {setPlayer("O");}
      else {setPlayer("X");}
      e.target.innerHTML =  "<h1>"   player   "</h1>";
      let items = board;
      items[e.target.id-1] = player;
      setBoard(items);
    }
  }
  
  return (
    <>
    {!gameOver amp;amp; <div className="background-div">
     <div className = "board">
        <div className = "square-div" id = "1" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "2" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "3" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "4" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "5" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "6" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "7" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "8" onClick = {handlePlayerChange}> </div>
        <div className = "square-div" id = "9" onClick = {handlePlayerChange}> </div>
    </div>  
    </div>
  }
  {gameOver amp;amp; <h1>Game Over</h1>}
    </>
    
      
  );
}

Я делаю игру в крестики-нолики, используя react. Я застрял на части, чтобы убедиться, что пользователь может играть на квадрате только один раз. Моя программа в ее нынешнем виде позволяет пользователю дважды щелкнуть по div. Не знаю, почему это происходит.

Комментарии:

1. Официальный учебник по реагированию предназначен для игры в крестики-нолики ( reactjs.org/tutorial/tutorial.html ). Я бы предложил использовать его для справки.

2. Что console.log(e.target.id) дает результат? Установка id атрибута на число кажется неправильной, но, возможно, это нормально.

3. Это возвращает правильный идентификатор, соответствующий его месту в массиве.

4. Я заставил его работать, заполнив массив «» в начале, а затем проверив, есть ли место в этом массиве !== «» вместо неопределенного. Кажется, что неопределенность сама по себе приводит к ошибкам.

Ответ №1:

Я заставил его работать, заполнив массив "" в начале ( const [board, setBoard] = useState(new Array(9).fill("") вместо const [board, setBoard] = useState(new Array(9)) ), а затем проверив, есть ли место в этом массиве !== "" вместо !== undefined . Кажется undefined , что само по себе приводит к ошибкам.

Метки: