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. 游戏关卡实现