更新位置（屬性）

Question

我遇到一些Javascript問題。我試圖移動一個div，而一些img正在移動並反彈屏幕和div本身。我的問題是，我的div正在移動，但我的img反彈到div的初始位置，而不是div移動時獲得的新位置。這就好像在div移動時反彈位置沒有更新。誰能幫我？

Answer 1

你應該從渲染中分離出模態。因此，我的意思是創建3個對象爲屏幕，爲您的div和爲圖像。這是你的模式。在屏幕對象中，你放置了可以幫助你渲染對象的信息（像高度和寬度等東西）。在你的div和圖像的對象中，你把top和left放在模態中的位置。當你檢查對象的位置時，你需要查找這些對象中的值。並定期將模態呈現給網頁。

仍然有很多全局變量和全局函數可以放入對象中。這將簡化代碼並理解正在發生的事情。

大多數情況下，你應該集中一個給定數組（top，left，heigth，width）的算法來驗證對象是否有重疊。

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(); 
    } 
}