claude/lib/project-archetypes/web-game.md

name, category, public, database, hosting_hints, audit_stack, plugins

name	category	public	database	hosting_hints	audit_stack	plugins
web-game	game	true	optional	itch-io netlify cloudflare-pages vercel github-pages newgrounds	analyze code-clean perf design-review a11y cso doc	context7 ui-ux-pro-max gstack optional optional optional

Web Game (browser-based)

Jeu web navigateur — Phaser / Pixi.js / Three.js / Babylon.js / p5.js / Matter.js / Canvas 2D / WebGL brut. Distribution : itch.io / Newgrounds / site dédié / portail HTML5.

Detection signals

Strong signals (×3)

• DEP: package.json contient l'un de : "phaser", "pixi.js", "three", "babylonjs" OR "@babylonjs/core", "matter-js", "p5"
• STRING_IN_FILE: tout .js/.ts contient "new Phaser.Game(" OR "new PIXI.Application(" OR "new THREE.Scene(" OR "BABYLON.Engine("

Medium signals (×2)

• DIR: src/scenes/ OR src/entities/ OR src/sprites/
• FILE: game.config.js OR src/config.js avec game settings
• DEP: "howler" OR "tone" OR "sound.js" (audio)
• DEP: "gsap" OR "@tweenjs/tween.js" (animations)

Weak signals (×1)

• DIR: assets/sprites/ OR assets/audio/ OR assets/tilesets/
• EXT: .atlas OR .tmx (Tiled maps)
• DEP: "webpack" OR "vite" (bundler)
• FILE: index.html avec <canvas> ou <div id="game">

Counter-signals (exclusion)

• DEP: "react-three-fiber" sans Three.js scène principale → peut être composant 3D dans app React (pas un jeu)

Implications

• Hébergement : itch.io (dominant indie), Newgrounds, Cloudflare Pages, Netlify, GitHub Pages, site custom
• Base de données : OPTIONNELLE — souvent localStorage pour saves, parfois backend pour leaderboard/multiplayer
• SEO/GEO : IMPORTANT si monétisation via portail web (mais jeu lui-même = canvas opaque)
• Surface sécurité : MOYENNE-GRANDE si multiplayer ou backend (anti-cheat, auth)
• UI/UX : CRITIQUE — game feel, juice, feedback

Typical pain points

• FPS instable (pas de rAF, setInterval utilisé, physics tickée dans render)
• Assets chargés tous au démarrage (loading screen 30s) au lieu de streaming
• Sprites non atlas (chaque image = requête réseau)
• Audio non compressé (WAV uncompressed au lieu de OGG/WebM)
• Pas de fallback WebGL → Canvas2D (GPU insuffisant = écran noir)
• Memory leaks (scenes non destroy-ées, event listeners non cleanup)
• Input hardcoded (pas de rebind, pas de support manette via Gamepad API)
• Pas de pause native (perte focus tab = jeu continue en bg)
• Persistance : localStorage (limitation 5MB, synchrone, bloquant)
• Pas de save cloud ni cross-device
• Multiplayer : auth client-side uniquement (triche triviale)
• Accessibilité : pas d'options (no-motion, color-blind, subtitle, remappable controls)
• Perf mobile : jeu pensé desktop, pas touch-optimized, pas adaptatif
• Monétisation : ads ou IAP sans consentement RGPD
• Analytics intrusifs (user tracking sans consentement)

Interview questions (adaptive)

En plus du set minimum business :

• Moteur / framework : Phaser / Pixi / Three / Babylon / p5 / custom canvas / autre ?
• Type de jeu : 2D / 3D / isométrique / top-down / platformer / puzzle / runner / autre ?
• Solo / multijoueur / les deux ?
• Persistance : localStorage / IndexedDB / backend (lequel) / cloud saves ?
• Cible : desktop seulement / mobile / tablette / manette ?
• FPS cible : 60 / 120 / variable ?
• Monétisation : gratuit / premium / free-to-play + ads / IAP ?
• Plateforme de distribution : itch.io / Newgrounds / site custom / Steam (via Electron ?) / autre ?
• Multi-langue prévu ?
• Audio : effets + musique ? compression ?
• Rebind controls / manette prévu ?
• Accessibilité : options (reduced motion / subtitles / color-blind) ?
• Ads réseau si free : lequel ?
• Leaderboard / social ?

Plugin recommendations

• context7 : OPTIONAL — ON si Three/Babylon récents
• ui-ux-pro-max : OPTIONAL — utile pour UI menus (pas pour gameplay)
• gstack : OPTIONAL — tester sur navigateur

Example project layout

index.html
package.json
vite.config.ts
src/
  main.ts
  game.ts
  config.ts
  scenes/
    BootScene.ts
    MenuScene.ts
    GameScene.ts
    UIScene.ts
  entities/
    Player.ts
    Enemy.ts
  systems/
    InputManager.ts
    AudioManager.ts
    SaveSystem.ts
  data/
    levels.json
assets/
  sprites/
    player.atlas
    enemies.png
  audio/
    music.ogg
    sfx/
  tilesets/
    world.tmx
public/
  index.html