var krog1 = {
            r: Math.floor((Math.random() * 25) + 15),
            x: Math.floor((Math.random() * 800) + 1),
            y: Math.floor((Math.random() * 800) + 1),
            power: 5,
            angle: -45,
            izris: function () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.arc(krog1.x, krog1.y, krog1.r, 0, 2 * Math.PI);
                ctx.fillStyle = "#133edc";
                ctx.fill();
                ctx.strokeStyle = "#133edc";
                ctx.stroke();
                ctx.closePath();
            }
        };

        var krog2 = {
            r: Math.floor((Math.random() * 25) + 15),
            x: Math.floor((Math.random() * 800) + 1),
            y: Math.floor((Math.random() * 800) + 1),
            power: 0,
            angle: 0,
            izris: function () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.arc(krog2.x, krog2.y, krog2.r, 0, 2 * Math.PI);
                ctx.fillStyle = "#c90c0c";
                ctx.fill();
                ctx.strokeStyle = "#c90c0c";
                ctx.stroke();
                ctx.closePath();
            }
        };

        var krog3 = {
            r: Math.floor((Math.random() * 25) + 15),
            x: Math.floor((Math.random() * 800) + 1),
            y: Math.floor((Math.random() * 800) + 1),
            power: 0,
            angle: 0,
            izris: function () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.arc(krog3.x, krog3.y, krog3.r, 0, 2 * Math.PI);
                ctx.fillStyle = "#95f34d";
                ctx.fill();
                ctx.strokeStyle = "#95f34d";
                ctx.stroke();
                ctx.closePath();
            }

        };

        function animate() {
            var canvas = document.getElementById("canvas");
            var reset = krog1.x;
            var requestID = window.requestAnimationFrame(animate);
            krog1.x += krog1.power;
            krog1.y += krog1.angle/3;
            console.log(krog1.x);
            if (krog1.x > canvas.width - 100)
                window.stopAnimationFrmae(requestID);
            izris();
        }


        function izris() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            krog1.izris(); //krog1 izris
            krog2.izris(); //krog2 izris
            krog3.izris(); //krog3 izris
        }

        function main() {
            izris();
            document.addEventListener('keydown', function (event) {
                if (event.keyCode == 68) {
                    console.log("68");
                    animate();
                }
                if (event.keyCode == 87) {
                    animate();
                }
                if (event.keyCode == 65) {
                    animate();
                }
                if (event.keyCode == 83) {
                    animate();
                }
            });
        }

        main();