'Continuous animation

I am trying to create a "madBiker" animation that continuously goes left and right during the game. However, the animation I declare doesn't seem to "loop continuously", even with this solution. I've tried using a while loop (although I wasn't sure of what condition to use). All the animation does is just go left and right and back to the initial position. Nothing else. I want it to go continuously (throughout the whole block of code).

    window.alert("Base speaking: The madbiker is trying to escape.");
    window.alert("That blasted lunatic always messes things up! Stop him at once!");
    var madBikerHealth = document.getElementById("madBikerHealth");
    var playerHealth = document.getElementById("Your health");
    setTimeout(() => {
        document.getElementById("chaseTheme").play();
    } , 1000);
    document.addEventListener("keydown", move);
    function move(e){
        if(e.keyCode == 39 || e.keyCode == 68){
            let target = document.getElementById("chopperGuy");
            let size = parseInt(target.style.left) + 20;
            target.style.left = size;
        }
        if(e.keyCode == 37 || e.keyCode == 65){
            let target = document.getElementById("chopperGuy");
            let size = parseInt(target.style.left) - 20;
            target.style.left = size;
        }
    }
    function madBikerMoving(){
    setInterval(()=> {
    let madBiker = document.getElementById("madBiker");
    madBiker.style.animation = "moving";
    madBiker.style.animationDuration = "3s";
    madBiker.style.animationFillMode = "forwards";
    }, 1000/60);
    }
    madBikerMoving();

In case you need the HTML for reference

    <html>
        <div>
            <p id = "objective">Use A to move left and D to move right (or the left and right arrow keys. Use space to shoot
                Stop the mad biker! Watch out! He has exhaust guns he can shoot at you! Dodge them!
            </h1>
            </div>
            <div>
                <p id = "madBakerHealth">MadBiker Health: 250</h1>
            </div>
            <div>
                <p id = "Your health">Your health: 250</h1>
            </div>
        <script defer src = "bossfight1.js"></script>
        <img src = "Background.gif" position = "fixed" id = "road" width= 90% length= 90%>
        <link href = "colors.css" rel = "stylesheet">
        <body width>
            <div id = "image1">
                <img src = "chopperGuyPOV.gif" id = "chopperGuy" style = "top: 700px;
                left: 500px;">
            </div>
            <div id = "image2">
                <img src = "madBikerFromBehind.gif" id = "madBiker">
            </div>
            <div id = "music">
                <audio id = "chaseTheme" src = "chasetheme.mp3" autoplay></audio>
            </div>
        </body>
    </html>

And the CSS for the animation I decided to use:


    #chopperGuy{
       width: 200px;
       height: 200px;
       position: absolute;
    }
    
    #madBiker{
       width: 70px;
       height: 70px;
       position: absolute;
       top: 600px;
       left: 550px;
    }
    
    @keyframes moving {
       33%{
          top: 600px;
          left: 450px;
       }
       66%{
          top: 600px;
          left: 650px;
       }
       100%{
          top: 600px;
          left: 550px;
       }
       

}
javascripthtmlcssanimation


Solution 1:[1]

Set madBiker.style.animationIterationCount="infinite" Should work just fine.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aravind Prabash

Related Questions