Estoy tratando de escribir un guión tipo hero quest.
En el que navegamos por una serie de eventos. O el jugador se mueve o se enfrenta a un enemigo y comienza una pelea.
Así que escribí mi guión. La búsqueda y leer bien de principio a fin.
Entonces, me dije a mí mismo, que antes de ir más lejos iba a hacer una prueba en la que en la primera pelea los puentes de vida del héroe caen a cero para probar la situación del fin del juego.
Así que en la función fightHandle bajo los puntos de vida de mi héroe a cero.
Pero en mi bucle, esto no se tiene en cuenta y los puntos de vida del héroe permanecen constantemente en 10 puntos mientras que durante la misión pasa X a través de la fase de combate.
Hice muchas pruebas, pero no veo donde esta mi error algo se me escapa...
import React, { useEffect, useState } from "react"; import { character } from "./assets/character/character"; export default function Quest({ quest }) { const [player, setPlayer] = useState(character.player); const startQuest = (quest) => { const nbAction = quest.action.length; let i = 1; const timer = setInterval(() => { let action = quest.action[i]; console.log("Life point", player.life); if (player.life > 0) { if (i === nbAction) { clearInterval(timer); endQuest(); } else { if (action === "move") { console.log("player movement"); } else { eventHandler(action); } } } else { console.log("GAME OVER"); clearInterval(timer); } i++; }, 500); }; const eventHandler = (action) => { console.log(`Interaction with the element: ${action}`); const eventType = character[action].type; if (eventType === "statiqueMonster" || eventType === "monster") { const eventResolution = fightHandle(player, action); if (eventResolution === false) { console.log("GAME OVER"); } } }; const fightHandle = (player, action) => { console.log("!!!!!!!---FIGHT---!!!!!!!"); setPlayer((s) => ({ ...s, life: 0 })); if (player.life === 0) { return false; } }; const endQuest = () => { console.log(player); console.log("fin de la quête", quest.name); }; useEffect(() => { startQuest(quest); }, []); return ( <div> <h1>Quest</h1> </div> ); }Use useRef en su lugar:
import React, { useEffect, useState } from "react"; import { character } from "./assets/character/character"; export default function Quest({ quest }) { //const [player, setPlayer] = useState(character.player); const playerRef = useRef(character.player); const startQuest = (quest) => { const nbAction = quest.action.length; let i = 1; const timer = setInterval(() => { let action = quest.action[i]; console.log("Life point", player.life); if (playerRef.current.life > 0) { if (i === nbAction) { clearInterval(timer); endQuest(); } else { if (action === "move") { console.log("player movement"); } else { eventHandler(action); } } } else { console.log("GAME OVER"); clearInterval(timer); } i++; }, 500); }; const eventHandler = (action) => { console.log(`Interaction with the element: ${action}`); const eventType = character[action].type; if (eventType === "statiqueMonster" || eventType === "monster") { const eventResolution = fightHandle(player, action); if (eventResolution === false) { console.log("GAME OVER"); } } }; const fightHandle = (player, action) => { console.log("!!!!!!!---FIGHT---!!!!!!!"); //setPlayer((s) => ({ ...s, life: 0 })); playerRef.current = {...playerRef.current, life: 0}; if (player.life === 0) { return false; } }; const endQuest = () => { console.log(player); console.log("fin de la quête", quest.name); }; useEffect(() => { startQuest(quest); }, []); return ( <div> <h1>Quest</h1> </div> ); }