// 混合游戏循环
let accumulator = 0;
const FIXED_DT = 1/60;

function gameLoop(currentTime: number) {
  const deltaTime = currentTime - lastTime;
  accumulator += deltaTime;

  // 物理使用固定时间步长
  while (accumulator >= FIXED_DT) {
    physicsUpdate(FIXED_DT);
    accumulator -= FIXED_DT;
  }

  // 渲染使用可变时间步长
  const alpha = accumulator / FIXED_DT;
  render(alpha); // 在状态之间插值

  requestAnimationFrame(gameLoop);
}

实体组件系统 (ECS)

┌─────────────────────────────────────────────────────────────┐
│                    ECS 架构                                 │
│                                                             │
│  实体: 仅是一个 ID                                          │
│  ┌─────┐  ┌─────┐  ┌─────┐                                 │
│  │  1  │  │  2  │  │  3  │                                 │
│  └─────┘  └─────┘  └─────┘                                 │
│                                                             │
│  组件: 纯数据                                               │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                  │
│  │  位置    │  │  速度    │  │  精灵    │                  │
│  │ x, y, z  │  │ vx, vy   │  │  纹理    │                  │
│  └──────────┘  └──────────┘  └──────────┘                  │
│                                                             │
│  系统: 逻辑                                                 │
│  ┌────────────────┐  ┌────────────────┐                    │
│  │  移动系统      │  │  渲染系统      │                    │
│  │ 位置+速度      │  │ 位置+精灵      │                    │
│  └────────────────┘  └────────────────┘                    │
└─────────────────────────────────────────────────────────────┘



// 组件定义
interface Position { x: number; y: number; }
interface Velocity { vx: number; vy: number; }
interface Sprite { texture: string; width: number; height: number; }

// 系统
function movementSystem(entities: Entity[], dt: number) {
  for (const entity of entities) {
    if (entity.has(Position) && entity.has(Velocity)) {
      const pos = entity.get(Position);
      const vel = entity.get(Velocity);
      pos.x += vel.vx * dt;
      pos.y += vel.vy * dt;
    }
  }
}

2D 游戏开发

精灵动画

interface Animation {
  frames: string[];       // 纹理名称
  frameDuration: number;  // 每帧秒数
  loop: boolean;
}

class AnimatedSprite {
  private currentFrame = 0;
  private elapsed = 0;

  update(dt: number) {
    this.elapsed += dt;
    if (this.elapsed >= this.animation.frameDuration) {
      this.elapsed = 0;
      this.currentFrame++;
      if (this.currentFrame >= this.animation.frames.length) {
        this.currentFrame = this.animation.loop ? 0 : this.animation.frames.length - 1;
      }
    }
  }

  get texture(): string {
    return this.animation.frames[this.currentFrame];
  }
}

碰撞检测

