JavaScript系列（49）--游戏引擎实现详解

JavaScript游戏引擎实现详解 🎮

今天，让我们深入探讨JavaScript的游戏引擎实现。游戏引擎是一个复杂的系统，它需要处理渲染、物理、音频、输入等多个方面，让我们一步步实现一个基础但功能完整的游戏引擎。

游戏引擎基础概念 🌟

💡 小知识：游戏引擎是一个为游戏开发提供核心功能的框架，它通常包括渲染系统、物理引擎、音频系统、输入处理、资源管理等模块。通过合理的架构设计，这些模块可以协同工作，为游戏开发提供强大的支持。

基本实现 📊

// 1. 游戏引擎核心
class GameEngine {constructor(canvas) {this.canvas = canvas;this.context = canvas.getContext('2d');// 核心系统this.renderer = new Renderer(this.context);this.physics = new PhysicsSystem();this.input = new InputManager();this.audio = new AudioSystem();// 游戏状态this.scenes = new Map();this.currentScene = null;this.isRunning = false;// 时间管理this.lastTime = 0;this.deltaTime = 0;}// 初始化引擎init() {this.input.init();this.audio.init();window.requestAnimationFrame(this.gameLoop.bind(this));}// 游戏主循环gameLoop(timestamp) {// 计算时间增量this.deltaTime = (timestamp - this.lastTime) / 1000;this.lastTime = timestamp;if (this.isRunning && this.currentScene) {this.update();this.render();}window.requestAnimationFrame(this.gameLoop.bind(this));}// 更新游戏状态update() {this.physics.update(this.deltaTime);this.currentScene.update(this.deltaTime);this.input.update();}// 渲染游戏画面render() {this.context.clearRect(0, 0,this.canvas.width,this.canvas.height);this.currentScene.render(this.renderer);}// 场景管理addScene(name, scene) {this.scenes.set(name, scene);}loadScene(name) {const scene = this.scenes.get(name);if (scene) {if (this.currentScene) {this.currentScene.onExit();}this.currentScene = scene;scene.onEnter();}}
}// 2. 渲染系统
class Renderer {constructor(context) {this.context = context;this.camera = new Camera();}// 绘制精灵drawSprite(sprite) {const { position, scale, rotation } = sprite.transform;const { texture, width, height } = sprite;this.context.save();// 应用相机变换this.context.translate(-this.camera.position.x,-this.camera.position.y);// 应用精灵变换this.context.translate(position.x, position.y);this.context.rotate(rotation);this.context.scale(scale.x, scale.y);// 绘制精灵this.context.drawImage(texture,-width / 2,-height / 2,width,height);this.context.restore();}// 绘制图元drawPrimitive(primitive) {this.context.save();this.context.fillStyle = primitive.color;this.context.beginPath();switch (primitive.type) {case 'rectangle':this.context.fillRect(primitive.x,primitive.y,primitive.width,primitive.height);break;case 'circle':this.context.arc(primitive.x,primitive.y,primitive.radius,0,Math.PI * 2);this.context.fill();break;}this.context.restore();}
}// 3. 物理系统
class PhysicsSystem {constructor() {this.bodies = [];this.gravity = new Vector2(0, 9.81);}addBody(body) {this.bodies.push(body);}removeBody(body) {const index = this.bodies.indexOf(body);if (index !== -1) {this.bodies.splice(index, 1);}}update(deltaTime) {// 更新物理体for (const body of this.bodies) {if (!body.isStatic) {// 应用重力body.velocity.add(Vector2.multiply(this.gravity, deltaTime));// 更新位置body.position.add(Vector2.multiply(body.velocity, deltaTime));}}// 碰撞检测和处理this.detectCollisions();}detectCollisions() {for (let i = 0; i < this.bodies.length; i++) {for (let j = i + 1; j < this.bodies.length; j++) {const bodyA = this.bodies[i];const bodyB = this.bodies[j];if (this.checkCollision(bodyA, bodyB)) {this.resolveCollision(bodyA, bodyB);}}}}
}

高级功能实现 🚀

// 1. 实体组件系统
class Entity {constructor() {this.components = new Map();this.id = Entity.nextId++;}addComponent(component) {component.entity = this;this.components.set(component.constructor, component);}getComponent(componentClass) {return this.components.get(componentClass);}removeComponent(componentClass) {const component = this.components.get(componentClass);if (component) {component.entity = null;this.components.delete(componentClass);}}update(deltaTime) {for (const component of this.components.values()) {if (component.update) {component.update(deltaTime);}}}
}// 2. 组件系统
class Component {constructor() {this.entity = null;}// 生命周期方法onAdd() {}onRemove() {}update(deltaTime) {}
}class TransformComponent extends Component {constructor() {super();this.position = new Vector2();this.rotation = 0;this.scale = new Vector2(1, 1);}
}class SpriteComponent extends Component {constructor(texture) {super();this.texture = texture;this.width = texture.width;this.height = texture.height;}render(renderer) {const transform = this.entity.getComponent(TransformComponent);if (transform) {renderer.drawSprite({texture: this.texture,width: this.width,height: this.height,transform});}}
}// 3. 场景管理
class Scene {constructor() {this.entities = new Set();this.systems = new Map();}addEntity(entity) {this.entities.add(entity);}removeEntity(entity) {this.entities.delete(entity);}addSystem(system) {system.scene = this;this.systems.set(system.constructor, system);}update(deltaTime) {// 更新所有系统for (const system of this.systems.values()) {system.update(deltaTime);}// 更新所有实体for (const entity of this.entities) {entity.update(deltaTime);}}render(renderer) {for (const entity of this.entities) {const sprite = entity.getComponent(SpriteComponent);if (sprite) {sprite.render(renderer);}}}// 场景生命周期onEnter() {}onExit() {}
}

实际应用场景 💼

// 1. 游戏对象实现
class GameObject extends Entity {constructor(x = 0, y = 0) {super();// 添加基本组件const transform = new TransformComponent();transform.position.set(x, y);this.addComponent(transform);}// 便捷方法setPosition(x, y) {const transform = this.getComponent(TransformComponent);transform.position.set(x, y);}setRotation(angle) {const transform = this.getComponent(TransformComponent);transform.rotation = angle;}setScale(x, y) {const transform = this.getComponent(TransformComponent);transform.scale.set(x, y);}
}// 2. 游戏角色实现
class Player extends GameObject {constructor(x, y) {super(x, y);// 添加精灵组件const sprite = new SpriteComponent(ResourceManager.getTexture('player'));this.addComponent(sprite);// 添加物理组件const physics = new PhysicsComponent();physics.mass = 1;physics.friction = 0.1;this.addComponent(physics);// 添加输入组件const input = new InputComponent();input.bindKey('ArrowLeft', this.moveLeft.bind(this));input.bindKey('ArrowRight', this.moveRight.bind(this));input.bindKey('Space', this.jump.bind(this));this.addComponent(input);}moveLeft() {const physics = this.getComponent(PhysicsComponent);physics.applyForce(new Vector2(-100, 0));}moveRight() {const physics = this.getComponent(PhysicsComponent);physics.applyForce(new Vector2(100, 0));}jump() {const physics = this.getComponent(PhysicsComponent);if (physics.isGrounded) {physics.applyImpulse(new Vector2(0, -200));}}
}// 3. 游戏关卡实现
class GameLevel extends Scene {constructor() {super();// 创建玩家const player = new Player(100, 100);this.addEntity(player);// 创建平台this.createPlatform(0, 500, 800, 20);this.createPlatform(300, 400, 200, 20);this.createPlatform(100, 300, 200, 20);// 添加系统this.addSystem(new PhysicsSystem());this.addSystem(new CollisionSystem());this.addSystem(new RenderSystem());}createPlatform(x, y, width, height) {const platform = new GameObject(x, y);const sprite = new SpriteComponent(ResourceManager.getTexture('platform'));sprite.width = width;sprite.height = height;platform.addComponent(sprite);const physics = new PhysicsComponent();physics.isStatic = true;physics.setBox(width, height);platform.addComponent(physics);this.addEntity(platform);}
}

性能优化技巧 ⚡

// 1. 对象池系统
class ObjectPool {constructor(factory, initialSize = 10) {this.factory = factory;this.activeObjects = new Set();this.inactiveObjects = [];// 预创建对象for (let i = 0; i < initialSize; i++) {this.inactiveObjects.push(this.factory());}}spawn(x, y) {let object;if (this.inactiveObjects.length > 0) {object = this.inactiveObjects.pop();} else {object = this.factory();}object.setPosition(x, y);this.activeObjects.add(object);return object;}despawn(object) {if (this.activeObjects.has(object)) {this.activeObjects.delete(object);this.inactiveObjects.push(object);}}update(deltaTime) {for (const object of this.activeObjects) {object.update(deltaTime);}}
}// 2. 四叉树空间分区
class QuadTree {constructor(bounds, maxObjects = 10, maxLevels = 4, level = 0) {this.bounds = bounds;this.maxObjects = maxObjects;this.maxLevels = maxLevels;this.level = level;this.objects = [];this.nodes = [];}clear() {this.objects = [];for (let i = 0; i < this.nodes.length; i++) {if (this.nodes[i]) {this.nodes[i].clear();this.nodes[i] = null;}}}split() {const subWidth = this.bounds.width / 2;const subHeight = this.bounds.height / 2;const x = this.bounds.x;const y = this.bounds.y;this.nodes[0] = new QuadTree({x: x + subWidth,y: y,width: subWidth,height: subHeight}, this.maxObjects, this.maxLevels, this.level + 1);this.nodes[1] = new QuadTree({x: x,y: y,width: subWidth,height: subHeight}, this.maxObjects, this.maxLevels, this.level + 1);this.nodes[2] = new QuadTree({x: x,y: y + subHeight,width: subWidth,height: subHeight}, this.maxObjects, this.maxLevels, this.level + 1);this.nodes[3] = new QuadTree({x: x + subWidth,y: y + subHeight,width: subWidth,height: subHeight}, this.maxObjects, this.maxLevels, this.level + 1);}getIndex(rect) {const verticalMidpoint = this.bounds.x + (this.bounds.width / 2);const horizontalMidpoint = this.bounds.y + (this.bounds.height / 2);const topQuadrant = (rect.y < horizontalMidpoint && rect.y + rect.height < horizontalMidpoint);const bottomQuadrant = (rect.y > horizontalMidpoint);if (rect.x < verticalMidpoint && rect.x + rect.width < verticalMidpoint) {if (topQuadrant) {return 1;} else if (bottomQuadrant) {return 2;}} else if (rect.x > verticalMidpoint) {if (topQuadrant) {return 0;} else if (bottomQuadrant) {return 3;}}return -1;}
}// 3. 渲染优化
class RenderOptimizer {constructor(renderer) {this.renderer = renderer;this.visibleObjects = new Set();this.frustum = new Frustum();}updateVisibility(camera, objects) {this.visibleObjects.clear();this.frustum.updateFromCamera(camera);for (const object of objects) {if (this.frustum.intersectsBox(object.getBoundingBox())) {this.visibleObjects.add(object);}}}render() {// 按材质排序const sortedObjects = Array.from(this.visibleObjects).sort((a, b) => a.material.id - b.material.id);// 批量渲染let currentMaterial = null;for (const object of sortedObjects) {if (object.material !== currentMaterial) {currentMaterial = object.material;this.renderer.setMaterial(currentMaterial);}this.renderer.renderObject(object);}}
}

最佳实践建议 💡

