Solution 1 :

I would pass those dependencies in via a wrapper function around the export, like so:

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);
  };

And then prepare it in the importing file like so:

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

But note that you have more than those two dependencies.

Problem :

i’m making an Html5 game without using any game framework, my script run very well, but i want to separate my loop function call “frameLoop” in an independant Es6 class module call “Engine” like the others components, i facing difficulties because it contain my render and update function, so what is the best solution please. Thanks in advance
This is my main script:

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";
});

By

Leave a Reply

Your email address will not be published. Required fields are marked *