astral-wings

KO | EN

gitlite — search

#hacktoberfest #react #typescript #llm #golang #machine-learning #deep-learning #docker #nodejs #windows #cli #awesome-list #pytorch #ios

(★ 9)

ASTRAL WINGS (星渊之翼) — a browser single-player airplane shooter built with pure HTML5 Canvas

astral-wings Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 星渊之翼 · ASTRAL WINGS

一款浏览器单机飞机射击游戏，黑色科技风现代UI。所有美术素材均由绿幕图自动抠图生成。

> 完全静态，无后端，单文件部署即可运行。

## 玩法

- WASD / 方向键 / 鼠标移动战机
- 战机自动射击（紫色梭弹）
- 击落敌方战机有几率掉落 **S / W / P** 道具
  - **S** — 提升子弹速度
  - **W** — 同时发射的子弹数量 +1
  - **P** — 子弹伤害 +1
- 击落敌人 / BOSS 会积攒能量，能量满后可释放**大招**：
  - 触发键：`J` / `Shift` / `Q`
  - 全屏十字光线持续伤害所有敌人
  - 期间无敌、回满血
  - 同时播放 1 号女主角出场动画与配音
- 战机三条命；血量归零失去一条命，三条命用完 Game Over
- 敌方战机血量随时间逐渐增加
- `P` / `Esc` 暂停

## 启动

仅需任意静态文件服务器：

```bash
cd web
python3 -m http.server 8765
# 然后浏览器打开 http://localhost:8765
```

或用 Node:

```bash
npx serve web
```

## 项目结构

```
打飞机/
├── raw/                          原始绿幕素材（不参与部署）
├── scripts/                      Python 素材处理脚本
│   ├── chroma_key.py             通用绿幕抠图算法
│   ├── process_assets.py         静态素材处理（人物 / 战机 / 子弹 / 道具 / 敌机）
│   ├── process_video.py          视频转 30fps 序列帧 + 抠图
│   └── gen_manifest.py           生成资源清单 manifest.json
└── web/                          ✅ 仅此目录需要部署到 GitHub Pages
    ├── index.html
    ├── css/style.css
    ├── js/
    │   ├── main.js               入口
    │   ├── core/                 引擎核心：canvas / loader / scene / input / audio / ui / effects / utils
    │   ├── scenes/               场景：角色选择 / 出场动画 / 主战斗 / Game Over
    │   └── entities/             实体：玩家 / 子弹 / 敌人 / BOSS / 道具 / 大招
    └── assets/                   游戏资源（已抠图、已压缩）
        ├── characters/           女主角立绘
        ├── ships/                玩家战机
        ├── bosses/               2 个 BOSS
        ├── enemies/              16 种小兵战机
        ├── bullets/              16 种子弹（按颜色 + 形状命名）
        ├── powerups/             S / W / P 道具
        ├── animations/
        │   ├── intro_h1/         出场动画 178 帧 WebP
        │   ├── ult_h1/           大招配套女主角动画 178 帧 WebP
        │   └── ult_h1_ship/      大招紫色雷电柱 4 帧 PNG
        ├── audio/                音效
        └── manifest.json         资源清单
```

## 美术素材处理流程

游戏所有素材均来自绿幕原图，自动处理：

```bash
# 一次性把 raw/ 下所有绿幕图抠成透明PNG，并切割网格图
python3 scripts/process_assets.py

# 把两个视频抽成 30fps 序列帧，逐帧绿幕抠图，输出 WebP
python3 scripts/process_video.py

# 生成 web/assets/manifest.json
python3 scripts/gen_manifest.py
```

抠图算法核心：以 `G - max(R, B)` 作为"绿度"指标，超过阈值即透明；带软边缘和去溢色，输出干净的透明 PNG。

## 部署到 GitHub Pages

只需要把 `web/` 目录推到 `gh-pages` 分支即可：

```bash
# 在仓库根目录
git subtree push --prefix web origin gh-pages
```

或者用 GitHub Actions（推荐）：在仓库 Settings → Pages → Source 选择 `GitHub Actions`，使用本仓库自带的 `.github/workflows/deploy.yml`，每次 push 自动部署。

## 技术栈

- 原生 HTML5 Canvas + ES Modules（无构建工具，无依赖）
- 设计分辨率固定 1280×720，自动缩放到全屏（带 letterbox）
- 设备像素比适配（Retina 友好）
- WebP 序列帧（透明，体积仅 PNG 的 1/4~1/5）
- 浏览器原生 Audio API
- Python 3 + Pillow + NumPy（仅素材构建期需要）

## 调试

游戏运行时浏览器控制台暴露了 `window.__game`：

```js
__game.scene            // 当前场景
__game.fillEnergy()     // 充满能量
__game.god()            // 短期无敌
__game.addPowerup('S')  // 手动加道具（S/W/P）
```

astral-wings

astral-wings Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

astral-wings

astral-wings Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README