HTML5画布随机指示

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

本规范由以下人员创建 __CODE__

移动球

    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;
        }
    }

在这里看到演示

他在这里清楚地解释了所有的代码

相关问题在这里