javascript - 无法设置对象属性以存储到对象数组(JavaScript)

Question

我正在尝试为一个简单的基于 Canvas 的太空入侵者游戏创建对象数组。 我创建了一个太空入侵者对象和一系列太空入侵者。我想在将每个入侵者添加到数组之前稍微更改其水平位置和其他属性。这就是我尝试做的事情:

// 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);