JSFiddle - React, Tailwind, and code Playground

by jeykeu

HTML

<script src="http://www.kineticjs.com/download/kinetic-v3.10.2.min.js"></script>
<body onmousedown="return false;">
    <div id="container">
    </div>
</body>

JavaScript

var canvas = {
            width: 1000,
            height: 650
        },
        brandColors = [
            '#61c2ee',
            '#ce191f',
            '#262626'
        ],
        stage, 
        layer,
        radius = 100,
        balls=[],
        ballImageObjects = [],
        //        ballImageSrc = "img/crew_sprite.png" 
        ballImageSources = [
            "http://i01.i.aliimg.com/photo/v0/429305075/soccer_ball_high_quality_PVC_football.jpg_250x250.jpg",
            "http://i01.i.aliimg.com/photo/v0/429305075/soccer_ball_high_quality_PVC_football.jpg_250x250.jpg",
            "http://i01.i.aliimg.com/photo/v0/429305075/soccer_ball_high_quality_PVC_football.jpg_250x250.jpg"
            
        ];
        numberOfBalls = ballImageSources.length;
        
        window.requestAnimFrame = (function(callback){
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                window.setTimeout(callback, 1000 / 60);
            };
        })();
        function randomColor(colors){
            var idx = Math.round(Math.random() * (colors.length - 1-1) + 0);
            return colors[idx];
        }
        function animate(lastTime, balls){
            //            var stage = balls[0].getStage();
            //            var layer = balls[0].getLayer();
            var time ;
            for(var ball in balls){
                var date = new Date();
                time = date.getTime();
                var timeDiff = time - lastTime;
                // update
                updateBall(timeDiff, balls[ball]);
                // draw
                layer.draw();
            }
            // request new frame
            requestAnimFrame(function(){
                animate(time, balls);
            });
       ...