一款基于 Entity-Component-System (ECS) 架构的 HTML5 竖屏打飞机游戏——Strike Force。Canvas 原生渲染、纯 JS 实现，直接在浏览器里玩。

试玩

按下 ENTER 开始游戏。WASD / 方向键 控制飞机移动，空格 开火。摧毁敌机获得分数，活着就是胜利。

为什么用 ECS

游戏逻辑拆成了十几个独立的 System，每个 System 只做一件事：

好处很明显：

• 关注点分离——改碰撞不会炸掉渲染
• 数据驱动——Component 就是纯数据对象，System 遍历处理
• 易扩展——加一个新 System 就能加一个新特性，不改现有代码

技术要点

1. 自包含 HTML

整个游戏打包在一个 HTML 文件里（658 行），无任何外部依赖。Canvas 2D 原生渲染，没有框架，没有 CDN 脚本，打开即玩。

2. 性能

用 requestAnimationFrame 驱动游戏循环，帧间隔上界 50ms 防止切标签页后的时间跳跃。碰撞检测用简单的 AABB 包围盒，每帧对子弹-敌人做配对遍历——在这种小型弹幕游戏中完全够用。

3. 敌机波次

敌机从屏幕顶部以递增速度下落，随分数增加生成频率和数量都会上升。每架敌机都有独立的生命值，打够次数才会爆炸。

源码结构

1
2
3
4
5
6
7
8
9
10
11

StrikeForce.html          # 自包含游戏（658 行）
src/
├── main.js               # 入口 & 游戏循环
├── ecs/                  # ECS 核心
│   ├── World.js
│   ├── Entity.js
│   └── Component.js
├── components/           # 数据组件
├── systems/              # 逻辑系统
├── factory/              # 实体工厂
└── data/                 # 配置 & 常量

总结

从 ECS 核心到十几个 System 搭起来的游戏循环，不到 700 行代码就做出了一款可玩的打飞机游戏。如果你对 ECS 游戏架构感兴趣，或者想看看纯 Canvas 的 2D 游戏怎么写，欢迎留言讨论。

试玩窗口在文章开头，如果你看不到，说明你的浏览器不支持 iframe 嵌入。直接访问 /games/strike-force/ 也一样。