Ball

<!DOCTYPE html>
<html>
    <head>
        <title>Task 2</title>
        <style>
            body{
                overflow: hidden;
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <img id = "ball" src = "pics/ball.png" width = 100 height = 100>
            <img id = "field" src = "pics/field.jpg" width = 1366 height = 768/>
        <script type="text/javascript">
        var ball = document.getElementById("ball");
        ball.style.position = "absolute";
        ball.style.left = "30px";
        ball.style.top = "30px";
        //var h = 25;
        //var w = 25;
        var h = Math.floor((Math.random()*26)+20); // choose random numbers
        var w = Math.floor((Math.random()*26)+20); // choose random numbers
            setTimeout(ballMove, 50);
            function ballMove(){
                ball.style.left = parseInt(ball.style.left) + w + "px";
                ball.style.top = parseInt(ball.style.top) + h + "px";
                if(parseInt(ball.style.left) > window.innerWidth || parseInt(ball.style.left) < 0){
                    w *= -1;
                }
                if(parseInt(ball.style.top) > window.innerHeight || parseInt(ball.style.top) < 0){
                    h *= -1;
                }
                setTimeout(ballMove, 50);
            }
        </script>
    </body>
</html>