Example of canvas detection of boundary and projectile motion

The effect, the small ball collide with each other, then there are only two things to do, one: with two cycles to traverse the ball to collide with each other, two: After the collision will bounce to where and how much distance, the first thing I want to learn the two-dimensional array loop is no problem, The second thing is to use the trigonometric function of the last period to determine the angle, because it is the force is mutual, so the rebound side should be negative, and because the impact force will be offset, So we should multiply the coefficients and multiply by 0.5 so that is the collision with each other, in order to make the effect is obvious, you can make the rebound coefficient of 0.5, so that in the wall will become slow, the effect will become better

That's the same thing as the code.

var canvas = document.getElementById ("Canvas");
var cxt = Canvas.getcontext ("2d");
var cleft = Ctop = 0;
var cright = canvas.width;
var cbottom = canvas.height;
var balles = [];
var spring = 0.03;
var bounce =-0.8;
var friction = 1;

function Ball (x, y, RADIUS, VX, VY, color) {
this.x = x;
This.y = y;
THIS.VX = VX;
This.vy = VY;
This.radius = radius;
This.color = color;
}
var BallA = new Ball (CANVAS.WIDTH/2, CANVAS.HEIGHT/2, 40)

function animation () {
Cxt.clearrect (0, 0, canvas.width, canvas.height);
Cxt.beginpath ();
Cxt.fillstyle = "#fff";
Balles.foreach (function (ball, i) {
Ball.x + = BALL.VX;
Ball.y + = Ball.vy;
if (ball.x + Ball.radius > Cright | | Ball.x-ball.radius < cleft) {
if (ball.x + Ball.radius > Cright)
ball.x = Cright-ball.radius;
Else
ball.x = cleft + Ball.radius;
BALL.VX *= Bounce;
}
if (ball.y + Ball.radius > Cbottom | | Ball.y-ball.radius < ctop) {
if (ball.y + Ball.radius > Cbottom)
Ball.y = Cbottom-ball.radius;
Else
BALL.Y = Ctop + Ball.radius;
Ball.vy *= Bounce;
}
for (Var j=0;j<balles.length;j++) {
Checkcollision (Ball,balles[j]);
}
Cxt.beginpath ();
Cxt.fillstyle = Ball.color;
Cxt.arc (ball.x, Ball.y, Ball.radius, 0, Math.PI * 2, true);
Cxt.fill ();
Cxt.closepath ();
})
Requestanimationframe (animation);
}
function Checkcollision (BALLA,BALLB) {

var dx = balla.x-ballb.x;
var dy = balla.y-ballb.y;
var dist = math.sqrt (dx * dx + dy * dy);
var mindist = Ballb.radius + Balla.radius;
if (Dist < mindist) {
var angle = math.atan2 (dy, dx);
var targetx = ballb.x + math.cos (angle) *mindist;
var targety = ballb.y + math.sin (angle) *mindist;
var vx= (targetx-balla.x) * spring*0.5;
var vy= (TARGETY-BALLA.Y) * spring*0.5;
BALLA.VX + = VX;
Balla.vy + = VY;
BALLB.VX + =-(VX);
Ballb.vy + =-(VY);
}
BALLA.VX *= Friction;
Balla.vy *= Friction;
}
Window.onload = function () {
for (var i = 0; i <; i++) {
var x = tool.random (canvas.width-30);
var y = tool.random (canvas.height-30);
var vx = Tool.random (3, 6);
var vy = Tool.random (3, 5);
var radius = tool.random (10, 20);
var color = "#" + Math.floor (math.random () * 0xFFFFFF). toString (16)
Balles.push (New ball (x, y, RADIUS, VX, VY, color));
}
Animation ();

}

Example of canvas detection of boundary and projectile motion