Skip to content

🛠️ Dépannage et FAQ - KodLab

Guide de résolution des problèmes les plus fréquents avec KodLab.

📋 Table des Matières

  1. Problèmes de Compilation
  2. Erreurs d'Exécution
  3. Problèmes d'Affichage
  4. Contrôles et Entrées
  5. Performance
  6. FAQ Générale

Problèmes de Compilation

❌ "Fonction 'drawCircl' inconnue"

Cause : Faute de frappe dans le nom de fonction.

Solution :

// ❌ Incorrect
drawCircl(100, 100, 20, "#FF0000")

// ✅ Correct
drawCircle(100, 100, 20, "#FF0000")

Fonctions API correctes : - clearScreen() - drawRect() - drawCircle() - drawLine() - drawPixel() - drawText() - isKeyPressed() - playSound()

❌ "Erreur ligne X : 'end' attendu"

Cause : Bloc de code non fermé.

Solutions :

// ❌ Manque un 'end'
function update()
    if isKeyPressed("space")
        drawText("Hello", 100, 100, "#FFFFFF")
    // ❌ Manque 'end' pour le if
    drawCircle(200, 150, 20, "#FF0000")
end

// ✅ Correct
function update()
    if isKeyPressed("space")
        drawText("Hello", 100, 100, "#FFFFFF")
    end  // ✅ Fermeture du if
    drawCircle(200, 150, 20, "#FF0000")
end

Vérification systématique : - Chaque if doit avoir son end - Chaque function doit avoir son end - Chaque for doit avoir son end - Chaque while doit avoir son end

❌ "Variable 'speed' non déclarée"

Cause : Variable utilisée sans déclaration préalable.

Solution :

// ❌ Variable non déclarée
function update()
    playerX = playerX + speed  // ❌ 'speed' n'existe pas
end

// ✅ Déclarer les variables au début
let speed = 5
let playerX = 200

function update()
    playerX = playerX + speed  // ✅ 'speed' est déclarée
end

❌ "Fonction 'start' ou 'update' manquante"

Cause : Les fonctions obligatoires ne sont pas définies.

Solution :

// ✅ Toujours inclure ces deux fonctions
function start()
    // Initialisation (même vide)
    clearScreen("#000033")
end

function update()
    // Boucle principale (obligatoire)
    clearScreen("#000033")
    drawText("Hello World", 100, 100, "#FFFFFF")
end

Erreurs d'Exécution

❌ "ReferenceError: xxx is not defined"

Cause : Accès à une variable ou fonction inexistante à l'exécution.

Diagnostic : 1. Vérifiez l'orthographe exacte 2. Assurez-vous que la variable est déclarée avant utilisation 3. Contrôlez la portée des variables

Solution :

// ❌ Erreur commune
let playeX = 200  // ❌ Faute de frappe

function update()
    clearScreen("#000033")
    playerX = playerX + 5  // ❌ Référence 'playerX' inexistante
end

// ✅ Correction
let playerX = 200  // ✅ Nom correct

function update()
    clearScreen("#000033")
    playerX = playerX + 5  // ✅ Variable existe
end

❌ "TypeError: Cannot read property"

Cause : Tentative d'accès à une propriété d'un objet undefined ou null.

Solutions courantes :

// ❌ Division par zéro
let result = score / 0  // Peut causer des erreurs

// ✅ Vérification
if divisor != 0
    result = score / divisor
else
    result = 0
end

// ❌ Calculs avec undefined
let distance = (playerX - enemyX) * (playerX - enemyX)  // Si enemyX pas initialisé

// ✅ Initialisation correcte
let enemyX = 100  // Toujours initialiser
let enemyY = 50

❌ Le jeu se lance puis s'arrête immédiatement

Causes fréquentes :

  1. Boucle infinie dans update() :
// ❌ Boucle infinie
function update()
    clearScreen("#000033")

    while true  // ❌ Bloque l'exécution
        drawCircle(100, 100, 10, "#FF0000")
    end
end

// ✅ Pas de boucles infinies dans update()
function update()
    clearScreen("#000033")
    drawCircle(100, 100, 10, "#FF0000")
end
  1. Erreur dans start() :
// ❌ Erreur dans start
function start()
    playerX = "abc"  // ❌ Assigner texte à variable numérique
    clearScreen(playerX)  // ❌ Couleur invalide
end

// ✅ Types cohérents
function start()
    playerX = 200  // ✅ Nombre pour position
    clearScreen("#000033")  // ✅ Couleur valide
end

Problèmes d'Affichage

❌ Écran noir / Rien ne s'affiche

Diagnostics :

  1. Pas de clearScreen() :
// ❌ Pas d'effacement
function update()
    drawCircle(100, 100, 20, "#FF0000")  // Ne s'affiche pas bien
end

// ✅ Toujours effacer d'abord
function update()
    clearScreen("#000033")  // ✅ Effacement obligatoire
    drawCircle(100, 100, 20, "#FF0000")
end
  1. Objets hors écran :
// ❌ Position hors limites
let x = -100  // ❌ Négatif = hors écran
let y = 500   // ❌ > 300 = hors écran

// ✅ Positions valides
let x = 200   // ✅ Entre 0 et 400
let y = 150   // ✅ Entre 0 et 300
  1. Couleurs invisibles :
// ❌ Couleurs invisibles
clearScreen("#000000")  // Fond noir
drawCircle(100, 100, 20, "#000000")  // ❌ Cercle noir sur fond noir

// ✅ Contraste visible
clearScreen("#000000")  // Fond noir
drawCircle(100, 100, 20, "#FFFFFF")  // ✅ Cercle blanc visible

❌ Objets qui laissent des traînées

Cause : clearScreen() manquant ou mal placé.

Solution :

// ❌ Pas d'effacement = traînées
let x = 0
function update()
    x = x + 5
    drawCircle(x, 150, 20, "#FF0000")  // ❌ Laisse des traces
end

// ✅ Effacer à chaque frame
let x = 0
function update()
    clearScreen("#000033")  // ✅ Efface les traces
    x = x + 5
    drawCircle(x, 150, 20, "#FF0000")
end

❌ Texte ou objets clignotent

Cause : Multiples clearScreen() ou conditions d'affichage inconsistantes.

Solution :

// ❌ Multiple effacements
function update()
    clearScreen("#000033")
    drawPlayer()
    clearScreen("#000033")  // ❌ Efface le joueur !
    drawEnemies()
end

// ✅ Un seul clearScreen au début
function update()
    clearScreen("#000033")  // ✅ Une seule fois
    drawPlayer()
    drawEnemies()
end

Contrôles et Entrées

❌ Les touches ne répondent pas

Diagnostics :

  1. Orthographe des touches :
// ❌ Noms incorrects
if isKeyPressed("Up")      // ❌ Majuscule
if isKeyPressed("SPACE")   // ❌ Majuscules
if isKeyPressed("Left")    // ❌ Majuscule

// ✅ Noms corrects
if isKeyPressed("up")      // ✅ Minuscules
if isKeyPressed("space")   // ✅ Minuscules
if isKeyPressed("left")    // ✅ Minuscules
  1. Focus du canvas :
  2. Cliquez sur le canvas de jeu avant d'utiliser le clavier

  3. Le navigateur doit avoir le focus sur la page

  4. Touches supportées uniquement :

// ✅ Touches disponibles
"up", "down", "left", "right"  // Flèches + WASD
"space"                        // Barre d'espace

// ❌ Touches non supportées
"enter", "ctrl", "shift", "a", "b", etc.

❌ Mouvement trop rapide ou saccadé

Cause : Vitesse inadaptée au framerate (60 FPS).

Solution :

// ❌ Mouvement trop rapide
let speed = 50  // ❌ 50 pixels par frame = très rapide

if isKeyPressed("right")
    playerX = playerX + speed
end

// ✅ Vitesse adaptée
let speed = 3   // ✅ 3 pixels par frame = fluide

if isKeyPressed("right")
    playerX = playerX + speed
end

❌ Impossible d'arrêter le mouvement

Cause : Logique de mouvement continue même sans appui.

Solution :

// ❌ Mouvement automatique
let velocity = 5
function update()
    playerX = playerX + velocity  // ❌ Toujours en mouvement
end

// ✅ Mouvement conditionnel
function update()
    if isKeyPressed("right")
        playerX = playerX + 5
    end
    // ✅ Pas de mouvement si pas d'appui
end

Performance

❌ Jeu lent / saccadé

Causes et solutions :

  1. Trop de calculs dans update() :
// ❌ Calculs lourds répétés
function update()
    for i = 1 to 1000  // ❌ Boucle trop lourde
        for j = 1 to 1000
            drawPixel(i, j, "#FF0000")
        end
    end
end

// ✅ Calculs optimisés
function update()
    clearScreen("#000033")
    for i = 1 to 50  // ✅ Boucle raisonnable
        drawCircle(i * 8, 150, 3, "#FF0000")
    end
end
  1. Trop d'éléments graphiques :
// ❌ Trop d'objets dessinés
function update()
    clearScreen("#000033")
    for i = 1 to 500  // ❌ 500 cercles par frame
        drawCircle(i, 100, 5, "#FF0000")
    end
end

// ✅ Nombre raisonnable
function update()
    clearScreen("#000033")
    for i = 1 to 20   // ✅ 20 cercles suffisent
        drawCircle(i * 20, 100, 5, "#FF0000")
    end
end

❌ Mémoire qui augmente (fuite mémoire)

Cause : Variables qui s'accumulent sans nettoyage.

Prévention :

// ✅ Réutiliser les variables
let tempX = 0
let tempY = 0

function update()
    // Réutiliser tempX, tempY au lieu de créer nouvelles variables
    tempX = playerX + 10
    tempY = playerY + 5
    drawCircle(tempX, tempY, 10, "#FF0000")
end

FAQ Générale

❓ Pourquoi mon jeu ne se sauvegarde pas ?

Réponse : KodLab fonctionne dans le navigateur sans sauvegarde automatique.

Solutions : - Ctrl+S dans l'éditeur (sauvegarde temporaire navigateur) - Copier-coller le code dans un fichier .kod - Bookmarks pour sauvegarder l'état de l'éditeur

❓ Puis-je utiliser des images ?

Réponse : Non, KodLab ne supporte que les formes géométriques et le texte.

Alternatives créatives :

// Créer des sprites avec des rectangles
function drawPlayer()
    drawRect(playerX, playerY, 20, 20, "#00FF00")     // Corps
    drawRect(playerX + 5, playerY - 5, 10, 5, "#FFDDAA")  // Tête
    drawCircle(playerX + 7, playerY - 3, 1, "#000000")     // Œil gauche
    drawCircle(playerX + 13, playerY - 3, 1, "#000000")    // Œil droit
end

❓ Les sons ne fonctionnent pas ?

Causes possibles :

  1. Navigateur non compatible :
  2. Utilisez Chrome, Firefox, Safari ou Edge récents

  3. Vérifiez que Web Audio API est supporté

  4. Interaction utilisateur manquante :

  5. L'audio nécessite un clic utilisateur pour s'initialiser

  6. Cliquez une fois sur la page avant de lancer le jeu

  7. Volume système :

  8. Vérifiez que le volume n'est pas coupé

  9. Testez avec d'autres sites audio

  10. Note invalide :

// ❌ Notes incorrectes
playSound("do#", 0.2)    // Dièses non supportés
playSound("DO", 0.2)     // Majuscules non supportées
playSound("c", 0.2)      // Notation anglaise non supportée

// ✅ Notes correctes
playSound("do", 0.2)     // Notes françaises minuscules
playSound("re", 0.2)
playSound("mi", 0.2)

Solutions : - Testez l'exemple "Piano Virtuel" pour vérifier l'audio - Redémarrez le navigateur si nécessaire - Utilisez des durées entre 0.1 et 2.0 secondes

❓ Comment faire des niveaux multiples ?

Réponse : Utiliser des variables d'état et des conditions.

Exemple :

let currentLevel = 1
let levelCompleted = false

function update()
    if currentLevel == 1
        updateLevel1()
    else if currentLevel == 2
        updateLevel2()
    else if currentLevel == 3
        updateLevel3()
    end

    if levelCompleted
        currentLevel = currentLevel + 1
        levelCompleted = false
        initializeLevel()
    end
end

❓ Peut-on jouer à plusieurs ?

Réponse : Pas de multijoueur réseau, mais possible en local.

Exemple 2 joueurs :

// Joueur 1 : Flèches
if isKeyPressed("up")
    player1Y = player1Y - speed
end

// Joueur 2 : WASD (si supporté par le navigateur)
// Sinon, utiliser des touches alternées
if isKeyPressed("space")  // Action joueur 2
    player2Action()
end

❓ Comment déboguer mon code ?

Techniques de debug :

  1. Affichage des variables :
function update()
    clearScreen("#000033")

    // Debug : afficher les valeurs
    drawText("PlayerX: " + playerX, 10, 20, "#FFFF00")
    drawText("PlayerY: " + playerY, 10, 40, "#FFFF00")
    drawText("Speed: " + speed, 10, 60, "#FFFF00")
end
  1. Messages de progression :
function updatePlayer()
    drawText("Dans updatePlayer", 10, 100, "#00FF00")  // Debug

    if isKeyPressed("left")
        drawText("Touche gauche pressée", 10, 120, "#00FF00")
        playerX = playerX - speed
    end
end
  1. Test par étapes :
  2. Commenter des portions de code
  3. Tester une fonction à la fois
  4. Vérifier les valeurs limites

❓ Erreur "Uncaught SyntaxError" ?

Cause : Erreur de compilation non détectée.

Solution : 1. Vérifiez tous les end 2. Contrôlez les guillemets : " et ' 3. Vérifiez les parenthèses () 4. Rechargez la page et re-compilez

❓ Le jeu fonctionne sur Chrome mais pas sur Firefox ?

Réponse : Problème de compatibilité navigateur.

Solutions : - Utilisez Chrome ou Edge (recommandés) - Vérifiez que JavaScript est activé - Désactivez les bloqueurs de publicité sur la page - Testez en mode navigation privée

❓ Comment optimiser mon jeu ?

Conseils performance :

  1. Limiter les calculs :
// ✅ Calculer une fois, utiliser plusieurs fois
let distance = calculateDistance(player, enemy)
if distance < 50
    handleCollision()
end
if distance < 100
    playWarningSound()
end
  1. Éviter les boucles inutiles :
// ❌ Boucle lourde
for i = 1 to 1000
    if i == targetValue
        doSomething()
    end
end

// ✅ Accès direct
if targetValue <= 1000 && targetValue >= 1
    doSomething()
end
  1. Grouper les dessins :
// ✅ Dessiner par type/couleur
drawAllEnemies()      // Tous les ennemis ensemble
drawAllBullets()      // Toutes les balles ensemble  
drawAllPowerups()     // Tous les power-ups ensemble

🚨 Cas d'Urgence

Jeu complètement cassé ?

  1. Rechargez la page (F5)
  2. Copiez votre code dans un fichier texte
  3. Commencez par un exemple simple qui fonctionne
  4. Réintégrez votre code progressivement

Éditeur ne répond plus ?

  1. Ctrl+A puis Ctrl+C (copier tout)
  2. Rechargez la page
  3. Ctrl+V (coller le code)
  4. Re-compilez

Cette documentation de dépannage couvre 95% des problèmes rencontrés. Pour des problèmes spécifiques, analysez les messages d'erreur dans la console de debug !

🔧 Bon dépannage et bon coding ! 🚀