JavaScript - Gravity setInterval() - Platform Collision

Question

I programmed an img element to "fall" down the window with parseInt(its.style.top) triggered by a setInterval(fall,1000) function in the body.

An error occurs after the Moves() function is triggered, and the fall() function stops being called. Is there an if-statement for Moves() function to call the setInterval(fall,1000) again after the img s.style.left >= r.style.width??

Thanks! :-)

<html>
<body onload="setInterval(fall,1000)" onkeydown="Moves()">

<img id="square" style="position:absolute; left:10px; top:0px;    
width:50px; height:50px; background-color:red;" />

<img id="rectangle" style="position:absolute; left:10px; top:130px; 
width:150px; height:10px; background-color:blue;" />

<script>

function fall(){
var s = document.getElementById("square");
s.style.top = parseInt(s.style.top) + 25 + 'px';


var r = document.getElementById("rectangle");
r.style.top=130 + 'px';

if(s.style.top>=r.style.top){s.style.top=r.style.top;}
}

function Moves(){
var s = document.getElementById("square");
if (event.keyCode==39) { 
s.style.left = parseInt(s.style.left)+10+'px';}

var r = document.getElementById("rectangle");
r.style.width=150 + 'px';

if(s.style.left>=r.style.width){setInterval(fall,1000);}
}

</script>

</body> </html>

So function fall works, if you don't try to Move? Usually, you use something like Element.getBoundingClientRect() to get top and left properties, as style properties are unable to be retrieved on many a Browser. — StackSlave

Chupo_cro Chupo_cro · Accepted Answer · 2016-10-29T01:25:10

I believe this is what you were trying to do:

<html>
<body onload="setTimeout(fall,1000)" onkeydown="Moves()">

    <img id="square" style="position:absolute; left:10px; top:0px;    
    width:50px; height:50px; background-color:red;" />

    <img id="rectangle" style="position:absolute; left:10px; top:130px; 
    width:150px; height:10px; background-color:blue;" />

    <script>
        var over_edge = false;
        var can_fall = true;

        function fall(){
            var s = document.getElementById("square");
            s.style.top = parseInt(s.style.top) + 25 + 'px';


            var r = document.getElementById("rectangle");
            //r.style.top=130 + 'px';

            if(!over_edge) {
                if(parseInt(s.style.top) >= parseInt(r.style.top) - parseInt(s.style.height)) {
                    s.style.top = parseInt(r.style.top) - parseInt(s.style.height);
                    can_fall = false;
                }
            }
            if(can_fall || over_edge)
                setTimeout(fall, 1000);
        }

        function Moves(){
            var s = document.getElementById("square");
            if (event.keyCode==39) { 
                s.style.left = parseInt(s.style.left)+10+'px';}

                var r = document.getElementById("rectangle");
                //r.style.width=150 + 'px';

                if(parseInt(s.style.left) >= parseInt(r.style.left) + parseInt(r.style.width)) {
                    if(!over_edge) {
                        over_edge = true;
                        fall();             // trigger falling over the edge but only once
                    }
                }
            }

    </script>
</body>
</html>

JavaScript - Gravity setInterval() - Platform Collision

1 Answers