I am trying to create a game in which I would like to load a level. I am trying to set this up in a way to simplify it.
I already tried using:
function loadLevel(name) { return fetch(`./levels/${name}.json`).then(r => r.json());.
This did not work as it would not even load the level I have saved in another file. I tested this using console.log. This was my json, saved in a file named 1-1:
{
"backgrounds": [
{
"tile": "sky",
"ranges": [
[
0, 25,
0, 14
]
]
}
]
}
I thought that having an object that sets my level would do the trick:
var levels = {
"1-1": {
backgrounds: [
{
tile: "sky",
ranges: [[0, 25, 0, 16]]
}
]
}
}
Above is how I need to have each variable, and then I need to pass it eventually through something like this:
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);
}
}
});
}
However, the issue comes when I want to load a level. I have a function that runs this:
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
});
Now that I have listed all of my code that is relevant, now this is my issue:
I want to edit the loadLevel function so I can pick a level to load using an object, but not sure exactly how I can do so. I meant to do it similar to the fetch() method. Another possible solution would be to run it through the drawBackground() function.
//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);
}
}
});
}
All I need to do is load the level and it's attributes in order to draw it. If you have any questions, I can provide more assistance in my question if needed, whether it be in full/more code or other answers/explanations.
EDIT: A possible way of fixing this via the method of accessing the object can be found at another question here: Dynamically access object property using variable
