無法在存儲到對象數組中設置對象屬性（JavaScript）

Question

我正在嘗試為一個簡單的基於畫布的“太空侵略者”游戲創建對象數組。 我創建了一個太空侵略者對象和一個太空侵略者數組。 我想在將每個入侵者添加到數組之前稍微改變它們的水平位置和其他屬性。 這就是我要這樣做的方式：

// Invaders
invaders = new Array();
invader = {
    x: 0,
    y: 0,
    size: 25,
    xspeed: 0.25,
    yspeed: 0.1,
    alive: 1,
    letter: ""
};

invadersMovingLeft = true;
kills = 0;

word = "interesting";
numberOfInvaders = word.length;
letters = word.split('');
letterNumber = 0;
xpos = 0;
invaderSpacing = 50;
exploding = false;
shuffledLetters = shuffle(letters);
hitLetters = "";

for (i = 0; i < numberOfInvaders; i++) {
    invader['letter'] = shuffledLetters[letterNumber];
    invader['x'] = xpos;
    xpos = xpos + invaderSpacing;
    letterNumber = letterNumber + 1;
    invaders[i] = invader;
    console.log(invaders);
}

控制台日志顯示每個入侵者具有完全相同的屬性。 知道這里出了什么問題嗎？ 我是處理對象的新手，可能是一個初學者的錯誤。

Answer 1

問題是您試圖將invader用作基礎對象，這會使所有入侵者都引用同一對象。

取而代之的是，擁有一個像類一樣的入侵者，您可以實例化以創建一個新的入侵者。 每個入侵者都是一個新的獨立實例，您可以將其推送到陣列。

function invader(){
    this.x = 0;
    this.y = 0;
    this.size = 25;
    this.xspeed = 0.25;
    this.yspeed = 0.1;
    this.alive = 1;
    this.letter = "";
}

var invaders=new Array();
var inv;

for(i=0;i<numberOfInvaders;i++){
    inv = new invader();
    inv.letter = shuffledLetters[letterNumber];
    inv.x = xpos;
    xpos = xpos+invaderSpacing;
    letterNumber = letterNumber+1;
    invaders.push(inv);
}

console.log(invaders);

Answer 2

嘗試添加

var newInvader = new invader(); 

到你的循環。 （第一行）

然后將newInvader的屬性更改為所需的屬性，然后將newInvader添加到數組而不是invader。