# Web Games

> Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。

- **Type:** Skill
- **Install:** `agentstack add skill-misonl-ling-web-games`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [MisonL](https://agentstack.voostack.com/s/misonl)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [MisonL](https://github.com/MisonL)
- **Source:** https://github.com/MisonL/Ling/tree/main/.agents/skills/game-development/web-games
- **Website:** https://www.npmjs.com/package/@mison/ling

## Install

```sh
agentstack add skill-misonl-ling-web-games
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Web 浏览器游戏开发

> 框架选择与浏览器特定原则。

---

## 1. 框架选择

### 决策树

```
什么类型的游戏？
|
+-- 2D 游戏
|   +-- 完整的游戏引擎功能？ -> Phaser
|   +-- 原始渲染能力？ -> PixiJS
|
+-- 3D 游戏
|   +-- 完整引擎（物理、XR）？ -> Babylon.js
|   +-- 渲染聚焦？ -> Three.js
|
+-- 混合 / Canvas
    +-- 自定义 -> Raw Canvas/WebGL
```

### 对比（2025）

| 框架 | 类型 | 最适合 |
| --- | --- | --- |
| **Phaser 4** | 2D | 完整游戏功能 |
| **PixiJS 8** | 2D | 渲染、UI |
| **Three.js** | 3D | 可视化、轻量级 |
| **Babylon.js 7** | 3D | 完整引擎、XR |

---

## 2. WebGPU 采用

### 浏览器支持（2025）

| 浏览器 | 支持 |
| --- | --- |
| Chrome | [OK]  自 v113 起 |
| Edge | [OK]  自 v113 起 |
| Firefox | [OK]  自 v131 起 |
| Safari | [OK]  自 18.0 起 |
| **总计** | **~73%** 全球 |

### 决策

- **新项目**：使用 WebGPU，并提供 WebGL 回退
- **遗留支持**：从 WebGL 开始
- **特性检测**：检查 `navigator.gpu`

---

## 3. 性能原则

### 浏览器限制

| 限制 | 策略 |
| --- | --- |
| 无本地文件访问 | 资产打包、CDN |
| 标签页节流 | 隐藏时暂停 |
| 移动数据限制 | 压缩资产 |
| 音频自动播放 | 需要用户交互 |

### 优化优先级

1. **资产压缩** - KTX2、Draco、WebP
2. **懒加载** - 按需加载
3. **对象池** - 避免 GC
4. **绘制调用合批** - 减少状态变更
5. **Web Workers** - 卸载繁重计算

---

## 4. 资产策略

### 压缩格式

| 类型 | 格式 |
| --- | --- |
| 纹理 | KTX2 + Basis Universal |
| 音频 | WebM/Opus（回退：MP3） |
| 3D 模型 | glTF + Draco/Meshopt |

### 加载策略

| 阶段 | 加载 |
| --- | --- |
| 启动 | 核心资产， **记住：** 浏览器是最易访问的平台。尊重它的限制。

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [MisonL](https://github.com/MisonL)
- **Source:** [MisonL/Ling](https://github.com/MisonL/Ling)
- **License:** MIT
- **Homepage:** https://www.npmjs.com/package/@mison/ling

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-misonl-ling-web-games
- Seller: https://agentstack.voostack.com/s/misonl
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.