javascript - 在使用 JSON 创建的游戏中添加多个级别

Question

对于我的一个学校项目，我必须使用 Javascript 创建一个游戏。我的 Javascript 经验非常少，因此我真的很困惑如何在我的游戏中创建多个关卡。使用 JSON，我加载 block 供 Mario 行走:

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 创建它的最佳方法是什么？

我的 block 的 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
}