# Web Games

> Web browser game development principles. Framework selection, WebGPU, optimization, PWA.

- Skill: `yunaamelia/web-games` (Agent Skill)
- Install (CLI): `npx skillmds add yunaamelia/web-games`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yunaamelia/web-games/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: yunaamelia (https://skillmd.com/u/yunaamelia)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/yunaamelia/web-games

---


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