/web-games

name: web-games
description: "Web browser game development principles. Framework selection, WebGPU, optimization, PWA."
risk: unknown
source: community
date_added: "2026-02-27"

Web Browser Game Development

> Framework selection and browser-specific principles.

---

1. Framework Selection

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

Comparison (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 |

---

2. WebGPU Adoption

Browser Support (2025)

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

Decision

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

---

3. Performance Principles

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 |

Optimization Priority

1. **Asset compression** - KTX2, Draco, WebP 2. **Lazy loading** - Load on demand 3. **Object pooling** - Avoid GC 4. **Draw call batching** - Reduce state changes 5. **Web Workers** - Offload heavy computation

---

4. Asset Strategy

Compression Formats

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

Loading Strategy

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

---

5. PWA for Games

Benefits

• Offline play
• Install to home screen
• Full screen mode
• Push notifications

Requirements

• Service worker for caching
• Web app manifest
• HTTPS

---

6. Audio Handling

Browser Requirements

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

Best Practices

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

---

7. Anti-Patterns

| ❌ 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.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.