Example of canvas detection of boundary and projectile motion

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.