Javascript 通常以固定的间隔调用，比如每秒调用60次，但是对于这个游戏，我们只需要响应用户。在更复杂的游戏中，更新函数调用处理许多子系统，如物理、动画、游戏逻辑等。出于我们的目的，当我们收到用户的新决定时，我们的游戏会进行“步骤” const update = (nextpoint) => { state.index = nextpoint; render(); };

代码的最后一部分只是呈现当前游戏状态。render函数会查看当前状态，并确保UI反映这些值。

ui

对象只允许我以语义的方式组织ui元素，而不是必需的

---

如果您以前做过任何web编程，您可能会发现这与MVC或反应式ui框架非常相似。数据单向流动。

听起来像是在编写决策树（有点像JavaScript中的Black Mirror-Bandersnatch）。Q:[我可以在哪里]存储所有文本和选项。以及如何访问文本和选项？答：为什么不将数据保存在Json文件中，并将Json直接读取到JS对象中？这里有一个很好的例子：这个链接可能也有帮助：嘿，tneilson08：如果我的答案有帮助，请告诉我！看起来很有用，伊姆霍。我猜有人很不喜欢我的答案，把我所有的答案都看了一遍，然后每个答案都投了反对票。人啊！不管怎样，希望我的回答能帮上忙。太棒了，真管用！我确实更喜欢你的原始答案，因为当有50多个对话部分时，使用数组会让人弄不清楚我在哪个数字上！您的数据结构建议使用数组而不是对象。很好，在这种情况下，数组也可以工作。但是具有

nextpoint

的对象很容易成为日期时间组合或其他基于故事情节的键。这是使用jQuery，根本没有问过这个问题。嗨，NVRM：谢谢你指出这一点。jQuery是一个JavaScript框架，上面的代码旨在解决OP的问题：我真的很难弄清楚在哪里存储所有的文本和选项。以及如何访问文本和选项。严格来说，这不是JSON对象，因为键不是字符串。感谢您对其进行扩展！看到这些解决方案，我意识到我仍然需要学习更多的JS基础知识。

const sales = [
    {
        action: "Salesman Chad wants to talk!",
        opt1: {
            text: "Tell him you're not interested",
            nextpoint: 1,
        },
        opt2:  {
            text: "Hear him out",
            nextpoint: 2,
        },
    },
    {
        action: "He has a rebuttal for that! 'Sir, a classy man like you needs this car!'",
        opt1: {
            text: "We're not even at a dealership!",
            nextpoint: 0,
        },
        opt2: {
            text: "Ooo a new car",
            nextpoint: 2,
        }
    },
    {
        action: "Ssssoooooooo, what kind of TV service do you have?",
        opt1: {
            text: "Tell him your landlord pays for it",
            nextpoint: 1,
        },
        opt2: {
            text: "Tell him you don't watch much TV",
            nextpoint: 0,
        }
    }
];

const state = {
  index: 0,
  data: sales,
  get current() {
    return this.data[this.index]
  }
};

const ui = {
  action: document.querySelector('#action-text'),
  left: document.querySelector('#option-1'),
  right: document.querySelector('#option-2')
};

const update = (nextpoint) => {
  state.index = nextpoint;
  render();
};

const render = () => {
  ui.action.innerText = state.current.action;
  ui.left.innerText = state.current.opt1.text;
  ui.right.innerText = state.current.opt2.text;
};

ui.left.addEventListener('click', () => update(state.current.opt1.nextpoint));
ui.right.addEventListener('click', () => update(state.current.opt2.nextpoint));

render();

const state = {
  index: 0,
  data: sales,
  get current() {
    return this.data[this.index]
  }
};

const update = (nextpoint) => {
  state.index = nextpoint;
  render();
};