JavaScript对象入门指南(4)

//update ball location
    update (){
        if((this.x + this.size)>=width){
            this.velX=-(this.velX)
        }
        if((this.x - this.size)<= 0){
            this.velX=-(this.velX)
        }
        if((this.y + this.size)>= height){
            this.velY=-(this.velY)
        }
        if((this.y - this.size)<= 0){
            this.velY=-(this.velY)
        }
        this.x+=this.velX;
        this.y+=this.velY;
    }

//spy collision
    collisionDetect (){
        for(let j=0;j<balls.length;j++){
            if(!(this===balls[j])){
                const dx=this.x - balls[j].x;
                const dy=this.y - balls[j].y;
                const distance=Math.sqrt(dx*dx + dy*dy);

if(distance<this.size + balls[j].size){
                    balls[j].color=this.color='rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')';
                }
            }

}
    }
}

//create evil circle
class EvilCircle extends Shape{
    constructor(x,y,exists){
        super(x,y,exists);
        this.color='white';
        this.size=10;
        this.velX=20;
        this.velY=20;
    }
    draw(){
        ctx.beginPath();
        ctx.strokeStyle=this.color;
        ctx.lineWidth=3;
        ctx.arc(this.x,this.y,this.size,0,2*Math.PI);
        ctx.stroke();
    }
    //check evil location
    checkBounds(){
        if((this.x + this.size)>width){
            this.x-=this.size
        }
        if((this.y + this.size)>height){
            this.y-=this.size
        }
        if((this.x - this.size)<0){
            this.x+=this.size;
        }
        if((this.y - this.size)<0){
            this.y+=this.size;
        }
    }
    setControls(){
        window.onkeydown=(e)=>{
            if(e.keyCode===38){
                this.y-=this.velY
            }
            else if(e.keyCode===40){
                this.y+=this.velY;
            }
            else if(e.keyCode===37){
                this.x-=this.velX
            }
            else if(e.keyCode===39){
                this.x+=this.velX
            }
        }
    }
    collisionDetect(){
        for(let i=0;i<balls.length;i++){
            if(balls[i].exists){
                const dx=this.x-balls[i].x;
                const dy=this.y-balls[i].y;
                const distance=Math.sqrt(dx*dx+dy*dy);

if(distance<this.size+balls[i].size){
                    balls[i].exists=false;
                }
            }
        }
    }
}

let balls=[];

const evil=new EvilCircle(
    random(0,width),
    random(0,height),
    true
);

loop=()=>{
    ctx.fillStyle='rgba(0,0,0,0.25)';
    ctx.fillRect(0,0,width,height);