在使用 JSON 创建的游戏中添加多个关卡

Question

对于我的一个学校项目，我必须用Javascript创建一个游戏。我的Javascript经验非常少，因此我真的坚持如何在游戏中创建多个关卡。使用 JSON，我加载块供马里奥行走：

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));
    }

使用"createStars"函数，游戏加载另一个JSON。我的目标是让游戏切换到另一个级别，每收集 5 颗星。使用 JSON 创建它的最佳方法是什么？

我的块的 JSON 文件创建如下：

{
"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
        }
    ]
}
}

如果您需要我的完整代码来回答我的问题，请告诉我？我还可以提供一个游戏的链接，因为它目前托管在我自己的网站上：http://school.carlavanloon.com/cp/

此外，我希望游戏在收集 20 颗星星后停止时间。这将是游戏用户的结束时间。

提前感谢您的回复。如果我需要提供任何其他信息，请告诉我。

Answer 1

与其围绕"盒子"制作 json 文件，不如自上而下设计 json 结构，首先加载游戏 JSON，其中包含关卡对象 - 其中包含框数组等。像这样的东西

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}
    }
    }

然后创建一个关卡生成器函数，该函数选择一个关卡对象并在其中创建所有内容。要重新加载新关卡，请检查剩余的星数，如果是 0，请使用 n+1 调用您的 createLevel（gamelevel） 来构建下一个关卡。

下面是伪代码示例。

每次用户收集星星时，您都会检查它是否是所需的最后一个星星，如果是，则增加关卡计数器并调用关卡生成器函数，这可能是这样的

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
}