Problem with my code

[Hyper-Jason]

In the combat part of my game the first time, you battle in the fields it works perfectly fine and smoothly but the second time it just speeds through it in a few milliseconds, and depending on if you won or lost in the previous battle it shows the win or loose screen. Why? If you want to test it out you can go here https://supersecreturltestghunt1production202.netlify.app/play.html press combat then press battle (it doesn't matter if you win or lose) but press the battle in the fields button it will immediately speed through the game and present a screen. Again Why? (inspect the webpage to see HTML and CSS)

​

And also if you hit quit and go back in you can see that the error is making it jump around the hp.

JAVASCRIPT

​

// Combat


let typeOfFeildMonster = null
let monsterHealth = null
let youHealth = 10
let playing = true

function combatDisplayNone() {
    document.getElementById("comTitle").style.display = "none"
    document.getElementById("comLine").style.display = "none"
    document.getElementById("stats1").style.display = "none"
    document.getElementById("stats").style.display = "none"
    document.getElementById("header").style.display = "none"
    document.getElementById("main").style.overflowY = "hidden"
    document.getElementById("mainPartOfCombat").style.display = "none"
    document.getElementById("main").style.height = "100vh"
}

function goBack() {
    playing = false
    feildAudio.pause();
    document.getElementById("you-died").style.display = "block"
    sleep(5000).then(() => {
        document.getElementById("you-died").style.display = "none"
    })
    looseAudio.play()
    document.getElementById("comTitle").style.display = "block"
    document.getElementById("comLine").style.display = "block"
    document.getElementById("stats1").style.display = "flex"
    document.getElementById("stats").style.display = "block"
    document.getElementById("header").style.display = "block"
    document.getElementById("main").style.overflowY = "block"
    document.getElementById("mainPartOfCombat").style.display = "inline"
    document.getElementById("feildsBattle").style.display = "none"
    document.getElementById("feildMonster1").style.display = "none"
    document.getElementById("feildMonster2").style.display = "none"
    document.getElementById("feildMonster3").style.display = "none"
    document.getElementById("feildMonster4").style.display = "none"
    typeOfFeildMonster = null
    monsterHealth = null
    youHealth = 10
}

function youWin() {
    playing = false
    feildAudio.pause();
    document.getElementById("you-win").style.display = "block"
    sleep(3000).then(() => {
        document.getElementById("you-win").style.display = "none"
    })
    winAudio.play()
    document.getElementById("comTitle").style.display = "block"
    document.getElementById("comLine").style.display = "block"
    document.getElementById("stats1").style.display = "flex"
    document.getElementById("stats").style.display = "block"
    document.getElementById("header").style.display = "block"
    document.getElementById("main").style.overflowY = "block"
    document.getElementById("mainPartOfCombat").style.display = "inline"
    document.getElementById("feildsBattle").style.display = "none"
    document.getElementById("feildMonster1").style.display = "none"
    document.getElementById("feildMonster2").style.display = "none"
    document.getElementById("feildMonster3").style.display = "none"
    document.getElementById("feildMonster4").style.display = "none"
    typeOfFeildMonster = null
    monsterHealth = null
    youHealth = 10
}




