javascript - 如何使用 vue + vuex(或任何其他状态管理框架)处理游戏循环

Question

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

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

我遇到了一个问题，如果有任何帧丢失，我的游戏循环会计算增量时间和更新游戏的次数。由于我的游戏逻辑与 vuex 相关联，我需要使用 vuex 以每秒 20 到 60 个 Action (取决于 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;
  });
},
...

Answer 1

我的解决方法是创建一个外部(非 vuex 相关)游戏逻辑，在类初始化器中我传递我的 vuex 存储，因此我的外部游戏逻辑可以对存储状态变化使用react，甚至分派(dispatch)/提交如果需要的话。