// AABB 碰撞
function aabbIntersect(a: AABB, b: AABB): boolean {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

// 用于宽阶段的空间哈希
class SpatialHash {
  private cells = new Map<string, Entity[]>();
  private cellSize: number;

  insert(entity: Entity) {
    const key = this.getKey(entity.position);
    if (!this.cells.has(key)) this.cells.set(key, []);
    this.cells.get(key)!.push(entity);
  }

  query(position: Vector2): Entity[] {
    // 检查相邻单元格
    const nearby: Entity[] = [];
    for (let dx = -1; dx <= 1; dx++) {
      for (let dy = -1; dy <= 1; dy++) {
        const key = this.getKey({ x: position.x + dx * this.cellSize, y: position.y + dy * this.cellSize });
        nearby.push(...(this.cells.get(key) || []));
      }
    }
    return nearby;
  }
}

游戏 AI

有限状态机

interface State {
  enter(): void;
  update(dt: number): void;
  exit(): void;
}

class EnemyAI {
  private states = new Map<string, State>();
  private currentState: State;

  transition(stateName: string) {
    this.currentState?.exit();
    this.currentState = this.states.get(stateName)!;
    this.currentState.enter();
  }
}

// 示例: 巡逻 → 追逐 → 攻击
class PatrolState implements State {
  enter() { this.setAnimation('walk'); }
  update(dt: number) {
    this.patrol();
    if (this.canSeePlayer()) {
      this.fsm.transition('chase');
    }
  }
  exit() {}
}

行为树

┌─────────────────────────────────────────────────────────────┐
│                    行为树                                   │
│                                                             │
│                      [选择器]                               │
│                     /          \                            │
│              [序列]          [巡逻]                         │
│              /        \                                     │
│        [看见玩家?]    [攻击]                                │
│            │                                                │
│         [追逐]                                              │
└─────────────────────────────────────────────────────────────┘

寻路 (A*)

function aStar(start: Node, goal: Node): Node[] {
  const openSet = new PriorityQueue<Node>();
  const cameFrom = new Map<Node, Node>();
  const gScore = new Map<Node, number>();
  const fScore = new Map<Node, number>();

  gScore.set(start, 0);
  fScore.set(start, heuristic(start, goal));
  openSet.enqueue(start, fScore.get(start)!);

  while (!openSet.isEmpty()) {
    const current = openSet.dequeue()!;

    if (current === goal) {
      return reconstructPath(cameFrom, current);
    }

    for (const neighbor of getNeighbors(current)) {
      const tentativeG = gScore.get(current)! + distance(current, neighbor);

      if (tentativeG < (gScore.get(neighbor) ?? Infinity)) {
        cameFrom.set(neighbor, current);
        gScore.set(neighbor, tentativeG);
        fScore.set(neighbor, tentativeG + heuristic(neighbor, goal));
        openSet.enqueue(neighbor, fScore.get(neighbor)!);
      }
    }
  }

  return []; // 未找到路径
}

多人游戏

网络架构

延迟补偿

// 客户端预测
class NetworkedPlayer {
  private pendingInputs: Input[] = [];
  private serverState: PlayerState;

  update(input: Input) {
    // 1. 本地应用输入（预测）
    this.applyInput(input);
    this.pendingInputs.push(input);

    // 2. 发送到服务器
    this.sendInput(input);
  }

  onServerUpdate(state: PlayerState, lastProcessedInput: number) {
    // 3. 与服务器状态协调
    this.serverState = state;

    // 4. 重新应用未处理的输入
    this.pendingInputs = this.pendingInputs.filter(i => i.id > lastProcessedInput);
    for (const input of this.pendingInputs) {
      this.applyInput(input);
    }
  }
}

状态同步

// 增量压缩
interface StateDelta {
  timestamp: number;
  changes: Map<EntityId, ComponentChanges>;
}

function computeDelta(prev: GameState, curr: GameState): StateDelta {
  const changes = new Map();
  for (const [id, entity] of curr.entities) {
    const prevEntity = prev.entities.get(id);
    if (!prevEntity || hasChanged(prevEntity, entity)) {
      changes.set(id, getChangedComponents(prevEntity, entity));
    }
  }
  return { timestamp: curr.timestamp, changes };
}

游戏优化

渲染优化

内存优化

// 对象池
class ObjectPool<T> {
  private pool: T[] = [];
  private factory: () => T;

  acquire(): T {
    return this.pool.pop() ?? this.factory();
  }

  release(obj: T) {
    this.reset(obj);
    this.pool.push(obj);
  }
}

// 用法
const bulletPool = new ObjectPool(() => new Bullet());

function fireBullet() {
  const bullet = bulletPool.acquire();
  bullet.init(position, direction);
  activeBullets.add(bullet);
}

function onBulletHit(bullet: Bullet) {
  activeBullets.delete(bullet);
  bulletPool.release(bullet);
}

游戏引擎参考

Flame Engine (Flutter)

专为 Flutter 开发者设计的 2D 游戏引擎，详细文档请参考 flame/SKILL.md：

• flame-core/ - 组件、输入、碰撞、相机、动画、音效、粒子
• flame-systems/ - 14 个游戏系统（任务、对话、背包、战斗等）
• flame-templates/ - RPG、Platformer、Roguelike 模板

相关技能

• [[performance-optimization]] - 通用优化
• [[realtime-systems]] - WebSocket, 网络
• [[cpp]] - 性能关键代码
• [[javascript-typescript]] - Web 游戏

每周安装数

145

仓库

miles990/claude…e-skills

GitHub 星标数

7

首次出现

Jan 24, 2026

安全审计

Gen Agent Trust HubFailSocketPassSnykPass

安装于

opencode137

gemini-cli133

codex131

cursor125

github-copilot123

kimi-cli114