Actualmente estoy trabajando en un juego de mesa como el ajedrez.
Parece que no puedo hacer que los turnos alternativos funcionen.
const clickPiece = (e: React.MouseEvent) => { const element = e.target as HTMLElement; const shogiBoard = shogiBoardRef.current; let steps = 1; if (steps % 2 === 1) { setActivePlayer(Player.US); steps++; } else if (steps % 2 === 0) { setActivePlayer(Player.ENEMY); steps++; } if (element.classList.contains("shogiPiece") && shogiBoard && activePlayer) { const takeX = Math.floor((e.clientX - shogiBoard.offsetLeft) / CELL_SIZE); const takeY = Math.abs(Math.ceil((e.clientY - shogiBoard.offsetTop - BOARD_SIZE) / CELL_SIZE)); setTakePosition({ x: takeX, y: takeY, }); const x = e.clientX - CELL_SIZE / 2; const y = e.clientY - CELL_SIZE / 2; element.style.position = "absolute"; element.style.left = `${x}px`; element.style.top = `${y}px`; setActivePiece(element); } };activePlayer inicialmente Player.US que proviene de una enumeración:
export enum Player { ENEMY, US, }estado de uso del jugador activo:
const [activePlayer, setActivePlayer] = useState<Player>(Player.US);Para mí, alternar turnos parecía lo más fácil al agarrar una pieza, comprobar qué jugador está arriba y luego cambiar, lo intenté aumentando el número de pasos y comprobando el resto, pero no funciona.
Gracias de antemano por las sugerencias y la ayuda.
La causa raíz de que su código no funcione es cómo está usando el step .
El paso es parte del estado de su aplicación, por lo que debe ser un estado, no una simple variable. En realidad, está reiniciando el step = 1 en cada renderizado
Primero defina [step, setStep] usando useState :
const [step, setStep] = useState<number>(1); // instead of let steps = 1y luego actualice el paso de esta manera:
setStep(i => i+1) // instead of steps++¡Esto se debe a que si la condición es incorrecta!
Cambie su declaración if a esto:
if (steps % 2 === 0) { setActivePlayer(Player.ENEMY); steps++; } else { setActivePlayer(Player.US); steps++; }esto funcionará
Puede usar esta función para alternar el jugador activo: verifique cuál es el jugador actual y luego configure el otro:
import {useCallback, useState} from 'react'; enum Player { ENEMY, US } function Component () { const [activePlayer, setActivePlayer] = useState<Player>(Player.US); const setAlternatePlayer = useCallback( () => setActivePlayer(player => player === Player.US ? Player.ENEMY : Player.US), [], ); // Use function "setAlternatePlayer"... }