Alphavet

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script>
            function nextRandomInteger(limit) {
                return Math.round(Math.random()*limit);
            }
            var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            function randomAlphavet(){
                return alphavet.charAt(nextRandomInteger(alphavet.length-1));
            }
            function randomSpeed(maxSpeed){
                return Math.random()*maxSpeed - Math.random()*maxSpeed;
            }
        </script>
        <script>
            var canvasWidth = 700;
            var canvasHeight = 500;
            function MovingText(){
                this.x = nextRandomInteger(canvasWidth);
                this.y = nextRandomInteger(canvasHeight);
                this.vx = randomSpeed(10);
                this.vy = randomSpeed(10);

                this.body = document.createElement('h1');
                this.body.innerHTML = randomAlphavet();
                this.body.style.position = 'absolute';

                document.body.appendChild(this.body);
            }
            MovingText.prototype.move = function(){
                if(this.x <0 || this.x > canvasWidth){this.vx *= -1;}
                if(this.y <0 || this.y > canvasHeight){this.vy *= -1;}

                this.x += this.vx;
                this.y += this.vy;

                this.body.style.left = this.x + 'px';
                this.body.style.top = this.y + 'px';
            };
        </script>
        <script>
            window.onload = function(){
                var movingTexts = [];

                for(var i=0; i<100; i++) movingTexts.push(new MovingText());

                setInterval(function(){
                    for(var i in movingTexts) movingTexts[i].move();
                },1000/60);
            };
        </script>
    </head>
    <body>
    </body>
</html>