基于HTML5的小球物理测试系统

你的浏览器不支持canvas，推荐使用chrome进行浏览。 半径: 
颜色: 
速度: 
弹性(0-1): 
入射角(0-360): 
起始X坐标(0-400): 
起始Y坐标(0-400): 
 

功能说明：

  一个基于HTML5 canvas的小球物理测试系统，用户可以手动为新的小球设置不同的属性值（颜色，半径，速度等），从而在canvas中发射小球，小球在运动过程中会收到重力，弹性以及摩擦力的影响。

实现原理：

在小球飞行过程中，以初始速度，入射角以及重力系数作为依据，正交分解得出小球X轴和Y轴上的分速度，通过定时器不断刷新canvas，显示出小球飞行的动画。当小球和墙壁产生碰撞时，以小球弹性为依据计算能量损耗，当小球在墙壁滚动时，以墙壁摩擦系数为依据计算其能量损耗。

代码分析：

var bounceWall = (function() {   

 return function(canvasId,backgroundColor) {   

this.init(canvasId, backgroundColor);   

}

})();

构造函数，其中调用了prototype中的init方法进行初始化。需要传入的参数是canvas的ID，和canvas的背景色，如果不传入backgroundColor参数，背景色默认为黑色。

bounceWall.prototype = (function() {   

  var CanvasSupport = Modernizr.canvas;

//检查浏览器是否支持canvas     var newBall = function(radius, color, speed, direction, currentX, currentY, elasticity) {       

this.radius = parseFloat(radius);                           

 //半径        this.color = color;                                         

//颜色        this.speed = parseFloat(speed);                             

 //速度        this.elasticity = parseFloat(elasticity);                   

//弹性         this.direction = parseFloat(direction);                     

 //入射角        this.currentX = parseFloat(currentX);                       

//初始X坐标        this.currentY = parseFloat(currentY);                       

 //初始Y坐标        this.dx = speed * Math.cos(this.direction * Math.PI / 180); 

 //计算其X轴方向的初始速度        this.dy = speed * Math.sin(this.direction * Math.PI / 180); 

//计算其Y轴方向的初始速度        this.nextX = this.currentX + this.dx;                       

 //根据速度和初速度得出其下次移动到的X坐标        this.nextY = this.currentY + this.dy;                       

 //根据速度和初速度得出其下次移动到的Y坐标    };     

开始进入到bounce wall的prototype，首先使用Modernizr检测是否可以