Question

我正在制作一个基本物理的小游戏，我无法弄清楚如何使圆圈相互交互，并使用矩形。我想要的只是在游戏中制作一个坚实的物体。我不能使用引擎或库，任何想法？

Answer 1

使用对象保存每个圆的x和y坐标，x和y速度（以像素为单位）以及半径。保留所有圈子的列表。在动画循环的每次迭代中，如果圆圈提前x和y速度所指示的像素数，则检查每个圆的x和y坐标加上或减去半径是不是彼此重叠。如果是，请处理您希望他们做的事情（即改变方向，停止等），然后重新绘制。

Answer 2

您看到了tutorials on MSDN吗？特别是，Detecting collisions in a 2D HTML5 game似乎与您的兴趣相关。

特别是，这是用于检测该教程中的冲突的代码：

var circlesOverlap = function(circleA, circleB) { // Public. Returns true if the SVG circles A and B overlap, false otherwise.
  var deltaX = circleA.cx.baseVal.value - circleB.cx.baseVal.value;
  var deltaY = circleA.cy.baseVal.value - circleB.cy.baseVal.value;
  var distance = Math.sqrt( (deltaX*deltaX) + (deltaY*deltaY) ); // The classic distance-between-two-points formula.
  var radiusA = circleA.r.baseVal.value; // The radius of circle A.
  var radiusB = circleB.r.baseVal.value; // The radius of circle B.

  if (circleA.id == circleB.id) // If true, circleA and circleB are the same circle.
    return false;

  return distance <= (radiusA + radiusB);
}; // circlesOverlap()

that.circlesOverlap = circlesOverlap;

请注意，本教程中使用的技术基本上是：

跟踪每个对象
计算物体之间的距离
相应地作出回应（例如当距离为零时）。

（更新：根据以下评论添加了与您的问题最相关的示例）

请花些时间阅读完整的教程，以获取完整的背景信息，并确保适当的信用得到适当的记录。

希望这会有所帮助......

- Lance

制作在JavaScript中相互交互的实心圆圈

2 个答案: