Estoy tratando de crear un juego de pelota que rebota fácilmente en una matriz 2d con ganchos React. Tengo un problema que resolver:
Cuando la pelota golpea el campo verde , debe cambiar el vector a aleatorio y cambiar su valor en la matriz de "Y" a "0" . Cambia de dirección, pero el espacio verde no desaparece del tablero. Todavía está de vuelta después de volver a renderizar.
Aquí hay un código completo: https://stackblitz.com/edit/react-cvlqsp?file=src/App.js
Descubrí que el cuadro verde desaparece, pero cada vez que la pelota se mueve, se vuelve a renderizar y parece que está permanentemente. No puedo evitar no renderizar todo cada vez, pero solo el movimiento de la pelota. ¿Debo usar esto en useEffect? ¿y cómo?
Aquí hay funciones para el vector aleatorio y el valor de los cambios de matriz que no funcionan:
let random = () => { if (Math.random() < 0.5) { setVectorX((vectorX *= -1)); } else { setVectorY((vectorY *= -1)); } }; let checkforYCollsion = () => { if (board[positionY][positionX] === 'Y') { random(); board[positionY][positionX] = '0' } };Debe actualizar el estado con la matriz 2d modificada llamando a setBoardToDisplay , no asignando el valor de board , ya que esto no activará una nueva representación. Puede hacer esto utilizando una función de devolución de llamada en setBoardToDisplay .
setBoardToDisplay((prev) => { // make desired changes to prev and return it })