Question

我有球体互相反弹和帆布墙，但是我在速度上挣扎。我该如何控制速度？那么可能连接到beginpath函数？所以他们有点爆炸然后到处反弹

    <script type="text/javascript">
        $(function () {
            var canvas = $("#target");
            var context = canvas.get(0).getContext("2d");

            var canvasWidth = canvas.width();
            var canvasHeight = canvas.height();

            $(window).resize(resizeCanvas);

            function resizeCanvas() {
                canvas.attr("width", $(window).get(0).innerWidth);
                canvas.attr("height", $(window).get(0).innerHeight);

                canvasWidth = canvas.width();
                canvasHeight = canvas.height();
            };

            var Sphere = function (x, y, radius, mass, vX, vY) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.mass = mass;

                this.vX = vX;
                this.vY = vY;

                this.updatePosition = function () {
                    this.x += this.vX;
                    this.y += this.vY;
                };

                this.checkBoundaryCollision = function () {
                    if (this.x - this.radius < 0) {
                        this.x = this.radius;
                        this.vX *= -1;
                    } else if (this.x + this.radius > canvasWidth) {
                        this.x = canvasWidth - this.radius;
                        this.vX *= -1;
                    }

                    if (this.y - this.radius < 0) {
                        this.y = this.radius;
                        this.vY *= -1;
                    } else if (this.y + this.radius > canvasHeight) {
                        this.y = canvasHeight - this.radius;
                        this.vY *= -1;
                    }
                }
            }

            resizeCanvas();

            var spheresLength = 20;
            var spheres = new Array();
            function loadContent() {
                for (var i = 0; i < spheresLength; i++) {
                    var x = 20 + (Math.random() * (canvasWidth - 40));
                    var y = 20 + (Math.random() * (canvasHeight - 40));

                    var radius = 5 + Math.random() * 10;
                    var mass = radius / 2;

                    var vX = Math.random() * 4 - 2;
                    var vY = Math.random() * 4 - 2;

                    spheres.push(new Sphere(x, y, radius, mass, vX, vY));
                };
                animate();
            }
            loadContent();

            function animate() {
                update();
                draw();
                setTimeout(animate, 33);
            }


            function update() {
                for (var i = 0; i < spheresLength; i++) {
                    var sphere1 = spheres[i];

                    for (var j = i + 1; j < spheresLength; j++) {
                        var sphere2 = spheres[j];
                        var dX = sphere2.x - sphere1.x;
                        var dY = sphere2.y - sphere1.y;
                        var distance = Math.sqrt((dX * dX) + (dY * dY));

                        if (distance < sphere1.radius + sphere2.radius) {
                            var angle = Math.atan2(dY, dX);
                            var sine = Math.sin(angle);
                            var cosine = Math.cos(angle);

                            var x = 0;
                            var y = 0;
                            var xB = dX * cosine + dY * sine;
                            var yB = dY * cosine - dX * sine;

                            var vX = sphere1.vX * cosine + sphere1.vY * sine;
                            var vY = sphere1.vY * cosine - sphere1.vX * sine;

                            var vXb = sphere2.vX * cosine + sphere2.vY * sine;
                            var vYb = sphere2.vY * cosine - sphere2.vX * sine;

                            var vTotal = vX - vXb;
                            vX = (
                    (sphere1.mass - sphere2.mass) * vX + 2 * sphere2.mass * vXb
                    )
                    / (sphere1.mass + sphere2.mass);

                            vXb = vTotal + vX;

                            xB = x + (sphere1.radius + sphere2.radius);

                            sphere1.x = sphere1.x + (x * cosine - y * sine);
                            sphere1.y = sphere1.y + (y * cosine + x * sine);

                            sphere2.x = sphere1.x + (xB * cosine - yB * sine);
                            sphere2.y = sphere1.y + (yB * cosine + xB * sine);

                            sphere1.vX = vX * cosine - vY * sine;
                            sphere1.vY = vY * cosine + vX * sine;

                            sphere2.vX = vXb * cosine - vYb * sine;
                            sphere2.vY = vYb * cosine + vXb * sine;
                        }

                    }

                    sphere1.updatePosition();
                    sphere1.checkBoundaryCollision();


                }
            }

            function draw() {
                context.clearRect(0, 0, canvasWidth, canvasHeight);
                context.fillStyle = "rgb(255, 255, 255)";


                for (var i = 0; i < spheresLength; i++) {
                    var sphere = spheres[i];

                    context.beginPath();
                    context.arc(sphere.x, sphere.y, sphere.radius, 0, Math.PI * 2);
                    context.closePath();
                    context.fill();
                }
            }
        });
    </script>

Answer 1

＆＃34;速度＆＃34;球的数量是它们每帧行进距离的函数。这段代码每秒运行大约3帧，看起来距离是＆＃34;质量的函数。＆＃34;您可以通过增加确定每帧中行进距离的因子来增加速度（在update()函数中。）

顺便说一句，我无法使用此代码。将来，请尝试在jsFiddle.net或Codepen.io上进行原型设计。

<强>更新

这里是控制球速度的线：

 vX = ((sphere1.mass - sphere2.mass) * vX + 2 * sphere2.mass * vXb)
 / (sphere1.mass + sphere2.mass);

该值2是整体速度修改器。该值的小幅增加与速度的大幅增加相关。把它踢到2.25然后看着它们飞起来。

Html5帆布弹跳球的速度

1 个答案: