Space InZader est un Roguelite Spatial Tactique haute performance construit avec React et l'API Canvas.
- Framework : React 19
- Langage : TypeScript (TSX)
- Rendu : HTML5 Canvas (2D Context)
- Style : Tailwind CSS (Utility-first)
- Build Tool : Vite (pour le développement local)
Le jeu utilise un pattern de découplage Moteur/Rendu pour garantir 60 FPS constants même avec des centaines d'objets :
-
CoreEngine (Moteur de Logique) :
- L'état du jeu (
GameState) est stocké dans unuseRef(mutable). - Cela évite les re-renders inutiles de React qui tueraient les performances.
- La logique de collision utilise un QuadTree pour passer d'une complexité O(n²) à O(n log n).
- L'état du jeu (
-
CoreRenderer (Moteur de Rendu) :
- Utilise
requestAnimationFramepour synchroniser le dessin avec le rafraîchissement de l'écran. - Système de couches (Background > Particles > Entities > VFX > HUD).
- Utilise
-
StatsCalculator (Système de Synergies) :
- Implémentation d'un rendement dégressif (Diminishing Returns).
- Formule :
BonusEffectif = Σ (0.8^i)pour chaque stack. Cela permet d'empiler les passifs sans casser l'équilibrage.
- Node.js (Version 18 ou supérieure)
- Exporte tous les fichiers dans un dossier nommé
space-inzader. - Ouvre un terminal dans ce dossier.
- Installe les dépendances :
npm install
- Lance le serveur de développement :
npm start
- Ouvre ton navigateur sur
http://localhost:5173.
- F3 : Activer/Désactiver l'overlay de Debug (FPS, FrameTime, Entités).
- Mode Lab : Accessible depuis le menu principal. Permet de modifier la physique (vitesse, dégâts, heat) en temps réel pendant que tu joues.
- Hit Flash : Les entités clignotent en blanc pur lors d'un impact.
- Damage Numbers : Textes flottants avec pop-animation.
- ⚪ Cinétique
- 🔵 EM / Ions
- 🟠 Thermique
- 🟡 Explosif / Crit
- 🔴 Dégâts Joueur