HTML5-Asteroids 纯 JavaScript 小行星

项目简介

HTML5-Asteroids 是一个用纯 JavaScript + HTML5 Canvas 复刻的经典街机游戏《小行星》（Asteroids）。它不依赖任何框架、构建工具或第三方库，打开页面即可游玩，是理解浏览器端 2D 游戏基本结构的极简样本。

核心玩法

• 方向键控制飞船旋转与推进，空格键发射子弹
• 陨石被击中后分裂为更小的碎片，直至完全销毁
• 飞船与陨石碰撞即损失生命，全部耗尽则游戏结束
• 画面采用矢量线条风格，还原早期街机视觉

技术要点

项目围绕几个经典游戏开发概念展开：

• 游戏循环：基于 requestAnimationFrame 的逐帧更新与渲染
• 实体管理：飞船、子弹、陨石等对象统一更新与绘制
• 向量运算：速度、方向、加速度的简单数学处理
• 碰撞检测：基于半径的圆形碰撞判定
• 屏幕环绕：物体移出边界后从另一侧出现

示意性的主循环结构：

function update(dt) {
  // 更新飞船、子弹、陨石状态
}

function draw() {
  // 清空画布并绘制所有实体
}

function loop() {
  update(dt);
  draw();
  requestAnimationFrame(loop);
}

适合谁

如果你刚接触 Canvas 或想了解一个游戏从零到可玩需要哪些模块，这个仓库是很好的起点。你可以在此基础上加入计分板、粒子爆炸效果、移动端触控或音效系统，作为自己的练手项目。

使用方式

仓库为静态页面项目，克隆后直接用浏览器打开入口 HTML 文件即可运行，无需安装依赖或执行构建命令。