web-games

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Browser Game Development

网页浏览器游戏开发

Framework selection and browser-specific principles.

框架选择与浏览器专属开发原则

1. Framework Selection

1. 框架选择

Decision Tree

决策树

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser
│   └── Raw rendering power? → PixiJS
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
    └── Custom → Raw Canvas/WebGL

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser
│   └── Raw rendering power? → PixiJS
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
    └── Custom → Raw Canvas/WebGL

Comparison (2025)

2025年框架对比

Framework	Type	Best For
Phaser 4	2D	Full game features
PixiJS 8	2D	Rendering, UI
Three.js	3D	Visualizations, lightweight
Babylon.js 7	3D	Full engine, XR

框架	类型	适用场景
Phaser 4	2D	全功能游戏开发
PixiJS 8	2D	渲染、UI开发
Three.js	3D	可视化、轻量级项目
Babylon.js 7	3D	全功能引擎、XR开发

2. WebGPU Adoption

2. WebGPU 应用

Browser Support (2025)

2025年浏览器支持情况

Browser	Support
Chrome	✅ Since v113
Edge	✅ Since v113
Firefox	✅ Since v131
Safari	✅ Since 18.0
Total	~73% global

浏览器	支持状态
Chrome	✅ 自v113版本起支持
Edge	✅ 自v113版本起支持
Firefox	✅ 自v131版本起支持
Safari	✅ 自18.0版本起支持
全球支持占比	~73%

Decision

决策建议

New projects: Use WebGPU with WebGL fallback
Legacy support: Start with WebGL
Feature detection: Check
```
navigator.gpu
```

新项目：使用WebGPU并兼容WebGL降级方案
遗留项目支持：从WebGL开始开发
特性检测：检查
```
navigator.gpu
```
是否存在

3. Performance Principles

3. 性能优化原则

Browser Constraints

浏览器限制与应对策略

Constraint	Strategy
No local file access	Asset bundling, CDN
Tab throttling	Pause when hidden
Mobile data limits	Compress assets
Audio autoplay	Require user interaction

限制条件	应对策略
无本地文件访问权限	资源打包、使用CDN
标签页节流	标签隐藏时暂停游戏
移动数据限制	压缩资源
音频自动播放限制	需用户交互触发

Optimization Priority

优化优先级

Asset compression - KTX2, Draco, WebP
Lazy loading - Load on demand
Object pooling - Avoid GC
Draw call batching - Reduce state changes
Web Workers - Offload heavy computation

资源压缩 - 使用KTX2、Draco、WebP格式
懒加载 - 按需加载资源
对象池化 - 避免垃圾回收（GC）
绘制调用批处理 - 减少状态切换
Web Workers - 卸载繁重计算任务

4. Asset Strategy

4. 资源管理策略

Compression Formats

压缩格式选择

Type	Format
Textures	KTX2 + Basis Universal
Audio	WebM/Opus (fallback: MP3)
3D Models	glTF + Draco/Meshopt

资源类型	推荐格式
纹理	KTX2 + Basis Universal
音频	WebM/Opus（降级方案：MP3）
3D模型	glTF + Draco/Meshopt

Loading Strategy

加载策略

Phase	Load
Startup	Core assets, <2MB
Gameplay	Stream on demand
Background	Prefetch next level

阶段	加载内容
启动阶段	核心资源，大小<2MB
游戏运行阶段	按需流式加载
后台阶段	预取下一关卡资源

5. PWA for Games

5. 游戏中的PWA应用

Benefits

优势

Offline play
Install to home screen
Full screen mode
Push notifications

离线游玩
可安装至主屏幕
全屏模式
推送通知

Requirements

实现要求

Service worker for caching
Web app manifest
HTTPS

使用Service Worker进行缓存
配置Web应用清单（Web app manifest）
采用HTTPS协议

6. Audio Handling

6. 音频处理

Browser Requirements

浏览器要求

Audio context requires user interaction
Create AudioContext on first click/tap
Resume context if suspended

音频上下文（Audio context）需要用户交互触发
在首次点击/触摸时创建AudioContext
若上下文被挂起则恢复

Best Practices

最佳实践

Use Web Audio API
Pool audio sources
Preload common sounds
Compress with WebM/Opus

使用Web Audio API
池化音频源
预加载常用音效
使用WebM/Opus格式压缩音频

7. Anti-Patterns

7. 反模式

❌ Don't	✅ Do
Load all assets upfront	Progressive loading
Ignore tab visibility	Pause when hidden
Block on audio load	Lazy load audio
Skip compression	Compress everything
Assume fast connection	Handle slow networks

Remember: Browser is the most accessible platform. Respect its constraints.

❌ 错误做法	✅ 正确做法
一次性加载所有资源	渐进式加载
忽略标签页可见性	标签隐藏时暂停游戏
阻塞音频加载	懒加载音频
跳过资源压缩	所有资源均需压缩
假设网络连接速度快	处理慢网络场景

记住： 浏览器是最具普适性的平台，要尊重它的限制条件。

When to Use

适用场景

This skill is applicable to execute the workflow or actions described in the overview.

本技能适用于执行概述中描述的工作流或操作。