分离HTML5模块游戏设计中的循环

Question

我在不使用任何游戏框架的情况下制作Html5游戏，我的脚本运行得很好，但是我想像其他方法一样在独立的Es6类模块调用“ Engine”中将循环函数调用“ frameLoop”分开组件，我面临困难，因为它包含我的渲染和更新功能，所以最好的解决方案是什么。提前致谢这是我的主要脚本：

import { Display } from "./display.js";
import { Game } from "./game.js";
import { Controller } from "./controller.js";

window.addEventListener("load", function () {
  //-------------------------------------------------Event Listener

  let input = (event) => {
    controller.KeyDownUp(event.type, event.keyCode);
  };

  //--------------------------------------------------Render

  let render = () => {
    //clear canvas with a fill rect
    display.fill(
      game.universe.x,
      game.universe.y,
      game.universe.w,
      game.universe.h,
      game.universe.color
    );

    display.drawMap(game.universe.map, game.universe.columns);

    // display the character
    display.drawCharacter(
      game.universe.player.x,
      game.universe.player.y,
      game.universe.player.w,
      game.universe.player.h,
      game.universe.player.color
    );
  };

  //--------------------------------------------------update

  let update = () => {
    if (controller.left.active) {
      game.universe.player.moveLeft();
      console.log(`left position: ${Math.round(game.universe.player.x)}`);
    }
    if (controller.right.active) {
      game.universe.player.moveRight();
      console.log(`right position: ${Math.round(game.universe.player.x)}`);
    }
    if (controller.up.active) {
      game.universe.player.jump();
      controller.up.active = false;
      console.log(`top position: ${Math.round(game.universe.player.x)}`);
    }

    game.update();
  };

  //--------------------------------------------------Instances

  let controller = new Controller();
  let display = new Display(576, 480);
  let game = new Game();

  //--------------------------------------------------Initialize

  window.addEventListener("keydown", input);
  window.addEventListener("keyup", input);


  //-------------------- the section of code i want to separate-------------------------------------------------------------------------------------------------

  function timestamp() {
    return window.performance && window.performance.now
      ? window.performance.now()
      : new Date().getTime();
  }

  let now,
    deltaTime = 0,
    last = timestamp(),
    step = 1 / 60;

  function frameLoop() {
    now = timestamp();
    deltaTime = deltaTime + Math.min(1, (now - last) / 1000);
    while (deltaTime > step) {
      deltaTime = deltaTime - step;
      update(step);
    }
    render(deltaTime);
    last = now;
    requestAnimationFrame(frameLoop);
  }

  display.tile_sheet.image.addEventListener(
    "load",
    function (event) {
      requestAnimationFrame(frameLoop);
    },
    { once: true }
  );
  display.tile_sheet.image.src = "Terrain.png";
});

Answer 1

我将通过导出过程中的包装函数传递这些依赖关系，如下所示：

export default (render, update) => function frameLoop() {
    now = timestamp();
    deltaTime = deltaTime + Math.min(1, (now - last) / 1000);
    while (deltaTime > step) {
      deltaTime = deltaTime - step;
      update(step);
    }
    render(deltaTime);
    last = now;
    requestAnimationFrame(frameLoop);
  };

然后像下面这样在导入文件中进行准备：

import foo from './module.js';
const frameLoop = foo(render, update);