JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<canvas id="canvas"></canvas>

CSS

#canvas{
    border:2px solid black;
/*     position:absolute;
   top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-150px;*/
    width:300px;
    height:200px;
}

JavaScript

var ctx = $('canvas').getContext('2d');
var Circle = new Class({
    Implements:[Options],
    options:{
        x: 10,
        y: 10,
        fillStyle:'#000'                
    },
    initialize:function(ctx, options){
        this.setOptions(options);
        this.ctx = ctx;
        this.x=this.options.x;
        this.y=this.options.y;    
        this.r= 10;  
        
    },
    draw: function(){
        
        var ctx = this.ctx;
        ctx.fillStyle = this.options.fillStyle;
        var x = this.x;
        var y = this.y;
        var r = this.r;
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    },
    move: function(){
        
        this.step = 0;
            var deltax = Number.random(-1,1);
            var deltay = Number.random(-1,1);
        
        this.x = (this.x +  deltax).limit(10,290);
        this.y = (this.y + deltay).limit(10, 140);
            
    },
    collision:function(x,y){
        if(Math.min(x, this.x) == x){//sbattuto a sinistra
            this.x+=2;
        }else{
            this.x-=2;            
        } 
        if(Math.min(y, this.y) == y){//sbattuto a sinistra
            this.y+=2;
        }else{
            this.y-=2;            
        }         
        
    }
});



var EventHandler = new (new Class({Implements:[Events]}));
(function(){
    ctx.clearRect(0,0,300,200);
    EventHandler.fireEvent('move');
    EventHandler.fireEvent('checkCollision');
    EventHandler.fireEvent('draw');
}).periodical(100/6); // 60 FPS

var circle = new Circle(ctx);
var circle2 = new Circle(ctx,{x:290,y:140,fillStyle:'#fe0'});
    var circle3 = new Circle(ctx, {x:150, y:60, fillStyle:'#0f0'});
EventHandler.addEvent('draw', function(){
circle.draw();
    circle2.draw();
    circle3.draw();
})
    EventHandler.addEvent('move', function(){
    circle.move();
circle2.move();
    circle3.move();
    });
EventHandler.addEvent('checkCollision', function(){
    var...