Animation by JS without errors in the console, however it does not work

Question

Animation by JS without errors in the console, however it does not work

Navigation

#1 by (2 votes)

0

Well, I'm creating an animation of the classic Metal Slug Tank, however, by creating the function and running it to animate the tank, nothing happens. What's wrong, and how can I fix it?

<body>
    <div id="tank-slug">
    </div>
</body>
</html>
<style type="text/css">
    #tank-slug{
        width:196px;
        height:196px;
        margin:0 auto;
        background: url(images/Sprite-Tank-novo.png);
        background-position: 0px -10px;
        position:relative;
        overflow:hidden;
        border:2px solid #000;
    }
    #tank-slug:before{
        content:url(images/Sprite-Background.png);
        width:196px;
        height:196px;
        bottom:0;
        position:absolute;
        z-index:-1;
    }
    #tank-slug:after{
        content:url(images/Sprite-Frontground.png);
        width:196px;
        height:196px;
        bottom:0;
        position:absolute;

    }
</style>
<script type="text/javascript">
    function iniciaAnima(){
        setInterval(function(){
            var tankBack = document.getElementById("tank-slug");
            var count = 0;
            var valor = 100/55;
            var backPositionX = 0;
            tankBack.style.backgroundPosition = backPositionX + "px -10px";
            if(count < 100){ return count = count + valor }
            backPositionX = backPositionX + 190;
            console.log(tankBack.style.backgroundPosition)
            console.log(count);
        },500);
    }iniciaAnima();
</script>

javascript

asked by anonymous 20.04.2017 / 16:47

1 answer

Using "if / elif / else" with return is good programming practice? [closed] Inserting data-id and data-url into extra DataTable field

score 2 · Accepted Answer

Try this:

function iniciaAnima(){
    var tankBack = document.getElementById("tank-slug");
    var count = 0;
    var valor = 100/55;
    var backPositionX = 0;
    setInterval(function(){
        tankBack.style.backgroundPosition = backPositionX + "px -10px";
        if(count < 100){ return count = count + valor }
        backPositionX = backPositionX + 190;
        console.log(tankBack.style.backgroundPosition)
        console.log(count);
    },500);
}