ES6__class 的继承等相关知识案例

 1 /**
 2  * class 的继承等相关知识
 3  */
 4 
 5 // extends、 static、 super
 6 
 7 const canvas = document.querySelector('#canvas');
 8 const ctx = canvas.getContext('2d');
 9 
10 const w = canvas.width = 600;
11 const h = canvas.height = 400;
12 
13 class Ball {
14   constructor(x, y, r){
15     this.x = x;
16     this.y = y;
17     this.r = r;
18     this.color = `rgb(${~~Ball.rpFn([55, 255])}, ${~~Ball.rpFn([55, 255])}, ${~~Ball.rpFn([55, 255])})`;
19     return this;
20   }
21   render(ctx){
22     ctx.save();
23     ctx.translate(this.x, this.y);
24     ctx.fillStyle = this.color;
25     ctx.beginPath();
26     ctx.arc(0, 0, this.r, 0, 2*Math.PI);
27     ctx.fill();
28     ctx.restore();
29     return this;
30   }
31   static rpFn(arr){ // Ball.rpFn([1, 10])
32     let max = Math.max(...arr),
33         min = Math.min(...arr);
34     return Math.random() * (max - min) + min;
35   }
36 }
37 
38 // const ball1 = new Ball(100, 100, 30).render(ctx);
39 
40 class SuperBall extends Ball {
41   constructor(x, y, r){
42     // Ball.call(this, x, y, r);
43     // this.color = 'red';
44     super(x, y, r);
45     this.vy = SuperBall.rpFn([2, 4]);
46     this.g = SuperBall.rpFn([0.2, 0.4]);
47     this.a = 0;
48     return this;
49   }
50   move(ctx){
51     // super();  // 报错
52     
53     this.y += this.vy;
54     this.vy += this.g;
55     
56     let current = this.vy * -0.75;
57     
58     if(this.y + this.r >= ctx.canvas.height){
59       this.y = ctx.canvas.height - this.r;
60       
61       if(Math.abs(current - this.a) < 0.01) return false;
62       
63       this.a = this.vy *= -0.75; 
64     }
65     
66     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
67     super.render(ctx);
68     
69     return true;
70   }
71 };
72 
73 // const ball1 = new SuperBall(100, 100, 30).render(ctx);
74 
75 let ball, timer;
76 
77 canvas.onclick = function (e){
78   let x = e.offsetX, y = e.offsetY;
79   
80   let r = ~~Ball.rpFn([25, 55]);
81   
82   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
83   ball = new SuperBall(x, y, r).render(ctx);
84   
85   ballMove();
86 }
87 
88 function ballMove(){
89   timer = window.requestAnimationFrame(ballMove);
90   
91   if(!ball.move(ctx)){
92     window.cancelAnimationFrame(timer);
93   }
94 }