如何使用函数的参数来使用对象的数据?

时间:2019-05-04 01:19:04

标签: javascript arrays function object ecmascript-6

我正在尝试创建一个我想加载关卡的游戏。我正在尝试以简化方式进行设置。

我已经尝试使用:

function loadLevel(name) { return fetch(`./levels/${name}.json`).then(r => r.json());. 

这没有用,因为它甚至无法加载我在另一个文件中保存的级别。我使用console.log进行了测试。这是我的json,保存在名为1-1的文件中:

{
  "backgrounds": [
    {
      "tile": "sky",
      "ranges": [
        [
          0, 25,
          0, 14
        ]
      ]
    }
  ]
}

我认为拥有一个可以设置我的水平的物体可以解决问题:

var levels = {
    "1-1": {
        backgrounds: [
            {
                tile: "sky",
                ranges: [[0, 25, 0, 16]]
            }
        ]
    }
}

以上是我需要每个变量的方式,然后最终需要将其传递给类似这样的内容:

function drawBackground(backgrounds, ctx, sprites) {
    backgrounds.ranges.forEach(([x1, x2, y1, y2]) => {
        for (let x = x1; x < x2; x++) {
            for(let y = y1; y < y2; y++) {
                sprites.drawTile(background.tile, ctx, x, y);
            }
        }
    });
}

但是,当我要加载关卡时会出现问题。我有运行此函数:

loadImage('./img/tiles.PNG').then(image => { //loadImage is a function that runs an image
    const sprites = new SpriteSheet(image, 16, 16); //Takes in image and tile size

    sprites.define('ground', 0, 0); //sets a key for the tile and a position on the spritesheet image
    sprites.define('sky', 3, 23);
    loadLevel('1-1')// *This is the function I would like to pass the object thru
    .then(level => {
    drawBackground(level.backgrounds[0], ctx, sprites); //Does the above
});

现在我列出了所有相关的代码,现在这是我的问题:

我想编辑loadLevel函数,以便可以选择一个要使用对象加载的水平,但不确定如何做到这一点。我的意思是这样做类似于fetch()方法。另一个可能的解决方案是通过drawBackground()函数运行它。

//maybe like this:
function drawBackground(name, ctx, sprites) {
//Below, I know ${name} will not work but an idea of a possible solution
  levels.${name}.backgrounds.ranges.forEach(([x1, x2, y1, y2]) => { 
    for (let x = x1; x < x2; x++) {
      for(let y = y1; y < y2; y++) {
        sprites.drawTile(background.tile, ctx, x, y);
      }
    }
  });
}

我要做的就是加载关卡及其属性以进行绘制。如果您有任何疑问,无论是完整的/更多的代码还是其他的答案/解释,我都可以为您提供更多帮助。

编辑:通过访问对象的方法来解决此问题的一种可能方法可以在此处的另一个问题中找到:Dynamically access object property using variable

1 个答案:

答案 0 :(得分:1)

使用方括号表示法:

function drawBackground(name, ctx, sprites) {
    levels[name].backgrounds.ranges.forEach(...);
}