javascript - HTML5 Canvas 随机方向

Question

这个问题已经有答案了:

Ball to Ball Collision - Detection and Handling (15 个回答)

已关闭 9 年前。

使用 HTML5 Canvas ，这是开始以随机轨迹移动我的 3 个球(沿着平滑的线，没有跳跃)的最佳位置，当它们互相撞击时弹开，然后走另一条路径，直到它们再次撞击彼此然后再次弹开。

到目前为止，我已经在 jsfiddle 上设置了一个简单的示例每个球都会遵循自己的路径(尽管它们确实会从屏幕上消失)。

目前轨迹很简单

function animate(){

  // Yellow Circle
  circles[0].x+=1;
  circles[0].y+=-1.5;

  // Blue Cirlce
  circles[1].x+=-1;
  circles[1].y+=-1.5;

  // Red Circle
  circles[2].x+=1;
  circles[2].y+=-1;
  draw();

 }

我很想看一个例子，但也想知道我应该看什么方法和计算。

Answer 1

此代码由 Adam Brookes 于 2013 年 6 月 10 日为 adambrookesprojects.co.uk 创建。

移动球

    function updateBallPos(deltaTime, ballArray) {
        for (var i = 0; i < ballArray.length; i++) {
            ballArray[i].lastGoodPosition = ballArray[i].position; // save the balls last good position.
            ballArray[i].position = ballArray[i].position.add((ballArray[i].velocity.multiply(deltaTime/10))); // add the balls (velocity * deltaTime) to position. 
        }
    }

检测球碰撞

function checkBallCollision(ball1, ball2) {
        var xDistance = (ball2.getX() - ball1.getX()); 
        var yDistance = (ball2.getY() - ball1.getY());
        var distanceBetween = Math.sqrt((xDistance * xDistance) + (yDistance *yDistance)); 

        var sumOfRadius = ((ball1.getRadius()) + (ball2.getRadius())); // add the balls radius together

        if (distanceBetween < sumOfRadius) {
            return true;
        }
        else {
            return false;
        }
    }

SEE DEMO HERE

所有代码他都解释清楚了HERE

RELATED QUESTION HERE