Question

我有一个位于0,0点的物体。此对象不能与其类型的任何其他对象共享空间，该对象可能出现在它上面，旁边，上面等等。可能存在多个这些对象彼此重叠并且我不知道放置其他的，直到我尝试碰撞检测方法。

我的想法是，我会在网格搜索旁边使用碰撞检测。沿着下面的照片。

该对象将首先尝试其默认的最佳案例位置。如果这不起作用，那么它会尝试向左，向上，向左下方等，直到它搜索了所有＃1位置。然后它移动到＃2位置，依此类推，直到找到一个放置元素的地方，它不会与另一个重叠。

这是我现在正在玩的代码，但它正在选择一些非常非常随机的位置。我很确定它不遵循我上面描述的算法。

  for (let i = 0; i < 5 && this._hasCollisions(this._tagWrapper); i++) {
    /**
     * This algorithm explores positions inside nested boxes.
     * The move algorithm behaves the following way. It goes,
     * down, up, left, down, up, right * 2, repeat.
     *
     * For example this is how it works given the height of 5 and a width of 7
     * numbers are expressed in the offset generated
     * 1: 5,0       4: 5,-7     7: 5,7      10: 10,-14
     * 2: -5,0      5: -5,-7    8: -5,7     11: -10,-14
     * 3: 0,-7      6: 0,7     9: 0,-14
     */

    // Calculate which box the collision detector is working in
    // This happens every 9 iterations
    let multiplier = (i / 9) + 1;

    /**
     * Get the x offset
     */
    if (i % 3 === 0) {
      // Clear the height offset on multiples of 3
      xOffset = 0;
    } else {
      // Set the height to the multiplier
      xOffset = this._tagWrapper.offsetWidth * multiplier;
    }
    if (i % 3 === 2) {
      // Get the sequence 2, 5, 8, 11, 14, etc..
      xOffset *= -1;
    }

    /**
     * Get the y offset
     */
    if (i > 2) {
      // Set the width to a multiple of the multiplier and assign the existing negativeness
      yOffset = this._tagWrapper.offsetHeight * multiplier * (yOffset > 0 ? 1 : -1);
    }
    if (i % 3 === 0) {
      // Flip the sign every 3 numbers
      yOffset *= -1;
    }
    console.log('iteration', i);

    this._tagWrapper.style.top = (basePosition.y + yOffset) + 'px';
    this._tagWrapper.style.left = (basePosition.x + xOffset) + 'px';
  }

执行此搜索的最佳方法是什么？我已经

了

Answer 1

我建议使用距离解决方案

point1有x1和y1

point2有x2和y2

var d = Math.sqrt（（x2- = x1）* x2 +（y2- = y1）* y2）;

链接到这里：Get distance between two points in canvas

Answer 2

像这样的工作吗？（大多数代码仅用于可视化）

＆＃13;

// just draw a table to visualize
var SIZE = 15;
for (var i = 0; i < SIZE; i++) {
  $("#a").append("<tr>");
  for (var j = 0; j < SIZE; j++) {
    $("#a > tr").last().append("<td>.</td>");
  }
}


// where to start searching from
var startX = 8;
var startY = 8;


function loop() {
  // tell the world which grid we are on
  $("#a > tr:nth-child(" + y + ") > td:nth-child(" + x + ")").css("backgroundColor", "red");

  // check if done here!!! - x and y are our positions in the grid
  // also do bounds checking here

  if (isX) {
    x = x + xDirection;
    i--;
    if (!i) {
      // switch dimension
      isX = !isX;
      i = moveFor;
      // switch direction
      xDirection *= -1;
    }
  } else {
    y = y + yDirection;
    i--;
    if (!i) {
      // switch dimension
      isX = !isX;
      // increase the width / height we are spanning
      moveFor += 1;
      i = moveFor;
      // switch direction
      yDirection *= -1;
    }
  }

  // jsut so that we have a nice animation
  if (x > 0 && y > 0 && x <= SIZE && y <= SIZE) {
    setTimeout(loop, 10)
  }
}

var x = startX;
var y = startY;
var moveFor = 1;
// our step (down) counter
var i = moveFor;
var xDirection = -1;
var yDirection = -1;
// are we moving along x or y
var isX = true;

loop();

＆＃13;

body {
  font-family: monospace;
}

td {
  height: 20px;
  width: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="a"></tbody>
</table>

＆＃13;

Answer 3

Here是围绕中心点的环中扫描点的实现。您可以定义中心点和要采样的距离，并按时钟顺序返回点列表。它在Python而不是JavaScript，但它很简单，你可以根据需要进行翻译。

从点径向搜索网格的算法

3 个答案: