Pixi.js. Bat's sprite animation

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Bats</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.0/pixi.min.js"></script>
    <script src="Scene.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <!-- <input id="btnHello" type="button" value="Hello"> -->
</body>

</html>


/* jshint node: true */
/* global window: false, Scene: false */

"use strict";

function main() {
    Scene.initialize();
}
window.onload = main;

html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }


/* jshint node: true */
/* global window: false, document: false, PIXI: false,
   requestAnimationFrame: false, alert: false */

"use strict";

var Scene = (function() {
    var Container = PIXI.Container,
        autoDetectRenderer = PIXI.autoDetectRenderer,
        loader = PIXI.loader,
        TextureCache = PIXI.utils.TextureCache,
        Texture = PIXI.Texture,
        Rectangle = PIXI.Rectangle,
        MovieClip = PIXI.extras.MovieClip;

    var size = [1920, 1080];
    var ratio = size[0] / size[1];
    var stage = null;
    var renderer = null;
    var isFinishAnimation = false;

    //Set the initial game state
    var state = play;

    // Bat width and bat height
    var batWidth = 160;
    var batHeight = 187;
    var halfBatWidth = batWidth / 2;
    var halfBatHeight = batHeight / 2;

    //Define any variables that are used in more than one function
    var bats = [];

    function initialize() {

        // var btnHello = document.getElementById("btnHello");
        // btnHello.onclick = function() {
        //     alert("Hello");
        // };

        //Create a Pixi stage and renderer
        stage = new Container();

        renderer = autoDetectRenderer(size[0], size[1], {
            antialias: true
        });

        renderer.view.style.position = "fixed";
        renderer.view.style.top = 0;
        renderer.view.style.left = 0;
        renderer.view.style.zIndex = -1;
        renderer.backgroundColor = "0xffffff";
        document.body.appendChild(renderer.view);

        //setTimeout(finishAnimation, 5000);

        // Size the renderer to fill the screen
        resize();

        // Listen for and adapt to changes to the screen size, e.g.,
        // user changing the window or rotating their device
        window.addEventListener("resize", resize);

        //load resources (images and fonts)
        loader.add("assets/bat.png").load(setup);
    }

    function setup() {
        //Get a reference to the base texture
        var base = TextureCache["assets/bat.png"];

        //The first texture
        var texture0 = new Texture(base);
        texture0.frame = new Rectangle(0, 0, batWidth, batHeight);

        //The second texture
        var texture1 = new Texture(base);
        texture1.frame = new Rectangle(160, 0, batWidth, batHeight);

        //The third texture
        var texture2 = new Texture(base);
        texture2.frame = new Rectangle(320, 0, batWidth, batHeight);

        //Make an array of textures
        var textures = [texture0, texture1, texture2];

        //Create the `MovieClip` sprite using the `textures` array
        for (var i = 0; i < 10; i++) {
            // Create a new bat
            var bat = new MovieClip(textures);

            // Set an anchor
            bat.anchor.x = 0.5;
            bat.anchor.y = 0.5;

            //Set the sprite's position
            var x = getRandomInt(0 + halfBatWidth, size[0] - halfBatWidth);
            var y = getRandomInt(0 + halfBatHeight, size[1] - halfBatHeight);
            bat.position.set(x, y);

            bat.play(); // Start the animation
            bat.animationSpeed = 0.15; // Set the animation speed

            // Set the random velocity
            bat.vx = getRandomInt(-3, 3);
            bat.vy = getRandomInt(-3, 3);

            correctAnimDirection(bat);

            // Add the bat to the array
            bats.push(bat);

            // Add the sprite to the stage
            stage.addChild(bat);
        }

        //Start the game loop
        gameLoop();
    }

    /**
     * Returns a random integer between min (inclusive) and max (inclusive)
     * Using Math.round() will give you a non-uniform distribution!
     */
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function gameLoop() {
        if (isFinishAnimation) {
            return;
        }

        //Loop this function 60 times per second
        requestAnimationFrame(gameLoop);

        //Run the current state
        state();

        //Render the stage
        renderer.render(stage);
    }

    function resize() {
        var w, h;
        if (window.innerWidth / window.innerHeight >= ratio) {
            w = window.innerHeight * ratio;
            h = window.innerHeight;
        } else {
            w = window.innerWidth;
            h = window.innerWidth / ratio;
        }
        renderer.view.style.width = w + 'px';
        renderer.view.style.height = h + 'px';
    }

    function play() {
        for (var i = 0; i < bats.length; i++) {
            bats[i].x += bats[i].vx;
            bats[i].y += bats[i].vy;

            if (bats[i].x < 0 + halfBatWidth || bats[i].x > size[0] - halfBatWidth) {
                bats[i].vx *= -1;
                correctAnimDirection(bats[i]);
            }

            if (bats[i].y < 0 + halfBatHeight || bats[i].y > size[1] - halfBatHeight) {
                bats[i].vy *= -1;
            }
        }
    }

    function correctAnimDirection(bat) {
        if (bat.vx > 0) {
            bat.scale.x = -1;
        } else {
            bat.scale.x = 1;
        }
    }

    function finishAnimation() {
        // Made the bats invisible
        for (var i = 0; i < bats.length; i++) {
            bats[i].visible = false;
        }

        // Stop the animation loop
        isFinishAnimation = true;

        // Render the stage
        renderer.render(stage);
    }

    return {
        initialize: initialize
    };
}());