Question

我正在使用直接嵌入我网站的HTML5和JavaScript创建一个网络RPG。该游戏将是针对电脑对手的单人游戏......设计将采用自上而下的2D，塞尔达风格。这将是实时的，但与电脑玩家交谈将会编写脚本......他们会说些什么，而且你会得到一些回应选择。

我正在考虑用XML编写对话框，但我被告知我应该使用JSON，因为它更容易使用JavaScript进行解析。

我在XML中看到了Abstract Chaos' answer ...

<?xml version="1.0" encoding="UTF-8"?>
    <npcs>
      <npc name="Abstract">
        <dialogue>
          <text>Welcome #{PlayerName} to Stack Exchange, What would you like to know? </text>
          <options>
            <option action="dialogue5">Tell me about Stack Exchange?</option>
            <option action="quest1">Give me quest</option>
            <option action="object1">Give me object</option>
          </options>
        </dialogue>
        <dialogue id="5">
          <text>Stack Exchange is a fast-growing network of 87 question and answer sites on diverse topics</text>
          <text>We build libraries of high-quality questions and answers, focused on the most important topics in each area of expertise</text>
        </dialogue>
      </npc>
    </npcs>

我想知道如何在JSON中实现相同的布局......

我的问题是：

如何在JSON中布局RPG对话框脚本以供JavaScript解析？
我是否可以举例说明如何在某些条件下使用JavaScript逻辑来解析JSON（例如：NPC问问题：“你能帮助我吗？”，JSON应该有“是”和“否”选项，这可能是基于玩家是否确实拥有该技能来帮助）。
JSON对话框文本将存储在项目文件夹中的单独“对话框”文件夹中...因此需要从外部访问

我在如何布局和解析JSON方面唯一发现的是：

        var json = '{"result":true,"count":1}',
            obj = JSON && JSON.parse(json) || $.parseJSON(json);

        alert(obj.result);

但它没有XML似乎具有的整洁因素。

任何帮助将不胜感激......

谢谢！

尝试加载和警告外部JSON文本文件不起作用：

HTML：

<html>
    <head>
        <title>Working with JSON</title>
        <script src="jquery.js"></script>
        <script>
            (function() {

            var data = "/JSON_TEXT.txt";    

            var first_q = data.npcs[0].dialogs[0];
            alert(first_q.text);

            }());
        </script>

    </head>
    <body>
    </body>
</html>

JSON纯文本文件：JSON_TEXT.txt

'npcs': [
            {
                'name': 'Abstract',
                'dialogs': [
                    {
                        'text': 'Welcome',
                        'options': [
                            'df', 'f'
                        ]
                    }
                ]
            }
        ]

Answer 1

如何在JSON中布局RPG对话框脚本？

你给我们的XML的等价物是（没有评论）：

// you might use a top wrapper object with a property "npcs" for this array
[
    {
        "name": "Abstract",
        "dialogues": {
// I recommend on object with dialogues by id instead of an array
             "start": {
                 "texts": [
                     "Welcome #{PlayerName} to Stack Exchange, What would you like to know?"
                 ],
                 "options": [
                     {
                         "action": "dialogue 5",
                         "text": "Tell me about Stack Exchange?"
                     }, {
                         "action": "quest 1",
                         "text": "Give me quest"
                     }, {
                         "action": "object 1",
                         "text": "Give me object"
                     }
                 ]
             },
             "5": {
                 "texts": [
                      "Stack Exchange is a fast-growing network of 87 question and answer sites on diverse topics",
                      "We build libraries of high-quality questions and answers, focused on the most important topics in each area of expertise"
                 ]
             }
         }
         // further properties of the NPC like objects and quests maybe
    },
    … // further NPCs
]

如何解析JSON？

请参阅Parse JSON in JavaScript?。

var json = {…};
var data = JSON && JSON.parse(json) || $.parseJSON(json);

哎呀，不！这不是JSON，这只是JavaScript中的对象文字。您可以像

一样使用它

var data = {…};

和data将是您的对象。只有在将JSON作为字符串时才需要解析JSON，例如当您通过ajax加载文件时。

在某些条件下解析JSON的JavaScript逻辑

这是你的游戏逻辑，我们无法帮助你。但是您不需要在那里解析JSON，您只需要访问已经解析过的数据。请参阅Access / process (nested) objects, arrays or JSON。

Answer 2

有些人认为JSON比XML更难阅读。我认为它更干净，更容易使用，特别是如果你想用JS解析它。

那就是说，我不确定你的问题是什么 - 你已经拥有XML数据，所以只需将其转换为JSON即可。您可以在需要命名键时使用数组（[]）作为列表和对象（{}）：

{
    'npcs': [
        {
            'name': 'Abstract',
            'dialogs': [
                {
                    'text': 'Welcome #{PlayerName} to Stack Exchange, What would you like to know?',
                    'options': [
                        //options here
                    ]
                },
                //next dialog object here
            ]
        },
        //next npc object here
    ]
}

所以，就像你说的那样，首先你需要解析JSON字符串：

var json; //contains the json string, perhaps retrieved from a URL via AJAX
data = JSON && JSON.parse(json) || $.parseJSON(json);

您也可以首先将JSON对象分配给JS变量（例如，在某个地方的.js文件中），您根本不需要解析。请务必不要污染全球范围。

解析后，data是一个普通的JS对象。您可以像访问任何其他对象一样访问其属性。因此，要从第一个NPC访问第一个问题，请执行以下操作：

var first_question = data.npcs[0].dialogs[0];

让我们提醒问题：

alert(first_question.text);

您可以访问以下选项：

first_question.options;

您询问了如何从外部文件加载JSON数据。通常的方法是通过AJAX加载文件的URL。这是一个很好的教程，用于使用vanilla JavaScript制作AJAX请求：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

但是没有太多理由使用vanilla JavaScript手动编写AJAX请求。我建议使用类似jQuery的库，它具有便捷的AJAX功能，如.ajax和速记函数.get。以下是使用.get的示例：

var data;                          //will hold the parsed JSON object
var json_url = 'json.txt';         //URL of your JSON (just a plain text file)
$.get(json_url, function(json) {
    data = JSON && JSON.parse(json) || $.parseJSON(json);
});

//use data here

如何构造和解析JSON

2 个答案: