📖 Guide d'Utilisation - KodLab

🎨 Coloration Kod dans VSCode (Extension officielle)

Pour bénéficier de la coloration syntaxique Kod dans Visual Studio Code, vous pouvez installer l'extension officielle Kod :

Fichier à utiliser : kod-official-0.0.1.vsix (présent à la racine du projet)
Installation :
1. Ouvrez VSCode
2. Faites Ctrl+Maj+P puis tapez Extensions: Installer depuis un fichier .VSIX
3. Sélectionnez le fichier kod-official-0.0.1.vsix
4. Redémarrez VSCode si besoin
Résultat : Tous vos fichiers .kod bénéficient d'une coloration syntaxique adaptée !

Cette extension est recommandée pour un confort maximal lors de l'édition de vos jeux KodLab.

🚀 Installation et Démarrage

Prérequis

Navigateur web moderne (Chrome, Firefox, Safari, Edge)
Aucune installation nécessaire !

Lancement

Ouvrez index.html dans votre navigateur
L'interface KodLab se charge automatiquement
Prêt à coder ! 🎮

🖥️ Interface Utilisateur

Zone Principale

┌─────────────────────────────────────────────────────────┐
│ 🎮 KodLab                               [Exemple ▼] │
├─────────────────┬───────────────────────────────────────┤
│                 │  🎯 Console de Jeu                    │
│  📝 Éditeur     │  ┌─────────────────────────────────┐  │
│     de Code     │  │                                 │  │
│                 │  │        [Canvas 400x300]        │  │
│                 │  │                                 │  │
│                 │  │     KodLab Ready            │  │
│                 │  │  Compilez et lancez votre code! │  │
│                 │  └─────────────────────────────────┘  │
│                 │                                       │
│                 │  [🔧 Compiler]  [▶️ Lancer]  [⏹️ Stop] │
├─────────────────┴───────────────────────────────────────┤
│ 📊 Console de Debug / Messages                         │
└─────────────────────────────────────────────────────────┘

Composants de l'Interface

1. Éditeur de Code (Gauche)

Monaco Editor : Coloration syntaxique automatique
Numérotation : Lignes visibles
Auto-complétion : Suggestions de fonctions
Détection d'erreurs : Soulignement des erreurs

2. Console de Jeu (Droite)

Canvas 400x300 : Zone de rendu du jeu
Rendu temps réel : 60 FPS par défaut
Gestion clavier : Touches automatiquement détectées

3. Contrôles

🔧 Compiler : Traduit le code .kod en JavaScript
▶️ Lancer : Démarre l'exécution du jeu
⏹️ Stop : Arrête l'exécution

4. Console de Debug

Messages d'erreur : Erreurs de compilation/exécution
Logs du jeu : Messages de debug
Statistiques : FPS, performances

🎯 Workflow de Développement

Étapes Typiques

✍️ Écrire le Code ```kod function start() clearScreen("#000000") end

function update() drawText("Mon Premier Jeu", 100, 150, "#FFFFFF") end ```

🔧 Compiler
Cliquez sur "Compiler"
Vérifiez les messages dans la console
Corrigez les erreurs éventuelles
▶️ Lancer
Cliquez sur "Lancer"
Le jeu démarre immédiatement
Testez avec le clavier
🔄 Itérer
Modifiez le code
Re-compilez et re-lancez
Perfectionnez votre jeu

Raccourcis Clavier

Touche	Action
`Ctrl+Enter`	Compiler et Lancer
`Ctrl+S`	Sauvegarder (navigateur)
`F5`	Recharger la page
`Échap`	Arrêter le jeu

🎮 Utilisation de l'Émulateur

Canvas de Jeu

Résolution : 400x300 pixels
Origine : (0,0) en haut à gauche
Coordonnées : X vers la droite, Y vers le bas

Gestion des Touches

L'émulateur détecte automatiquement : - Flèches : up, down, left, right - WASD : w→up, s→down, a→left, d→right - Espace : space

Boucle de Jeu

function start()    // Appelée une fois au démarrage
    // Initialisation
end

function update()   // Appelée chaque frame (60 FPS)
    // Logique du jeu
    // Affichage
end

📁 Gestion des Exemples

Charger un Exemple

Cliquez sur le menu déroulant "Exemple"
Sélectionnez un jeu (Pong, Snake, Asteroids, etc.)
Le code se charge automatiquement dans l'éditeur
Compilez et lancez pour tester

Exemples Disponibles

Jeu	Description	Niveau
Pong	Ping-pong avec IA	🟢 Débutant
Snake	Serpent qui grandit	🟡 Intermédiaire
Asteroids	Vaisseau spatial	🟠 Avancé
Pand Adventures	Plateforme 2D	🔴 Expert

Modifier les Exemples

Les exemples sont des modèles à explorer
Modifiez-les pour apprendre
Créez vos propres variantes
Sauvegardez vos créations localement

🛠️ Débogage et Dépannage

Messages de Compilation

✅ Compilation réussie !
❌ Erreur ligne 15 : fonction 'drawCircl' inconnue
⚠️ Attention : variable 'speed' non initialisée

Messages d'Exécution

▶️ Jeu démarré
⏸️ Jeu en pause
🛑 Erreur d'exécution : division par zéro
📊 FPS: 60 | Objets: 42

Problèmes Fréquents

Le jeu ne se lance pas

Vérifiez la compilation (messages d'erreur)
Assurez-vous d'avoir les fonctions start() et update()
Contrôlez la syntaxe (parenthèses, end, etc.)

Performance lente

Évitez trop de drawText() par frame
Limitez les calculs complexes dans update()
Utilisez clearScreen() une seule fois par frame

Contrôles ne fonctionnent pas

Vérifiez l'orthographe : "up" pas "Up"
Le canvas doit avoir le focus (cliquez dessus)
Testez avec isKeyPressed("space")

💾 Sauvegarde et Partage

Sauvegarde Locale

Ctrl+S : Sauvegarde navigateur (temporaire)
Copier-coller : Sauvegardez dans un fichier .kod
Export : Utilisez le menu du navigateur

Partage de Code

Copiez votre code .kod
Partagez le fichier texte
L'autre personne peut coller dans KodLab
Compilation et test immédiats

Formats Supportés

.kod : Format natif KodLab
.txt : Texte simple (compatible)
.js : JavaScript généré (lecture seule)

🎯 Conseils pour Débuter

1. Commencez Simple

function start()
    clearScreen("#003366")
end

function update()
    drawText("Hello World!", 150, 150, "#FFFFFF")
end

2. Ajoutez de l'Animation

let x = 0

function update()
    clearScreen("#003366")
    x = x + 1
    drawCircle(x, 150, 10, "#FF0000")
end

3. Gérez les Interactions

function update()
    if isKeyPressed("space")
        drawText("SPACE pressé!", 100, 100, "#00FF00")
    end
end

4. Structurez votre Code

Variables globales en haut
Fonctions courtes et claires
Commentaires explicatifs
Test fréquent

Prêt à créer ? Consultez maintenant le Guide du Langage Kod ! 🚀