javascript - 在 Html5 模块游戏设计中分离一个循环
问题描述
我在不使用任何游戏框架的情况下制作 Html5 游戏,我的脚本运行得很好,但我想像其他组件一样将我的循环函数调用“frameLoop”分离到一个独立的 Es6 类模块调用“ 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";
});
解决方案
我将通过导出周围的包装函数传递这些依赖项,如下所示:
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);
但请注意,您拥有的不仅仅是这两个依赖项。
推荐阅读
- javascript - 我正在尝试将 pdf 文件从节点服务器下载到反应客户端,但是当我打开它时,它显示为空白
- php - 从维基百科一一获取电影部分
- c# - 根据客人数量的最大计数合并重叠间隔
- mapbox - 使用 Mapbox-gl-js 按 JSON 属性过滤聚类点
- c - 算法工具箱:使用括号最大化算术表达式?失败的测试用例 #5/19
- c++ - 使用 OOP 有效地处理和读取轨迹文件
- google-sheets - 带有 AND 语句的 Google 表格多嵌套 IF 无法正常工作
- django - 从下拉列表中选择数据并将其保存到 Django 中的数据库
- postgresql - 从脚本读取数据的 psql 复制
- javascript - Puppeteer 集群示例抛出错误:无法获取浏览器页面