Question

我在使用Javascript时遇到了一些问题。我试图移动一个div，而一些img正在移动并反弹屏幕和div本身。我的问题是我的div正在移动，但我的img正在反对div的初始位置，而不是div在移动时获得的新位置。这就像是当div移动时反弹位置没有更新。任何人都可以帮助我吗？

Answer 1

您应该从渲染中分离模态。通过这种方式，我的意思是为屏幕创建3个对象，为div创建对象，为图像创建对象。这是你的模态。在屏幕对象中，您可以放置有助于渲染对象的信息（如高度和宽度等等）。在div和image的对象中，您可以将顶部和左侧的内容设置为模态中的位置。当您检查对象的位置时，您将查找这些对象中的值。并定期将模式渲染到网页。

还有很多可以放在对象中的全局变量和全局函数。这将简化代码并理解正在发生的事情。

最重要的是，你应该集中一个算法，给定一个（顶部，左边，高度，宽度）数组可以验证是否有任何对象相互重叠。

Answer 2

如果你从这样的东西开始，你的代码会更短，更容易理解，因为代码更少。

function getNextPossition (position, vector) {
  return {"x": position.x + vector.deltaX, "y": position.y + vector.deltaY};
}

function Rectangle (size, position) {
  this.positionTopLeft = {"x": position.x, "y": position.y};
  this.positionBottomRight = {"x": position.x + size.width - 1, "y":     position.y + size.heigth - 1};
  this.size = {"width": size.width, "heigth": size.heigth};

  this.union = function (rectangle) {
    var newPositionTopLeft = {"x": (rectangle.positionTopLeft.x < this.positionTopLeft.x ? rectangle.positionTopLeft.x :this.positionTopLeft.x ), "y": (rectangle.positionTopLeft.y < this.positionTopLeft.y ? rectangle.positionTopLeft.y :this.positionTopLeft.y )};
    var newPositionBottomRight = {"x": (rectangle.positionBottomRight.x > this.positionBottomRight.x ? rectangle.positionBottomRight.x :this.positionBottomRight.x ), "y": (rectangle.positionBottomRight.y > this.positionBottomRight.y ? rectangle.positionBottomRight.y :this.positionBottomRight.y )};
    var newSize = {"width": newPositionBottomRight.x - newPositionTopLeft.x + 1, "heigth": newPositionBottomRight.y - newPositionTopLeft.y + 1};
    return new Rectangle(newSize, newPositionTopLeft);
  };

  this.doesOverlap = function (rectangle) {
    return !(rectangle.positionBottomRight.x < this.positionTopLeft.x
             || this.positionBottomRight.x < rectangle.positionTopLeft.x
             || rectangle.positionBottomRight.y < this.positionTopLeft.y
             || this.positionBottomRight.y < rectangle.positionTopLeft.y);
  }
}

var list_obj = [];
function Obj (rectangle, vector0) {
  this.id = list_obj.length; list_obj.push(this);

  this.rect = new Rectangle(rectangle.size, rectangle.positionTopLeft);
  this.vertor = {"deltaX": vector0.deltaX, "deltaX": vector0.deltaX};

  this.getNextPossition = function() {
    var newPositionTopLeft = getNextPossition(this.rect.positionTopLeft, this.vertor);
    var newSize = {"width": this.size.width, "heigth": this.size.heigth};
    return new Rectangle(newSize, newPositionTopLeft);
  };

  this.getMovementBoundry = function(nextRect) {
    var newPositionTopLeft = getNextPossition(this.rect.positionTopLeft, this.vertor);
    var newSize = {"width": this.size.width, "heigth": this.size.heigth};
    return this.rect.union(this.getNextPossition());
  };

  this.move = function () {
    var overlap = [];
    var mov_boundry = list_obj.map(function (e,i) {return e.getMovementBoundry(e.getNextPossition());});
    for (var i = mov_boundry.length - 1; i >= 0; i -= 1) {
      if (list_obj[i].id !== this.id) {
        if (mov_boundry[this.id].rect.doesOverlap(mov_boundry[i].rect)) {
          overlap.push(list_obj[i]);
        }
      }
    }
    if (overlap.length > 0) {
      //change direction
      // TODO
      return;
    }
    this.rect = this.getNextPossition();
  }
}

更新职位（财产）

2 个答案: