отдельный al oop в Html5 модуль игрового дизайна - PullRequest
Новая
       49

отдельный al oop в Html5 модуль игрового дизайна

0 голосов
/ 26 мая 2020
• 1000 Engine", как и другие компоненты, я столкнулся с трудностями, потому что он содержит мою функцию рендеринга и обновления, так что какое решение является лучшим, пожалуйста. Заранее спасибо Это мой основной скрипт: 
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";
});

1 Ответ

1 голос
/ 26 мая 2020

Я бы передал эти зависимости через функцию-оболочку для экспорта, например: 

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

Но обратите внимание, что у вас больше этих двух зависимостей.

...