JSFiddle - React, Tailwind, and code Playground

by karim79

JavaScript

var WINDOW_HEIGHT = 400;
            var WINDOW_WIDTH = 600;
            
            var paper = Raphael(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
            
            Circle = function(paper, x, y, r, color){
                this.paper=paper;
                this.x=x;
                this.y=y;
                this.r=r;
                this.color=color;
                this.xd = 1;
                this.yd = 1;
                this.elem;
            }
            
            Circle.prototype.create = function(){
                this.elem = this.paper.circle(this.x, this.y, this.r);
                this.elem.attr("fill", this.color);
                this.elem.attr("stroke", this.color);
            }
            
                        
            Circle.prototype.move = function(){
                
                if ( this.x < 0 || this.x > WINDOW_WIDTH ){
                    this.xd = -this.xd;
                }
                if ( this.y < 0 || this.y > WINDOW_HEIGHT ){
                    this.yd = -this.yd;
                }
                this.x += this.xd;
                this.y += this.yd;
                
                this.elem.attr("cx", this.x);
                this.elem.attr("cy", this.y);
            }
            
            Circle.prototype.animate = function(x, y){
                this.elem.animate({cx: x, cy: y},10, "linear");
            }

            var circle = new Circle(paper, 0,0,30,"#f10");
            
            circle.create();

            window.setInterval(function(){
                circle.move();
            },1);
            
            //circle.animate(300, 300);