Puede verificar la aplicación desde esto; Salvadera
La lógica del movimiento de la serpiente es eliminar un cuadrado de su espalda y agregar una nueva cabeza básicamente. Esto crea una apariencia de movimiento. Pero mi intervalo no parece funcionar correctamente.
Funciona solo una vez y luego hace lo mismo una y otra vez. Lo que significa que el estado no cambia en absoluto después de una vez.
Vi esto en un video donde alguien estaba desarrollando este juego exactamente de esta manera pero estaba funcionando. No puedo ver lo que está mal con este código, gracias de antemano.
Vi tu pregunta. Fue realmente interesante. El problema es este.
useEffect(() => { setInterval(moveSnake, 1000); }, []); setInterval(moveSnake, 1000) . Esto está usando origen moveSnake . A medida que los componentes funcionales sobrescriben todo el estado y las funciones, moveSnake cambia. Creo que el puntero a la matriz cambia. Y como está usando el puntero de origen, setInterval no puede cambiar el estado. Creo que puedes actualizar de la siguiente manera.
useEffect(() => { setTimeOut(moveSnake, 1000); }, [snakeDots]);El truco "oculto" es que estás usando puntos de moveSnake snakeDots Por lo tanto, querrá esperar hasta que termine de actualizarse para activar una nueva llamada.
Puede utilizar useEffect y setTimeout para establecer un nuevo tiempo de espera cada vez que los puntos de serpiente se actualizan en el estado. Por ejemplo:
useEffect(() => { setTimeout(moveSnake, 1000); }, [snakeDots]);