  1. 游戏引擎架构设计
// 1. 模块化设计
class GameModule {constructor(engine) {this.engine = engine;}init() {}update(deltaTime) {}destroy() {}
}// 2. 事件系统
class EventSystem extends GameModule {constructor(engine) {super(engine);this.listeners = new Map();}on(event, callback) {if (!this.listeners.has(event)) {this.listeners.set(event, new Set());}this.listeners.get(event).add(callback);}off(event, callback) {const callbacks = this.listeners.get(event);if (callbacks) {callbacks.delete(callback);}}emit(event, data) {const callbacks = this.listeners.get(event);if (callbacks) {for (const callback of callbacks) {callback(data);}}}
}// 3. 资源管理
class ResourceManager extends GameModule {constructor(engine) {super(engine);this.resources = new Map();this.loading = new Map();}async load(url, type) {if (this.resources.has(url)) {return this.resources.get(url);}if (this.loading.has(url)) {return this.loading.get(url);}const loadPromise = this.loadResource(url, type);this.loading.set(url, loadPromise);try {const resource = await loadPromise;this.resources.set(url, resource);this.loading.delete(url);return resource;} catch (error) {this.loading.delete(url);throw error;}}async loadResource(url, type) {switch (type) {case 'image':return this.loadImage(url);case 'audio':return this.loadAudio(url);case 'json':return this.loadJSON(url);default:throw new Error(`Unsupported resource type: ${type}`);}}
}

结语 📝

JavaScript游戏引擎的实现是一个复杂但有趣的主题。通过本文，我们学习了：

