修改 Javascript 对象中的属性

Question

我一直在使用 p5.js 使用 JavaScript 开发一个用于精灵渲染的库。我有一个用于存储精灵信息的对象，然后将其添加到一个数组中，该数组具有一个更新每一帧的函数。

function createsprite(img, x, y, width, height, layer, tag){
    var sprite = {
        img: img,
        xpos: x,
        ypos: y,
        width: width,
        height: height,
        id: spriteid,
        clayer: layer,
        stag: tag,
        removesprite: removeobject(this.id),
        frozen: false
    };
    spriteid++;
    spritesarray.push(sprite)
    return sprite;
    
}

然后我使用这个函数来绘制精灵，这些精灵被添加到上面函数中的数组中。

function drawsprites(){  
    for(let i = 0; i < spritesarray.length; i++){
        image(spritesarray[i].img, spritesarray[i].xpos, spritesarray[i].ypos)
    }
}

我的问题是我试图修改xpos对象的 ，但它只是暂时存储，然后它重置为默认值。我不确定为什么会发生这种情况：我正在尝试修改对象的属性，但是，当使用该drawsprites()函数绘制数组时，我所做的任何修改都将sprite1重置为默认值。

function draw() {
    
    background(220);
    sprite1 = createsprite(img, 0,0,0,0, 1, "Player")
    if(keyIsDown(DOWN_ARROW)){
      
      sprite1.ypos -= 10;

    }
    startnumber++;
    
    drawsprites();
    
  }

Answer 1

问题可能是您sprite1一遍又一遍地创建draw()，这意味着您在每一帧中都会创建一个新的精灵，可能会将其移动 10 像素，但下一帧又会在 0,0 处出现一个新的精灵。

简而言之，问题不在于ypos更新的值不持久，而是精灵对象完全不持久，因为它不断被替换（重新分配给一个全新的值，每秒多次）。

尝试：

1. 添加let sprite1在代码顶部
2. 移出sprite1 = createsprite(img, 0,0,0,0, 1, "Player")和draw()移入setup()（被调用一次的地方）
3. sprite1测试按下向下箭头：内存中的同一对象应该持续存在

有关变量范围，请参阅p5.js 参考