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. 模塊化設計
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}`);}}
}