HTML5画布随机方向[重复]答案

【问题标题】：HTML5 canvas random directions [duplicate]HTML5画布随机方向[重复]
【发布时间】：2014-09-18 02:38:34
【问题描述】：

使用 HTML5 画布哪里是开始以随机轨迹移动我的 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();

 }

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

【问题讨论】：

这不是 S.O.题。而是在网上搜索教程。
就随机轨迹而言，这似乎很简单，只需将 x 和 y 分量设置为某个范围内的随机浮点数，由您自己确定为首选。我错了吗？
好吧，我已经更新了小提琴，但是黄球的行为太随机了，当球移动时，它需要以增量运动方式移动

标签： javascript jquery html canvas html5-canvas

【解决方案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