구조 함수 & 클래스 - canvas 소구 충돌

    
        
        
        
    
    
                canvas
    
    
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        
        //        
        function Ball(x,y,r,color,speedx,speedy){
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.speedx = speedx;
            this.speedy = speedy;
        }
        //    
        Ball.prototype.draw = function(){
            context.beginPath();
            context.arc(this.x,this.y,this.r,0,Math.PI*2);
            context.fillStyle = this.color;
            context.fill();
        }
        //      
        Ball.prototype.move = function(){
            this.x += this.speedx;
            this.y += this.speedy;
            //    
            if(this.x < this.r || this.x > canvas.width - this.r){
                this.speedx *= -1;
            }
            if(this.y < this.r || this.y > canvas.height - this.r){
                this.speedy *= -1;
            }
        }
        
        //     
        function randomNum(min,max){
            return parseInt(Math.random()*(max-min)+min);
        }
        function randomColor(){
            return "rgb("+randomNum(0,256)+","+randomNum(0,256)+","+randomNum(0,256)+")";
        }
        var arr = [];
        for(var i = 0;i < 100;i++){
            var r = randomNum(1,50);
            var x = randomNum(r,canvas.width - r);
            var y = randomNum(r,canvas.height - r);
            var speedx = randomNum(1,10);
            var speedy = randomNum(1,10);
            var color = randomColor();
            var newBall = new Ball(x,y,r,color,speedx,speedy);
            arr.push(newBall);
        }
        
        //    
        function act(){
            context.clearRect(0,0,canvas.width,canvas.height);
            for(var i = 0;i < arr.length;i++){
                arr[i].draw();
                arr[i].move();
            }
            window.requestAnimationFrame(act);
        }
        act();
    

    
        
        
        
    
    
                canvas
    
    
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        class Ball{
            constructor(x,y,r,color,speedx,speedy){
                this.x = x;
                this.y = y;
                this.r = r;
                this.color = color;
                this.speedx = speedx;
                this.speedy = speedy;
            }
            //    
            draw(){
                context.beginPath();
                context.arc(this.x,this.y,this.r,0,Math.PI*2);
                context.fillStyle = this.color;
                context.fill();
            }
            //      
            move(){
                this.x += this.speedx;
                this.y += this.speedy;
                //    
                if(this.x < this.r || this.x > canvas.width - this.r){
                    this.speedx *= -1;
                }
                if(this.y < this.r || this.y > canvas.height - this.r){
                    this.speedy *= -1;
                }
            }
        }
        
        //     
        function randomNum(min,max){
            return parseInt(Math.random()*(max-min)+min);
        }
        function randomColor(){
            return "rgb("+randomNum(0,256)+","+randomNum(0,256)+","+randomNum(0,256)+")";
        }
        var arr = [];
        for(var i = 0;i < 100;i++){
            var r = randomNum(1,50);
            var x = randomNum(r,canvas.width - r);
            var y = randomNum(r,canvas.height - r);
            var speedx = randomNum(1,10);
            var speedy = randomNum(1,10);
            var color = randomColor();
            var newBall = new Ball(x,y,r,color,speedx,speedy);
            arr.push(newBall);
        }
        
        //    
        function act(){
            context.clearRect(0,0,canvas.width,canvas.height);
            for(var i = 0;i < arr.length;i++){
                arr[i].draw();
                arr[i].move();
            }
            window.requestAnimationFrame(act);
        }
        act();