Javascript 理解HTML5画布

我正在尝试抓住并理解如何使用HTML5画布创建碰撞球，我所看到的示例中有很多JavaScript，但我需要将其分解为更小的块，以便更好地了解发生了什么

在我看来，到目前为止我所理解的是，我每40毫秒在画布上重新绘制一次圆圈，每次调用animate函数。每次这被称为圆的位置随着我的改变而改变

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

因此，我的圆形对象位于一个数组中，我希望实现两件事：

1） 不要让球离开画布区域

2） 如果球发生碰撞，则会相互弹起，并朝相反方向移动

我想首先解决的问题是不要让球从画布上跑掉，我将如何解决这个问题

我可以访问window.width和window.height，因此需要了解如何获取阵列中每个球的位置，并确保它不会跨越这些边界

我不想只让它工作，我更愿意理解正在发生的事情。

画布只是一个“画布”，你可以在其中画圆圈。您需要完成的是建立一个“世界”模型，其中圆是具有宽度和高度尺寸及其当前位置的对象，边界定义良好。一旦你有了每个圆的宽度和高度以及它们的位置，你就可以计算它们相对于你设定的边界的位置，看看你是否需要改变方向或者继续前进

碰撞源于相同的原理，但如果您希望它们“真实”，则建模会有点困难（在边界问题中，您只对圆的宽度和高度感兴趣，因为边界区域是长方体形状，并且圆总是在距离其中心最远的点碰撞，而当两个圆碰撞时，您应该考虑每个圆的半径，而不是它们周围的“边界框”）

---

我现在没有时间用示例向您展示这些概念，但希望我给您提供了正确的信息：）。

这将检查画布边界上的碰撞。我更新了您的对象以存储vx和vy（速度）以及基于这些属性移动的

draw（）

函数。我添加了

checkBounds（）

当圆超出边界时，它会反转速度

编辑：已修改，以便将圆的半径也考虑在内

在圆之间进行碰撞检测可能会遵循类似的模式

var canvas=document.getElementById（'ball-canvas'）；
var context=canvas.getContext（'2d'）
var半径=50；
var strokewidth=2；
var strokestyle='#666'；
var frameCount=0；
var w=画布宽度；
var h=画布高度；
//圆对象
变量黄圈={
x:50，
y:h/2，
半径：半径，
颜色：'黄色'，
vx:1，
vy:1.5
}
变量红圈={
x:450，
y:h/2，
半径：半径，
颜色：“红色”，
vx:1，
vy:-1
}
变量blueCircle={
x:850，
y:h/2，
半径：半径，
颜色：“蓝色”，
vx:-1，
vy:-1.5
}
//创建空数组，然后将cirlce对象推入数组
var循环=[]；
圆圈。推（黄色圆圈、蓝色圆圈、红色圆圈）；
函数checkBounds（）{
对于（变量i=0；iw-c.radius | | c.xh-c.radius | | c.ymoveX

和

moveY

）

接下来，您需要检查球的位置+半径补偿是否接触画布边缘，如果是，则反转速度值。例如，球的X速度为4，现在它撞击左侧或右侧画布egde，X速度现在变为-4

简而言之，就是这样：

            var c = circles[i];

            // check rebounds
            if (c.x - c.radius <= 0 || c.x + c.radius  >= canvas.width)
                c.moveX = -c.moveX; // flip the horizontal speed component
            if (c.y - c.radius <= 0 || c.y + c.radius >= canvas.height)
                c.moveY = -c.moveY; // flip the vertical speed component

            // Yellow Circle
            c.x += c.moveX; // here we don't have to worry
            c.y += c.moveY; // about directions anymore

var c=circles[i]；
//检查篮板
如果（c.x-c.radius=canvas.width）
c、 moveX=-c.moveX；//翻转水平速度分量
如果（c.y-c.radius=画布高度）
c、 moveY=-c.moveY；//翻转垂直速度分量
//黄圈
c、 x+=c.moveX；//这里我们不必担心
c、 y+=c.moveY；//关于方向

请参见我的示例：

同样的原理也适用于球之间的碰撞。我假设你想要在不改变角度的情况下进行简单的碰撞

但是如果你想模拟真实的球碰撞，那就需要一些更严格的三角函数来计算什么时候发生像素完美的碰撞，以及计算新的X和Y速度分量

---

更新

一个具有稍微改进的collisio的示例

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

            var c = circles[i];

            // check rebounds
            if (c.x - c.radius <= 0 || c.x + c.radius  >= canvas.width)
                c.moveX = -c.moveX; // flip the horizontal speed component
            if (c.y - c.radius <= 0 || c.y + c.radius >= canvas.height)
                c.moveY = -c.moveY; // flip the vertical speed component

            // Yellow Circle
            c.x += c.moveX; // here we don't have to worry
            c.y += c.moveY; // about directions anymore