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

Make solid circles that interact with each other in JavaScript

本文关键字：交互 JavaScript      更新时间：2023-09-26

我正在用基本的物理原理做一个小游戏，我不知道如何让圆圈相互交互，并与矩形相互作用。我想要的只是在游戏中制作一个固体物体。我不能使用引擎或库，有什么想法吗？

你看过MSDN上的教程吗？ 特别是，检测 2D HTML5 游戏中的碰撞似乎与您的兴趣相关。

具体而言，下面是该教程中用于检测冲突的代码：

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;

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

  • 跟踪每个对象
  • 计算对象之间的距离
  • 做出相应的响应（例如，当距离为零时）。

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

但是，请花时间阅读完整的教程，了解完整的上下文，并确保适当的信用得到适当的信用。

希望这有帮助...

--矛

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

相关文章：