I have nearly finished my project. I will include a codepen link at the end of the post for debugging purposes.
What Should Happen?
The img element has an id property of dragon, and the image specified in the src attribute should be pre-loaded as the default image when the page loads. When the decision1() function is called, it should change the image to a different one. Similarly, calling the dragonBattle() function should switch the image to a gif file. If the player attacks or triggers the hitDragon() function, a specific animation should play before reverting back to the original image. Once the battle ends, the image should return to its default state.
PLEASE NOTE: All these events are triggered by user input using the prompt("") function. The prompt dialog box remains open throughout, causing the events to occur.
Current Behavior
While everything described in "What Should Happen" does occur in the background, the animated gifs do not play during the execution of the prompt(). The images do change accordingly, but the animations appear paused. Only after exiting the prompt dialog box, do they resume playback.
Identified Issue
The problem lies in the inability of gif images to animate while the prompt dialog box is active.
Seeking Solutions
How can I ensure that a gif image continues to play its animation loop even with a prompt dialog box open?
Key Points to Remember
- I have previously achieved this functionality successfully, with the animations playing even during the presence of the dialog box. Unfortunately, I seem to have misplaced the code responsible for this due to ongoing debugging activities.
- My testing was limited to Chrome, so I am unsure if the issue is browser-specific or related to my implementation.
- I strive to maintain organization in my coding practices.
Code Snippet
NOTE: Due to limitations on functionality, I am unable to provide a direct code snippet here. As prompts do not execute within code snippets, proper testing cannot be conducted. Apologies for any inconvenience. Please refer to the CodePen link below for access to the complete project.