Question

使用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();

 }

我很想看到一个例子，但也知道我应该看看哪些方法和计算

任何帮助表示赞赏

由于

Answer 1

此代码由Adam Brookes for adambrookesprojects.co.uk - 06/10/2013>.

创建

移动球

    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

清楚地解释了所有代码

HTML5画布随机指示

1 个答案: