修改 Javascript 对象的属性

Question

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

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

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

简而言之，问题不在于 ypos 更新后的值不会持续存在，而是精灵对象完全不会持续存在，因为它不断被替换（re-assigned 到一个全新的一个，一秒钟很多次）。

尝试：

在您的代码顶部添加 let sprite1
将 sprite1 = createsprite(img, 0,0,0,0, 1, "Player") 移出 draw() 并移至 setup()（调用一次）
测试按下向下箭头：内存中相同的 sprite1 对象应该保持不变

见p5.js reference for variable scope

修改 Javascript 对象的属性

Modifying properies of in a Javascript object

javascript

p5.js