Adding multiple levels in game created with JSON

Question

For one of my school projects, I have to create a game with Javascript. My Javascript experience is very minimal, and therefore I'm really stuck on how to create multiple levels within my game. With JSON, I load blocks for Mario to walk on:

createBlocks: function () {
        console.log('game -> createBlocks');

        $.getJSON('js/boxes.json', function (data) {

            data.boxes.level1.forEach(function (blockData) {

                this.stage.removeChild(this.block.el);

                var block = new Block(blockData);
                this.block.push(block);
                this.stage.addChild(block.el);

            }.bind(this));
        }.bind(this));
    }

With the function "createStars" the game loads another JSON. My goal is to have the game switch to another level with every 5 stars being collected. What is the best way to create this with JSON?

My JSON file for the blocks are created as follow:

{
"boxes": {
    "level1": [
        {
            "x": 0,
            "y": 115,
            "width": 25,
            "height": 25
        },
        {
            "x": 25,
            "y": 115,
            "width": 25,
            "height": 25
        }
    ],
    "level2": [
        {
            "x": 0,
            "y": 95,
            "width": 25,
            "height": 25
        }
    ]
}
}

Please let me know if you need my complete code to answer my question? I can also give a link to the game as it currently is hosted on my own site: http://school.carlavanloon.com/cp/

Furthermore, I'd like the game to stop the time after collecting 20 stars. This will then be the end time for the user of the game.

Many thanks in advance for your reply. And please let me know if I need to give any additional information.

Answer 1

Instead of making your json file around "boxes" you should design the json structure top down, first load game json, which contains level objects - which contain boxes arrays etc. ie. something like this

var json = {
    "game_data": {
    "some_global_settings" : {"game_speed": 30, "theme": "dark"},
    "level1": {
        "boxes": [
         {
            "x": 0,
            "y": 115,
            "width": 25,
            "height": 25
         },
         {
            "x": 25,
            "y": 115,
            "width": 25,
            "height": 25
         }
        ],
        "stars": [
         {
            "x": 0,
            "y": 50,
            "width": 25,
            "height": 25
         },
         {
            "x": 125,
            "y": 120,
            "width": 25,
            "height": 25
         }
        ],
        "player_position" : {"x": 0,"y": 50},
        "victory_condition" : {"stars_required" : 5, "time_limit" : "10min"}
       },
       "level2": {"same structure as above with different data" : 1}

    }
    }

and then make a level builder function which picks a level object and creates everything in it. To reload a new level, check the number of stars remaining, if its 0, call your createLevel(gamelevel) with n+1 for building the next level.

below is pseudo code sample.

Every time user collects a star, you will check if it was the last star required, and if so, increment the level counter and call level builder function which could be something like this

function buildLevel( levelNr ) {
    var gdata = json.game_data["level"+levelNr];
    //check if next level exists in game_data object
    if (!gdata) { 
        finishGame();
        return false;
    }

    //next level data exists, so build whats in it
    //clear level from previous stuff
    clearLevel();//perhaps replace canvas with new one

    createBoxes( gdata.boxes);
    createStars( gdata.stars);
    createPlayer( gdata.player_position);

    //everything is ready, add listeners / timers etc, and start the game
}