Help needed with code please

JavaScript
1

im trying to move 3 cars across the screen
i already got it to move

but my problem is to get it to restart from the position where it started when it reaches the end of the window
no matter what size window you got
can you assist me with that please


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>DRIVING CARS</title>

    <style type="text/css">
img {position:absolute;}
</style>

    <script type="text/javascript">
        var rgt = 50;
        var rgt2 = 50;
        var rgt3 = 50;
        

        function driveCar() {
            document.getElementById("car").style.top = "200px";
            document.getElementById("car").style.right = rgt + "px";
            

            document.getElementById("car2").style.top = "350px";
            document.getElementById("car2").style.right = rgt2 + "px";
           

            document.getElementById("car3").style.top = "550px";
            document.getElementById("car3").style.right = rgt3 + "px";




            rgt += 5;
            
            rgt2 += 10;
           

                rgt3 += 15;
            

            setTimeout("driveCar()", 100);  
        }
        
</script>

</head>




<body bgcolor="pink" onload="driveCar()">

<img id="car" src="images/a.gif" /> <br /> <br /> <br /> 

<img id="car2" src="images/b.gif" /> <br /> <br /> <br /> 

<img id="car3" src="images/c.gif" />

</body>
</html>
2

You can use window.innerWidth to get the browser window’s width in pixels so you can work out when the car has got to the window’s left border.

With this modification, only the first car restarts when it has got to the end but the same principle applies to all 3.

You might want to tweak the code to have a smoother transition on the restart.


        <script type="text/javascript">
            var rgt = 50;
            var rgt2 = 50;
            var rgt3 = 50;

            function driveCar() {
                document.getElementById("car").style.top = "200px";
                document.getElementById("car").style.right = rgt + "px";
                
                document.getElementById("car2").style.top = "350px";
                document.getElementById("car2").style.right = rgt2 + "px";

                document.getElementById("car3").style.top = "550px";
                document.getElementById("car3").style.right = rgt3 + "px";

                rgt += 5;

                [COLOR=#ff0000][B]if(rgt > window.innerWidth){
                    rgt = 50;
                }[/B][/COLOR]

                rgt2 += 10;

                rgt3 += 15;

                setTimeout("driveCar()", 100);
            }
        </script>