  1. 游戏引擎的基本架构和核心系统
  2. 实体组件系统的实现
  3. 场景管理和游戏对象
  4. 性能优化技巧
  5. 最佳实践和设计模式

💡 学习建议：在实现游戏引擎时，要注意模块之间的解耦和性能优化。合理使用设计模式和优化策略，可以显著提升游戏的运行效率。

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/67405.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安装zsh并美化

安装zsh并美化

0 Zsh 是一种功能强大的 shell&#xff0c;通常用于替代默认的 Bash shell。它为命令行提供了更多的功能&#xff0c;例如自动补全、强大的模式匹配和主题支持等。 Oh My Zsh 是用于管理 Zsh 配置的框架。 powerlevel10k是样式&#xff0c;通过p10k configure脚本可以调节自己…
阅读更多...
GMSL 明星产品之 MAX96717

GMSL 明星产品之 MAX96717

在上一篇文章中&#xff0c;我们详细介绍了车载市场中爆火的 GMSL 到底是个啥 &#xff1a; 揭开 GMSL 的面纱&#xff1a;自动驾驶背后的隐藏技术。今天我们就来详细了解下如今在摄像头侧超级火爆的加串器&#xff1a;MAX96717。 MAX96717 系列有三款产品&#xff1a; MAX967…
阅读更多...
线段树 算法

线段树 算法

文章目录 基础知识适用场景小结 题目概述题目详解300.最长递增子序列2407.最长递增子序列 II 基础知识 线段树和树状数组都只是一个工具来的&#xff0c;题目并不会一下子就告诉你这个题目用到线段树和树状数组&#xff0c;这个取决于你想使用的数据结构以及所要优化的方向 线…
阅读更多...
MATLAB提供的颜色映射表colormap——伪彩色

MATLAB提供的颜色映射表colormap——伪彩色

图像处理领域的一个习惯&#xff1a;不是真实的颜色&#xff0c;一般用伪彩色。一是说明不是物体本身的颜色&#xff0c;二是彩色更容易分辨。 MATLAB陆续提供了16种颜色映射表colormap。 之前的都很丑&#xff0c;近5年新增的4种还可以。总的说来还是丑。 这是一种鸟的名字。…
阅读更多...
20.Word：小谢-病毒知识的科普文章❗【38】

20.Word：小谢-病毒知识的科普文章❗【38】

目录 题目​ NO1.2.3文档格式 NO4.5 NO6.7目录/图表目录/书目 NO8.9.10 NO11索引 NO12.13.14 每一步操作完&#xff0c;确定之后记得保存最后所有操作完记得再次删除空行 题目 NO1.2.3文档格式 样式的应用 选中应用段落段落→开始→选择→→检查→应用一个一个应用ctr…
阅读更多...
【16届蓝桥杯寒假刷题营】第2期DAY4

【16届蓝桥杯寒假刷题营】第2期DAY4

【16届蓝桥杯寒假刷题营】第2期DAY4 - 蓝桥云课 问题描述 幼儿园小班的浩楠同学有一个序列 a。 他想知道有多少个整数三元组 (i,j,k) 满足 1≤i,j,k≤n 且 ai​aj​ak​。 输入格式 共2行&#xff0c;第一行一个整数 n&#xff0c;表示序列的长度。 第二行 n 个整数&#x…
阅读更多...
MySQL查询优化（三）：深度解读 MySQL客户端和服务端协议

MySQL查询优化（三）：深度解读 MySQL客户端和服务端协议

如果需要从 MySQL 服务端获得很高的性能&#xff0c;最佳的方式就是花时间研究 MySQL 优化和执行查询的机制。一旦理解了这些&#xff0c;大部分的查询优化是有据可循的&#xff0c;从而使得整个查询优化的过程更有逻辑性。下图展示了 MySQL 执行查询的过程&#xff1a; 客户端…
阅读更多...
Van-Nav：新年，将自己学习的项目地址统一整理搭建自己的私人导航站，供自己后续查阅使用，做技术的同学应该都有一个自己网站的梦想

Van-Nav：新年，将自己学习的项目地址统一整理搭建自己的私人导航站，供自己后续查阅使用，做技术的同学应该都有一个自己网站的梦想

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Van-Nav是一个基于Vue.js开发的导航组件库&#xff0c;它提供了多种预设的样式和灵活的配置选项&#xff0c;使得开发者可以轻松地定制出符合项目需求…
阅读更多...
VSCode+Continue实现AI辅助编程

VSCode+Continue实现AI辅助编程

Continue是一款功能强大的AI辅助编程插件&#xff0c;可连接多种大模型&#xff0c;支持代码设计优化、错误修正、自动补全、注释编写等功能&#xff0c;助力开发人员提高工作效率与代码质量。以下是其安装和使用方法&#xff1a; 一、安装VSCode 参见&#xff1a; vscode安…
阅读更多...
【hot100】刷题记录(6)-轮转数组

【hot100】刷题记录(6)-轮转数组

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转…
阅读更多...
FPGA 使用 CLOCK_DEDICATED_ROUTE 约束

FPGA 使用 CLOCK_DEDICATED_ROUTE 约束

使用 CLOCK_DEDICATED_ROUTE 约束 CLOCK_DEDICATED_ROUTE 约束通常在从一个时钟区域中的时钟缓存驱动到另一个时钟区域中的 MMCM 或 PLL 时使 用。默认情况下&#xff0c; CLOCK_DEDICATED_ROUTE 约束设置为 TRUE &#xff0c;并且缓存 /MMCM 或 PLL 对必须布局在相同…
阅读更多...
阿里：基于路由和规划的多agent系统

阿里：基于路由和规划的多agent系统

&#x1f4d6;标题&#xff1a;Talk to Right Specialists: Routing and Planning in Multi-agent System for Question Answering &#x1f310;来源&#xff1a;arXiv, 2501.07813 &#x1f31f;摘要 &#x1f538;利用大型语言模型&#xff08;LLM&#xff09;&#xff0c…
阅读更多...
【Unity3D】实现2D角色/怪物死亡消散粒子效果

【Unity3D】实现2D角色/怪物死亡消散粒子效果

核心&#xff1a;这是一个Unity粒子系统自带的一种功能&#xff0c;可将粒子生成控制在一个Texture图片网格范围内&#xff0c;并且粒子颜色会自动采样图片的像素点颜色&#xff0c;之后则是粒子编辑出消散效果。 Particle System1物体&#xff08;爆发式随机速度扩散10000个粒…
阅读更多...
Synology 群辉NAS安装（10）安装confluence

Synology 群辉NAS安装（10）安装confluence

Synology 群辉NAS安装&#xff08;10&#xff09;安装confluence 写在前面本着一朝鲜吃遍天的原则&#xff0c;我又去了这个github的作者那里翻车的第一次尝试手工创建数据库制作一个新的docker-compose of confluence 不折腾但成功启动的版本 写在前面 在装完jira之后&#x…
阅读更多...
万字长文总结前端开发知识---JavaScriptVue3Axios

万字长文总结前端开发知识---JavaScriptVue3Axios

JavaScript学习目录 一、JavaScript1. 引入方式1.1 内部脚本 (Inline Script)1.2 外部脚本 (External Script) 2. 基础语法2.1 声明变量2.2 声明常量2.3 输出信息 3. 数据类型3.1 基本数据类型3.2 模板字符串 4. 函数4.1 具名函数 (Named Function)4.2 匿名函数 (Anonymous Fun…
阅读更多...
DeepSeek R1有什么不同

DeepSeek R1有什么不同

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
从源码深入理解One-API框架：适配器模式实现LLM接口对接

从源码深入理解One-API框架：适配器模式实现LLM接口对接

1. 概述 one-api 是一个开源的 API 框架&#xff0c;基于go语言开发&#xff0c;旨在提供统一的接口调用封装&#xff0c;支持多种 AI 服务平台的集成。通过 Gin 和 GORM 等框架&#xff0c;框架简化了多种 API 服务的调用流程。通过适配器模式实现了与多种 大模型API 服务的集…
阅读更多...
2025神奇的数字—新年快乐

2025神奇的数字—新年快乐

2025年&#xff0c;一个神奇的数字&#xff0c;承载着数学的奥秘与无限可能。它是45的平方&#xff08;45&#xff09;&#xff0c;上一个这样的年份是1936年&#xff08;44&#xff09;&#xff0c;下一个则是2116年&#xff08;46&#xff09;&#xff0c;一生仅此一次。2025…
阅读更多...
Python的列表基础知识点（超详细流程）

Python的列表基础知识点（超详细流程）

目录 一、环境搭建 二、列表 2.1 详情 2.2 列表定义 2.3 列表长度 2.4 列表索引 2.5 切片索引 2.6 添加 2.7 插入 2.8 剔除 2.8.1 pop方法 2.8.2 del方法 2.9 任何数据类型 2.10 拼接 2.10.1 “” 2.10.2 “*” 2.11 逆序 ​编辑 2.12 计算出现次数 2.13 排序…
阅读更多...
人工智能如何驱动SEO关键词优化策略的转型与效果提升

人工智能如何驱动SEO关键词优化策略的转型与效果提升

内容概要 随着数字化时代的到来&#xff0c;人工智能&#xff08;AI&#xff09;技术对各行各业的影响日益显著&#xff0c;在搜索引擎优化&#xff08;SEO&#xff09;领域尤为如此。AI的应用不仅改变了关键词研究的方法&#xff0c;而且提升了内容生成和搜索优化的效率&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023