了解HTML5画布

Richlewis 发表于 Dev

里奇维斯

我正在努力掌握并理解如何在HTML5画布上使用和创建碰撞球，我看过的示例具有很多JavaScript，但是我需要将其分解为更小的块，以更好地了解正在发生的事情上。

在我的示例中，到目前为止，我了解的是我每40毫秒将圆圈重新绘制到画布上，并且每次都调用animate函数。每次称为圆的位置都会随着我的变化而变化

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

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

1）不要让小球从画布区域溢出

2）如果球发生碰撞，则彼此弹起并反转方向。

不过，我首先要解决的是不要让球从画布上漏出来，以及如何解决这个问题。

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

我不想只是让它工作，更希望了解正在发生的事情。

桑兹

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

这很难维持。相反，我建议您具有X和Y速度的属性（在示例中已使用moveX和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

在这里查看我的示例：http : //jsfiddle.net/3tfUN/8/

同样的原理适用于球之间的碰撞。我假设您想进行简单的碰撞而不会改变角度。

但是，如果您希望模拟真实的球碰撞，则需要一些更严格的三角函数来计算何时发生精确像素完美的碰撞，并计算新的X和Y速度分量。

更新

一个示例，它具有稍微改进的碰撞检测和球之间速度传递的示例：http : //jsfiddle.net/3tfUN/12/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。