ES6__class 的继承等相关知识案例

/**
 * class 的继承等相关知识
 */

// extends、 static、 super

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const w = canvas.width = 600;
const h = canvas.height = 400;

class Ball {
  constructor(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = `rgb(${~~Ball.rpFn([55, 255])}, ${~~Ball.rpFn([55, 255])}, ${~~Ball.rpFn([55, 255])})`;
    return this;
  }
  render(ctx){
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(0, 0, this.r, 0, 2*Math.PI);
    ctx.fill();
    ctx.restore();
    return this;
  }
  static rpFn(arr){ // Ball.rpFn([1, 10])
    let max = Math.max(...arr),
        min = Math.min(...arr);
    return Math.random() * (max - min) + min;
  }
}

// const ball1 = new Ball(100, 100, 30).render(ctx);

class SuperBall extends Ball {
  constructor(x, y, r){
    // Ball.call(this, x, y, r);
    // this.color = 'red';
    super(x, y, r);
    this.vy = SuperBall.rpFn([2, 4]);
    this.g = SuperBall.rpFn([0.2, 0.4]);
    this.a = 0;
    return this;
  }
  move(ctx){
    // super();  // 报错
    
    this.y += this.vy;
    this.vy += this.g;
    
    let current = this.vy * -0.75;
    
    if(this.y + this.r >= ctx.canvas.height){
      this.y = ctx.canvas.height - this.r;
      
      if(Math.abs(current - this.a) < 0.01) return false;
      
      this.a = this.vy *= -0.75; 
    }
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    super.render(ctx);
    
    return true;
  }
};

// const ball1 = new SuperBall(100, 100, 30).render(ctx);

let ball, timer;

canvas.onclick = function (e){
  let x = e.offsetX, y = e.offsetY;
  
  let r = ~~Ball.rpFn([25, 55]);
  
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ball = new SuperBall(x, y, r).render(ctx);
  
  ballMove();
}

function ballMove(){
  timer = window.requestAnimationFrame(ballMove);
  
  if(!ball.move(ctx)){
    window.cancelAnimationFrame(timer);
  }
}