如何使用 vue + vuex（或任何其他状态管理框架）处理游戏循环答案

【问题标题】：How to handle a game-loop with vue + vuex (or any other state-management framework)如何使用 vue + vuex（或任何其他状态管理框架）处理游戏循环
【发布时间】：2018-10-03 21:36:51
【问题描述】：

我目前正在使用 Vue 2.x 和 vuex 构建一个空闲游戏。

游戏是基于文本的，这意味着没有图形，并且使所有游戏功能都易于与 vue 集成。我的游戏功能都与 vuex 相关联，我没有注入 vue 的外部代码：vuex 处理一切。

我遇到了一个问题，我的游戏循环计算增量时间和更新游戏的次数，如果有任何帧丢失。由于我的游戏逻辑与 vuex 相关联，因此我需要使用 vuex 以 20 到 60 个动作/秒（取决于 FPS）的速度来更新我的游戏的某些部分（以秒为单位的时间会增加，直到达到某个值） .

我担心我的 vuex 开发工具被 scriptLoop 发送垃圾邮件（这使得它毫无用处），并且可能会影响游戏性能。

我不知道这是否是正确的方法，我是否遗漏了什么，或者只是状态管理框架没有为此完成（我认为）。

这是我正在谈论的代码的一些部分：

// App.vue: core component
public loop(): void {
  this.now = new Date().getTime();

  const elapsed = this.now - this.before;
  const times = Math.floor(elapsed / this.interval);

  (elapsed > this.interval) ? this.update(times) : this.update(1);

  this.before = new Date().getTime();
}

// Update some parts of the game-logic by dispatching the SCRIPT_LOOP action
public update(times: number): void {
  this.$store.dispatch('SCRIPT_LOOP', times);
}

// scripts.mutations.ts: SCRIPT_LOOP action commit this mutation
...
scriptLoop(state: ScriptsState, payload: { scripts: string[], times: number }) {
  payload.scripts.forEach((script) => {
    (state.scripts.find((scr) => scr.name === script) as Models.Script).progression += times / 30;
  });
},
...

【问题讨论】：

标签： javascript typescript vue.js redux vuex

【解决方案1】：

我对此的解决方法是创建一个外部（与 vuex 无关的）游戏逻辑，在类初始化程序中我传递我的 vuex 存储，因此我的外部游戏逻辑可以对存储状态更改甚至调度/提交做出反应如果需要。

【讨论】：