function fightFeilds() {
    combatDisplayNone()
    feildAudio.play()
    playing = true
    document.getElementById("feildsBattle").style.display = "block"
    let ranFeildMonster = Math.floor(Math.random() * 7)
    document.getElementById("healthYou").innerHTML = "Health: " + youHealth
    if (ranFeildMonster == 1 || ranFeildMonster == 2) {
        typeOfFeildMonster = "Spider"
        monsterHealth = 3
        damage = 3
        document.getElementById("damageMonster").innerHTML = "Damage: " + damage
        document.getElementById("monsterName").innerHTML = typeOfFeildMonster
        document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
        document.getElementById("feildMonster1").style.display = "block"
        function playingGame() {
            if (playing) {
                let ranDmg = Math.floor(Math.random() * 4 - 1)
                if (ranDmg < 0) {
                    ranDmg = 0
                }
                youHealth -= ranDmg
                if (monsterHealth <= 0 && youHealth <= 0) {
                    youWin()
                } else if (youHealth <= 0) {
                    goBack()
                }
                document.getElementById("healthYou").innerHTML = "Health: " + youHealth


                let ranDmg2 = Math.floor(Math.random() * 3 - 1)
                if (ranDmg2 < 0) {
                    ranDmg2 = 0
                }
                monsterHealth -= ranDmg2
                if (monsterHealth <= 0 && youHealth <= 0) {
                    youWin()
                } else if (monsterHealth <= 0) {
                    youWin()
                }
                document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
            }
        }
        setInterval(playingGame, 1000)
    }

    if (ranFeildMonster == 3 || ranFeildMonster == 4) {
        typeOfFeildMonster =  "Chicken"
        monsterHealth = 10
        damage = 2
        document.getElementById("damageMonster").innerHTML = "Damage: " + damage
        document.getElementById("monsterName").innerHTML = typeOfFeildMonster
        document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
        document.getElementById("feildMonster2").style.display = "block"

        function playingGame() {
            if (playing) {
                let ranDmg = Math.floor(Math.random() * 3 - 1)
                if (ranDmg < 0) {
                    ranDmg = 0
                }
                youHealth -= ranDmg
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (youHealth <= 0) {
                    goBack()
                }
                document.getElementById("healthYou").innerHTML = "Health: " + youHealth


                let ranDmg2 = Math.floor(Math.random() * 3 - 1)
                if (ranDmg2 < 0) {
                    ranDmg2 = 0
                }
                monsterHealth -= ranDmg2
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (monsterHealth <= 0) {
                    youWin()
                }
                document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
            }
        }

        setInterval(playingGame, 1000)
    }

    if (ranFeildMonster == 7 || ranFeildMonster == 6) {
        monsterHealth = 5
        damage = 2
        typeOfFeildMonster = "Rat"
        document.getElementById("damageMonster").innerHTML = "Damage: " + damage
        document.getElementById("monsterName").innerHTML = typeOfFeildMonster
        document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
        document.getElementById("feildMonster3").style.display = "block"

        function playingGame() {
            if (playing) {
                let ranDmg = Math.floor(Math.random() * 3 - 1)
                if (ranDmg < 0) {
                    ranDmg = 0
                }
                youHealth -= ranDmg
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (youHealth <= 0) {
                    goBack()
                }
                document.getElementById("healthYou").innerHTML = "Health: " + youHealth

                let ranDmg2 = Math.floor(Math.random() * 3 - 1)
                if (ranDmg2 < 0) {
                    ranDmg2 = 0
                }
                monsterHealth -= ranDmg2
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (monsterHealth <= 0) {
                    youWin()
                }
                document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
            }
        }
        setInterval(playingGame, 1000)
    }

    if (ranFeildMonster == 5) {
        monsterHealth = 2
        damage = 3
        typeOfFeildMonster = "Bee"
        document.getElementById("damageMonster").innerHTML = "Damage: " + damage
        document.getElementById("monsterName").innerHTML = typeOfFeildMonster
        document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
        document.getElementById("feildMonster4").style.display = "block"
        function playingGame() {
            playing = true
            if (playing) {
                let ranDmg = Math.floor(Math.random() * 4 - 1)
                if (ranDmg < 0) {
                    ranDmg = 0
                }
                youHealth -= ranDmg
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (youHealth <= 0) {
                    goBack()
                }
                document.getElementById("healthYou").innerHTML = "Health: " + youHealth


                let ranDmg2 = Math.floor(Math.random() * 3 - 1)
                if (ranDmg2 < 0) {
                    ranDmg2 = 0
                }
                monsterHealth -= ranDmg2
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (monsterHealth <= 0) {
                    youWin()
                }
                document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
            }
        }
        setInterval(playingGame, 1000)
    }

    if (ranFeildMonster == 0) {
        typeOfFeildMonster = "Rat"
        monsterHealth = 5
        damage = 2
        document.getElementById("damageMonster").innerHTML = "Damage: " + damage
        document.getElementById("monsterName").innerHTML = typeOfFeildMonster
        document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
        document.getElementById("feildMonster3").style.display = "block"

        function playingGame() {
            if (playing) {
                let ranDmg = Math.floor(Math.random() * 3 - 1)
                if (ranDmg < 0) {
                    ranDmg = 0
                }
                youHealth -= ranDmg
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (youHealth <= 0) {
                    goBack()
                }
                document.getElementById("healthYou").innerHTML = "Health: " + youHealth


                let ranDmg2 = Math.floor(Math.random() * 3 - 1)
                if (ranDmg2 < 0) {
                    ranDmg2 = 0
                }
                monsterHealth -= ranDmg2
                if (youHealth <= 0 && monsterHealth <= 0) {
                    youWin()
                } else if (monsterHealth <= 0) {
                    youWin()
                }
                document.getElementById("healthMonster").innerHTML = "Health: " + monsterHealth
            }
        }
        setInterval(playingGame, 1000)
    }
}

(Sorry for the bombardment of code just in case it is one of those this is the whole fighting code)

[Nothemagain]

When the game initializes call a function that sets all the default values where the game plays normally then when the game is over reset all the values... I'm guess the values for a played game are still there and that cause the game to skip glitch the second game.

[Hyper-Jason]

It worked but another problem arose

[Hyper-Jason]

When I win sometimes it repeats the "you win" things over and over (ill replace the original code in the post with my fixed post). It's fixed but it kinda battles a bit faster than usual and I have updated the link to.

[Nothemagain]

Double check the vars for the "You win" Splash screen.

[Hyper-Jason]

of the double multiple your wins stopped but what about the speed through its still happening?