时间戳

首页 > 解决方案 > 我正在制作井字游戏 React 应用程序

reactjs - 我正在制作井字游戏 React 应用程序

问题描述

我正在使用 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] &&  square_a === board[6] && square_a !== undefined) {return true;}
      if(square_b === board[4] &&  square_b === board[7] && square_b !== undefined) {return true;}
      if(square_c === board[5] &&  square_c === board[8] && square_c !== undefined) {return true;}
      //diagonal win check
      if(square_a === board[4] &&  square_a === board[8] && square_a !== undefined) {return true;}
      if(square_c === board[4] &&  square_c === board[6] && square_c !== undefined) {return true;}
      //horizontal win check
      if(board[0] === board[1] && board[1] === board[2] && board[0] !== undefined) {return true;}
      if(board[3] === board[4] && board[4] === board[5] && board[3] !== undefined) {return true;}
      if(board[6] === board[7] && board[7] === board[8] && 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 && <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 && <h1>Game Over</h1>}
    </>
    
      
  );
}

我正在使用 react 制作井字游戏。我坚持确保用户只能在广场上玩一次。我的程序，就目前而言，允许用户点击一个 div 两次。不知道为什么会这样。

标签： reactjs

解决方案

我通过""在开始时（const [board, setBoard] = useState(new Array(9).fill("")而不是const [board, setBoard] = useState(new Array(9))）填充数组来让它工作，然后检查该数组中的点是否!== ""而不是!== undefined。似乎undefined本身会产生错误。

推荐阅读