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

web-game.md 4.4 KB Riwayat Mentahan