JavaScript面向对象的小球碰撞实现基本原理

主要记录一下重点和难点

难点在于一个球的初始运动方向算法

var reg=2*Math.random()*Math.PI;//初始角度，弧度制

这里使用到了三角函数，产生一个0到2π的角度（弧度制）

this.balls[i].x=this.balls[i].x+8*Math.cos(this.balls[i].reg);
this.balls[i].y=this.balls[i].y+8*Math.sin(this.balls[i].reg);

超出边界反弹也使用了三角函数的特性，由此可见数学基础的重要性。

if(this.balls[i].y>this.kheight-this.bheight || this.balls[i].y<0){
                this.balls[i].reg=-this.balls[i].reg;
 }
            
 if(this.balls[i].x>this.kwidth-this.bwidth || this.balls[i].x<0){
                this.balls[i].reg=Math.PI-this.balls[i].reg;
}    

新的动画API，优于老的setTimeout、setInterval等

requestAnimationFrame(this.bmove.bind(this));

此处的坑是this.bmove.bind(this)，一般我们用的时候都是直接写方法，但是现在在面向对象里面我们使用了this，这导致了一些问题，具体问题及分析见关于setInterval和setTImeout中的this指向问题