HTML5画布随机方向

使用HTML5画布在哪里将是最好的地方开始移动我的3个球在随机轨迹（沿着一条平滑的线，没有跳跃），当他们击中对方反弹，然后去另一条路径，直到他们再次击中对方并再次弹跳。HTML5画布随机方向

到目前为止，我已经在上设置了一个简单的例子，其中每个球沿着自己的路径（尽管它们在屏幕上消失）。

目前的轨迹很简单，只要

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

}

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

任何帮助表示赞赏

感谢

来源

2014-07-26 Richlewis

解释这不是一个S. O.题。而是在网上搜索教程。 – GameAlchemist

就随机轨迹而言，这似乎很简单，只需将您的x和y分量设置为一定范围内的随机浮点数，由您自己确定为首选。我错了吗？ –

好的，我已经更新了小提琴，但黄球的行为过于随机，当球移动它需要移动增量运动 – Richlewis

这个码是Adam Brookes for adambrookesprojects.co.uk - 06/10/2013>.

012创建个

移动球

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画布随机方向

回答

相关问题