Skip to content

🎮 Exemples et Tutoriels - KodLab

Collection complète d'exemples de jeux avec explications détaillées et code commenté.

📋 Table des Matières

  1. Exemples Simples
  2. Jeux Complets
  3. Tutoriels Pas à Pas
  4. Techniques Avancées
  5. Défis et Exercices

Exemples Simples

1. Hello World Animé

Objectif: Premier programme avec animation simple

// Variables globales
let x = 0
let direction = 1

function start()
    clearScreen("#000033")
    drawText("KodLab initialisé!", 100, 100, "#FFFFFF")
end

function update()
    // Effacer l'écran
    clearScreen("#000033")

    // Animation rebond horizontal
    x = x + (direction * 3)
    if x > 350 || x < 0
        direction = direction * -1
    end

    // Affichage
    drawCircle(x + 25, 150, 25, "#FF6600")
    drawText("Hello KodLab!", x, 100, "#FFFFFF")
    drawText("Position X: " + x, 10, 20, "#CCCCCC")
end

Concepts appris: - Structure de base (start() / update()) - Variables et modification - Animation simple - Rebonds et limites

2. Contrôle Joueur

Objectif: Contrôler un objet avec le clavier

let playerX = 200
let playerY = 150
let speed = 4

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

function update()
    clearScreen("#001122")

    // Gestion des contrôles
    if isKeyPressed("left") && playerX > 20
        playerX = playerX - speed
    end
    if isKeyPressed("right") && playerX < 380
        playerX = playerX + speed
    end
    if isKeyPressed("up") && playerY > 20
        playerY = playerY - speed
    end
    if isKeyPressed("down") && playerY < 280
        playerY = playerY + speed
    end

    // Affichage du joueur
    drawRect(playerX - 10, playerY - 10, 20, 20, "#00FF00")

    // Interface
    drawText("Utilisez les flèches pour vous déplacer", 50, 20, "#FFFFFF")
    drawText("Position: (" + playerX + ", " + playerY + ")", 10, 280, "#CCCCCC")
end

Concepts appris: - Gestion des entrées clavier - Limitation des mouvements - Coordonnées et positionnement

2.5. Sons et Audio

Objectif: Découvrir le système audio avec des effets sonores

let playerX = 200
let playerY = 150
let speed = 4
let soundTimer = 0
let noteIndex = 0
let melody = ["do", "re", "mi", "fa", "sol", "la", "si", "do2"]

function start()
    clearScreen("#000033")
    playSound("do", 0.5)  // Son de démarrage
end

function update()
    clearScreen("#000033")

    // Contrôles avec sons de pas
    if isKeyPressed("left") && playerX > 20
        playerX = playerX - speed
        if soundTimer <= 0
            playSound("re", 0.1)  // Son de pas
            soundTimer = 10
        end
    end
    if isKeyPressed("right") && playerX < 380
        playerX = playerX + speed
        if soundTimer <= 0
            playSound("re", 0.1)
            soundTimer = 10
        end
    end
    if isKeyPressed("up") && playerY > 20
        playerY = playerY - speed
        if soundTimer <= 0
            playSound("mi", 0.1)
            soundTimer = 10
        end
    end
    if isKeyPressed("down") && playerY < 280
        playerY = playerY + speed
        if soundTimer <= 0
            playSound("mi", 0.1)
            soundTimer = 10
        end
    end

    // Action spéciale avec mélodie
    if isKeyPressed("space")
        if soundTimer <= 0
            playSound(melody[noteIndex], 0.3)
            noteIndex = noteIndex + 1
            if noteIndex >= 8
                noteIndex = 0
            end
            soundTimer = 20
        end
    end

    // Décrémenter le timer
    if soundTimer > 0
        soundTimer = soundTimer - 1
    end

    // Affichage
    drawCircle(playerX, playerY, 15, "#00FF00")

    // Interface
    drawText("Sons et Mouvements", 120, 20, "#FFFFFF")
    drawText("Flèches: Se déplacer (sons de pas)", 50, 40, "#CCCCCC")
    drawText("Espace: Jouer mélodie", 50, 60, "#CCCCCC")
    drawText("Note suivante: " + melody[noteIndex], 50, 280, "#FFFF00")
end

Concepts appris: - Fonction playSound() et notes musicales - Effets sonores contextuels (pas, actions) - Timer pour éviter la répétition de sons - Séquences musicales simples

3. Collecteur Simple

Objectif: Mécaniques de base avec objectifs

let playerX = 200
let playerY = 150
let speed = 3

let coinX = 100
let coinY = 100
let score = 0
let collectionDistance = 30

function start()
    clearScreen("#000033")
    placeCoin()
end

function update()
    clearScreen("#000033")

    // Mouvement joueur
    if isKeyPressed("left") && playerX > 15
        playerX = playerX - speed
    end
    if isKeyPressed("right") && playerX < 385
        playerX = playerX + speed
    end
    if isKeyPressed("up") && playerY > 15
        playerY = playerY - speed
    end
    if isKeyPressed("down") && playerY < 285
        playerY = playerY + speed
    end

    // Vérification collision avec pièce
    let dx = playerX - coinX
    let dy = playerY - coinY
    let distance = (dx * dx) + (dy * dy)

    if distance < (collectionDistance * collectionDistance)
        score = score + 10
        placeCoin()
    end

    // Affichage
    drawCircle(playerX, playerY, 15, "#00FF00")  // Joueur
    drawCircle(coinX, coinY, 10, "#FFFF00")     // Pièce

    // Interface
    drawText("Score: " + score, 10, 20, "#FFFFFF")
    drawText("Collectez les pièces jaunes!", 10, 40, "#CCCCCC")
end

function placeCoin()
    // Position pseudo-aléatoire basée sur le score
    coinX = 30 + ((score * 7) % 340)
    coinY = 30 + ((score * 11) % 240)
end

Concepts appris: - Détection de collision (distance) - Score et récompenses - Placement d'objets - Fonctions personnalisées

Jeux Complets

1. Pong - Analyse Détaillée

Le Pong est un excellent exemple pour apprendre les mécaniques de base :

// === VARIABLES DE JEU ===
let ballX = 200
let ballY = 150
let ballSpeedX = 3
let ballSpeedY = 2
let ballSize = 8

// Raquette joueur (gauche)
let playerY = 120
let playerHeight = 60
let playerWidth = 10
let playerSpeed = 4

// Raquette IA (droite)  
let aiY = 120
let aiHeight = 60
let aiWidth = 10
let aiSpeed = 2.5

// Score
let playerScore = 0
let aiScore = 0

function start()
    clearScreen("#000000")
    drawText("PONG - Utilisez les flèches Haut/Bas", 80, 30, "#FFFFFF")
end

function update()
    clearScreen("#001100")

    // === CONTRÔLES JOUEUR ===
    if isKeyPressed("up") && playerY > 0
        playerY = playerY - playerSpeed
    end
    if isKeyPressed("down") && playerY < 240
        playerY = playerY + playerSpeed
    end

    // === IA SIMPLE ===
    // L'IA suit la balle avec un délai
    let aiCenter = aiY + (aiHeight / 2)
    if aiCenter < ballY - 10
        aiY = aiY + aiSpeed
    else if aiCenter > ballY + 10
        aiY = aiY - aiSpeed
    end

    // Limites IA
    if aiY < 0
        aiY = 0
    end
    if aiY > 240
        aiY = 240
    end

    // === PHYSIQUE DE LA BALLE ===
    ballX = ballX + ballSpeedX
    ballY = ballY + ballSpeedY

    // Rebonds haut/bas
    if ballY <= ballSize || ballY >= 300 - ballSize
        ballSpeedY = ballSpeedY * -1
    end

    // === COLLISIONS RAQUETTES ===
    // Collision raquette joueur
    if ballX <= playerWidth + ballSize && 
       ballY >= playerY && 
       ballY <= playerY + playerHeight &&
       ballSpeedX < 0
        ballSpeedX = ballSpeedX * -1
        ballX = playerWidth + ballSize  // Évite que la balle reste collée
    end

    // Collision raquette IA
    if ballX >= 400 - aiWidth - ballSize && 
       ballY >= aiY && 
       ballY <= aiY + aiHeight &&
       ballSpeedX > 0
        ballSpeedX = ballSpeedX * -1
        ballX = 400 - aiWidth - ballSize
    end

    // === SYSTÈME DE SCORE ===
    // Point pour l'IA (balle sort à gauche)
    if ballX < -ballSize
        aiScore = aiScore + 1
        resetBall()
    end

    // Point pour le joueur (balle sort à droite)
    if ballX > 400 + ballSize
        playerScore = playerScore + 1
        resetBall()
    end

    // === AFFICHAGE ===
    // Terrain
    drawLine(200, 0, 200, 300, "#333333")  // Ligne centrale

    // Raquettes
    drawRect(0, playerY, playerWidth, playerHeight, "#FFFFFF")
    drawRect(390, aiY, aiWidth, aiHeight, "#FFFFFF")

    // Balle
    drawCircle(ballX, ballY, ballSize, "#FFFFFF")

    // Score
    drawText("" + playerScore, 180, 50, "#FFFFFF")
    drawText("" + aiScore, 220, 50, "#FFFFFF")

    // Instructions
    if playerScore == 0 && aiScore == 0
        drawText("Premier à 5 points gagne!", 100, 280, "#CCCCCC")
    end

    // Victoire
    if playerScore >= 5
        drawText("VICTOIRE JOUEUR!", 130, 150, "#00FF00")
    else if aiScore >= 5
        drawText("VICTOIRE IA!", 150, 150, "#FF0000")
    end
end

function resetBall()
    ballX = 200
    ballY = 150

    // Direction aléatoire basée sur le score
    if (playerScore + aiScore) % 2 == 0
        ballSpeedX = 3
    else
        ballSpeedX = -3
    end

    ballSpeedY = 2
end

Techniques importantes: - Physique simple : Vitesse constante + rebonds - IA basique : Suivre la balle avec délai - Détection collision : Rectangle vs Circle - Système de score : Zones de sortie - Reset d'état : Remise à zéro contrôlée

2. Snake - Mécaniques Avancées

// === CONFIGURATION ===
let GRID_SIZE = 20
let GAME_WIDTH = 20   // 400 / 20 = 20 cases
let GAME_HEIGHT = 15  // 300 / 20 = 15 cases

// Serpent (simulé avec variables multiples)
let snakeLength = 3
let snakeX1 = 10
let snakeY1 = 7
let snakeX2 = 9
let snakeY2 = 7
let snakeX3 = 8
let snakeY3 = 7

let directionX = 1
let directionY = 0

let nextDirectionX = 1
let nextDirectionY = 0

// Nourriture
let foodX = 15
let foodY = 10

// État du jeu
let score = 0
let gameOver = false
let moveCounter = 0
let moveDelay = 15  // Frames entre chaque mouvement

function start()
    clearScreen("#003300")
    placeFoodRandomly()
end

function update()
    if !gameOver
        clearScreen("#003300")

        handleInput()
        updateSnake()
        checkCollisions()

        drawGame()
        drawUI()
    else
        handleGameOver()
    end
end

function handleInput()
    // Prévention du retour en arrière
    if isKeyPressed("up") && directionY != 1
        nextDirectionX = 0
        nextDirectionY = -1
    end
    if isKeyPressed("down") && directionY != -1
        nextDirectionX = 0
        nextDirectionY = 1
    end
    if isKeyPressed("left") && directionX != 1
        nextDirectionX = -1
        nextDirectionY = 0
    end
    if isKeyPressed("right") && directionX != -1
        nextDirectionX = 1
        nextDirectionY = 0
    end
end

function updateSnake()
    moveCounter = moveCounter + 1

    if moveCounter >= moveDelay
        moveCounter = 0

        // Appliquer la nouvelle direction
        directionX = nextDirectionX
        directionY = nextDirectionY

        // Sauvegarder l'ancienne tête
        let oldHeadX = snakeX1
        let oldHeadY = snakeY1

        // Nouvelle position de la tête
        snakeX1 = snakeX1 + directionX
        snakeY1 = snakeY1 + directionY

        // Déplacer le corps (simulation de queue)
        if snakeLength >= 3
            snakeX3 = snakeX2
            snakeY3 = snakeY2
        end
        if snakeLength >= 2
            snakeX2 = oldHeadX
            snakeY2 = oldHeadY
        end
    end
end

function checkCollisions()
    // Collision avec les murs
    if snakeX1 < 0 || snakeX1 >= GAME_WIDTH || snakeY1 < 0 || snakeY1 >= GAME_HEIGHT
        gameOver = true
    end

    // Collision avec le corps (simplifié pour 3 segments)
    if snakeLength >= 3
        if snakeX1 == snakeX3 && snakeY1 == snakeY3
            gameOver = true
        end
    end

    // Collision avec la nourriture
    if snakeX1 == foodX && snakeY1 == foodY
        score = score + 10
        if snakeLength < 3  // Limite à 3 segments pour simplicité
            snakeLength = snakeLength + 1
        end
        placeFoodRandomly()

        // Accélération progressive
        if moveDelay > 8
            moveDelay = moveDelay - 1
        end
    end
end

function placeFoodRandomly()
    // Placement pseudo-aléatoire basé sur le score
    foodX = ((score * 7) + 13) % GAME_WIDTH
    foodY = ((score * 11) + 17) % GAME_HEIGHT

    // Éviter la tête du serpent
    if foodX == snakeX1 && foodY == snakeY1
        foodX = (foodX + 3) % GAME_WIDTH
        foodY = (foodY + 2) % GAME_HEIGHT
    end
end

function drawGame()
    // Grille de fond (optionnelle)
    for x = 0 to GAME_WIDTH - 1
        drawLine(x * GRID_SIZE, 0, x * GRID_SIZE, 300, "#006600")
    end
    for y = 0 to GAME_HEIGHT - 1
        drawLine(0, y * GRID_SIZE, 400, y * GRID_SIZE, "#006600")
    end

    // Serpent
    drawRect(snakeX1 * GRID_SIZE, snakeY1 * GRID_SIZE, GRID_SIZE - 2, GRID_SIZE - 2, "#00FF00")  // Tête

    if snakeLength >= 2
        drawRect(snakeX2 * GRID_SIZE, snakeY2 * GRID_SIZE, GRID_SIZE - 2, GRID_SIZE - 2, "#00CC00")  // Corps
    end
    if snakeLength >= 3
        drawRect(snakeX3 * GRID_SIZE, snakeY3 * GRID_SIZE, GRID_SIZE - 2, GRID_SIZE - 2, "#009900")  // Queue
    end

    // Nourriture
    drawCircle((foodX * GRID_SIZE) + (GRID_SIZE / 2), (foodY * GRID_SIZE) + (GRID_SIZE / 2), GRID_SIZE / 3, "#FF0000")
end

function drawUI()
    drawText("Score: " + score, 10, 20, "#FFFFFF")
    drawText("Longueur: " + snakeLength, 150, 20, "#FFFFFF")
    drawText("Vitesse: " + (20 - moveDelay), 280, 20, "#FFFFFF")
end

function handleGameOver()
    clearScreen("#330000")

    drawText("GAME OVER", 150, 120, "#FF0000")
    drawText("Score Final: " + score, 140, 140, "#FFFFFF")
    drawText("Appuyez sur ESPACE pour rejouer", 80, 180, "#CCCCCC")

    if isKeyPressed("space")
        restartGame()
    end
end

function restartGame()
    // Reset toutes les variables
    snakeLength = 3
    snakeX1 = 10
    snakeY1 = 7
    snakeX2 = 9
    snakeY2 = 7
    snakeX3 = 8
    snakeY3 = 7
    directionX = 1
    directionY = 0
    nextDirectionX = 1
    nextDirectionY = 0
    score = 0
    gameOver = false
    moveCounter = 0
    moveDelay = 15
    placeFoodRandomly()
end

Techniques importantes: - Mouvement temporisé : moveCounter et moveDelay - Prévention retour arrière : Vérification direction opposée - Simulation de queue : Variables multiples pour segments - Placement intelligent : Éviter les collisions lors du spawn - Progression de difficulté : Accélération avec le score

Tutoriels Pas à Pas

Tutoriel 1 : Créer un Casse-Briques

Étape 1 : Structure de Base

// Variables de base
let ballX = 200
let ballY = 250
let ballSpeedX = 3
let ballSpeedY = -3
let ballRadius = 5

let paddleX = 160
let paddleY = 280
let paddleWidth = 80
let paddleHeight = 10
let paddleSpeed = 6

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

function update()
    clearScreen("#000033")

    // Dessiner les éléments
    drawCircle(ballX, ballY, ballRadius, "#FFFFFF")
    drawRect(paddleX, paddleY, paddleWidth, paddleHeight, "#00FF00")
end

Étape 2 : Mouvement de la Balle

function update()
    clearScreen("#000033")

    // Mouvement de la balle
    ballX = ballX + ballSpeedX
    ballY = ballY + ballSpeedY

    // Rebonds sur les murs
    if ballX <= ballRadius || ballX >= 400 - ballRadius
        ballSpeedX = ballSpeedX * -1
    end
    if ballY <= ballRadius
        ballSpeedY = ballSpeedY * -1
    end

    // Dessiner les éléments
    drawCircle(ballX, ballY, ballRadius, "#FFFFFF")
    drawRect(paddleX, paddleY, paddleWidth, paddleHeight, "#00FF00")
end

Étape 3 : Contrôle de la Raquette

function update()
    clearScreen("#000033")

    // Contrôle raquette
    if isKeyPressed("left") && paddleX > 0
        paddleX = paddleX - paddleSpeed
    end
    if isKeyPressed("right") && paddleX < 400 - paddleWidth
        paddleX = paddleX + paddleSpeed
    end

    // Mouvement balle + rebonds (code précédent)
    // ...

    // Collision balle-raquette
    if ballY + ballRadius >= paddleY &&
       ballX >= paddleX &&
       ballX <= paddleX + paddleWidth &&
       ballSpeedY > 0
        ballSpeedY = ballSpeedY * -1
        ballY = paddleY - ballRadius  // Éviter le collage
    end

    // Dessiner les éléments
    drawCircle(ballX, ballY, ballRadius, "#FFFFFF")
    drawRect(paddleX, paddleY, paddleWidth, paddleHeight, "#00FF00")
end

Étape 4 : Ajout des Briques (Simplifié)

// Variables briques
let brick1X = 50
let brick1Y = 50
let brick1Active = true

let brick2X = 150
let brick2Y = 50
let brick2Active = true

let brick3X = 250
let brick3Y = 50
let brick3Active = true

let brickWidth = 80
let brickHeight = 20

function update()
    clearScreen("#000033")

    // Code mouvement et contrôles précédent...

    // Collision avec briques
    checkBrickCollision(1)
    checkBrickCollision(2)
    checkBrickCollision(3)

    // Dessiner briques
    if brick1Active
        drawRect(brick1X, brick1Y, brickWidth, brickHeight, "#FF6600")
    end
    if brick2Active
        drawRect(brick2X, brick2Y, brickWidth, brickHeight, "#FF6600")
    end
    if brick3Active
        drawRect(brick3X, brick3Y, brickWidth, brickHeight, "#FF6600")
    end

    // Dessiner balle et raquette
    drawCircle(ballX, ballY, ballRadius, "#FFFFFF")
    drawRect(paddleX, paddleY, paddleWidth, paddleHeight, "#00FF00")
end

function checkBrickCollision(brickNum)
    let bx = 0
    let by = 0
    let active = false

    if brickNum == 1
        bx = brick1X
        by = brick1Y
        active = brick1Active
    else if brickNum == 2
        bx = brick2X
        by = brick2Y
        active = brick2Active
    else if brickNum == 3
        bx = brick3X
        by = brick3Y
        active = brick3Active
    end

    if active
        if ballX + ballRadius >= bx &&
           ballX - ballRadius <= bx + brickWidth &&
           ballY + ballRadius >= by &&
           ballY - ballRadius <= by + brickHeight

            // Détruire la brique
            if brickNum == 1
                brick1Active = false
            else if brickNum == 2
                brick2Active = false
            else if brickNum == 3
                brick3Active = false
            end

            // Rebond de la balle
            ballSpeedY = ballSpeedY * -1
        end
    end
end

Tutoriel 2 : Système de Particules

Objectif : Créer un effet d'explosion simple

// Système de particules (maximum 5)
let particle1X = 0
let particle1Y = 0
let particle1VX = 0  // Vitesse X
let particle1VY = 0  // Vitesse Y
let particle1Life = 0

let particle2X = 0
let particle2Y = 0
let particle2VX = 0
let particle2VY = 0
let particle2Life = 0

// ... répéter pour particle3, 4, 5

let explosionX = 200
let explosionY = 150

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

function update()
    clearScreen("#000011")

    // Déclencher explosion avec espace
    if isKeyPressed("space")
        createExplosion(explosionX, explosionY)

        // Nouvelle position pour la prochaine
        explosionX = (explosionX + 100) % 400
        explosionY = (explosionY + 80) % 300
    end

    updateParticles()
    drawParticles()

    // Instructions
    drawText("Appuyez sur ESPACE pour exploser", 80, 20, "#FFFFFF")
end

function createExplosion(x, y)
    // Particule 1 : vers le haut-gauche
    if particle1Life <= 0
        particle1X = x
        particle1Y = y
        particle1VX = -3
        particle1VY = -4
        particle1Life = 40
    end

    // Particule 2 : vers le haut-droite
    if particle2Life <= 0
        particle2X = x
        particle2Y = y
        particle2VX = 3
        particle2VY = -4
        particle2Life = 35
    end

    // Particule 3 : vers le bas-gauche
    if particle3Life <= 0
        particle3X = x
        particle3Y = y
        particle3VX = -2
        particle3VY = 2
        particle3Life = 30
    end

    // Particule 4 : vers le bas-droite
    if particle4Life <= 0
        particle4X = x
        particle4Y = y
        particle4VX = 2
        particle4VY = 2
        particle4Life = 32
    end

    // Particule 5 : vers le haut
    if particle5Life <= 0
        particle5X = x
        particle5Y = y
        particle5VX = 0
        particle5VY = -5
        particle5Life = 45
    end
end

function updateParticles()
    // Particule 1
    if particle1Life > 0
        particle1X = particle1X + particle1VX
        particle1Y = particle1Y + particle1VY
        particle1VY = particle1VY + 0.1  // Gravité légère
        particle1Life = particle1Life - 1
    end

    // Particule 2
    if particle2Life > 0
        particle2X = particle2X + particle2VX
        particle2Y = particle2Y + particle2VY
        particle2VY = particle2VY + 0.1
        particle2Life = particle2Life - 1
    end

    // Répéter pour toutes les particules...
end

function drawParticles()
    // Particule 1 - Couleur qui évolue avec la vie
    if particle1Life > 0
        let color = "#FFFF00"
        if particle1Life < 20
            color = "#FF6600"  // Orange quand elle vieillit
        end
        if particle1Life < 10
            color = "#FF0000"  // Rouge à la fin
        end
        drawCircle(particle1X, particle1Y, 3, color)
    end

    // Particule 2
    if particle2Life > 0
        let color = "#FFFF00"
        if particle2Life < 15
            color = "#FF6600"
        end
        if particle2Life < 8
            color = "#FF0000"
        end
        drawCircle(particle2X, particle2Y, 2, color)
    end

    // Répéter pour toutes les particules...
end

Techniques apprises: - Physique de base : Position + vitesse + gravité - Gestion du cycle de vie : Création, mise à jour, destruction - Effets visuels : Changement de couleur avec l'âge - Réutilisation d'objets : Vérification life <= 0 avant création

Techniques Avancées

1. Machine à États Complexe

let gameState = "menu"
let menuSelection = 0
let menuOptions = 3
let stateTimer = 0

// États de jeu
let playing = false
let paused = false
let gameOver = false

// Transitions d'état
let fadeAlpha = 0
let transitioning = false

function update()
    stateTimer = stateTimer + 1

    if gameState == "menu"
        updateMenu()
    else if gameState == "fadeIn"
        updateFadeIn()
    else if gameState == "playing"
        updatePlaying()
    else if gameState == "fadeOut"
        updateFadeOut()
    else if gameState == "gameOver"
        updateGameOver()
    end
end

function updateMenu()
    clearScreen("#000033")

    // Navigation menu
    if isKeyPressed("up") && stateTimer > 10
        menuSelection = menuSelection - 1
        if menuSelection < 0
            menuSelection = menuOptions - 1
        end
        stateTimer = 0
    end

    if isKeyPressed("down") && stateTimer > 10
        menuSelection = menuSelection + 1
        if menuSelection >= menuOptions
            menuSelection = 0
        end
        stateTimer = 0
    end

    // Sélection
    if isKeyPressed("space")
        if menuSelection == 0  // Jouer
            gameState = "fadeIn"
            fadeAlpha = 0
        else if menuSelection == 1  // Options
            // Gérer options
        else if menuSelection == 2  // Quitter
            // Retour système
        end
    end

    drawMenu()
end

function drawMenu()
    drawText("MON JEU GÉNIAL", 120, 80, "#FFFF00")

    // Options du menu
    let color1 = menuSelection == 0 ? "#FFFFFF" : "#666666"
    let color2 = menuSelection == 1 ? "#FFFFFF" : "#666666"
    let color3 = menuSelection == 2 ? "#FFFFFF" : "#666666"

    drawText("> Jouer", 160, 130, color1)
    drawText("> Options", 160, 150, color2)
    drawText("> Quitter", 160, 170, color3)

    // Animation curseur
    let cursorY = 130 + (menuSelection * 20)
    let cursorX = 140 + ((stateTimer / 10) % 4)
    drawText(">", cursorX, cursorY, "#00FF00")
end

function updateFadeIn()
    fadeAlpha = fadeAlpha + 5
    if fadeAlpha >= 100
        gameState = "playing"
        initGame()
    end

    // Dessiner transition
    drawTransition()
end

function updateFadeOut()
    fadeAlpha = fadeAlpha - 5
    if fadeAlpha <= 0
        gameState = "menu"
        resetGame()
    end

    drawTransition()
end

function drawTransition()
    // Simulation d'un fade avec rectangles
    if fadeAlpha > 0
        let alpha = fadeAlpha / 100
        for i = 0 to 10
            if i < alpha * 10
                drawRect(0, i * 30, 400, 30, "#000000")
            end
        end
    end
end

2. Système de Collision Avancé

// Structure d'entité simplifiée
let entity1X = 100
let entity1Y = 100
let entity1W = 20
let entity1H = 20
let entity1Type = "player"

let entity2X = 200
let entity2Y = 150
let entity2W = 30
let entity2H = 30
let entity2Type = "enemy"

function checkAllCollisions()
    // Vérifier collision entre entity1 et entity2
    if checkEntityCollision(1, 2)
        handleCollision(1, 2)
    end

    // Vérifier collisions avec les limites
    checkBoundaryCollisions(1)
    checkBoundaryCollisions(2)
end

function checkEntityCollision(id1, id2)
    let x1, y1, w1, h1, x2, y2, w2, h2

    // Récupérer données entity1
    if id1 == 1
        x1 = entity1X
        y1 = entity1Y
        w1 = entity1W
        h1 = entity1H
    else if id1 == 2
        x1 = entity2X
        y1 = entity2Y
        w1 = entity2W
        h1 = entity2H
    end

    // Récupérer données entity2
    if id2 == 1
        x2 = entity1X
        y2 = entity1Y
        w2 = entity1W
        h2 = entity1H
    else if id2 == 2
        x2 = entity2X
        y2 = entity2Y
        w2 = entity2W
        h2 = entity2H
    end

    // Test AABB
    if x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2
        return true
    end
    return false
end

function handleCollision(id1, id2)
    // Déterminer les types
    let type1 = ""
    let type2 = ""

    if id1 == 1
        type1 = entity1Type
    else if id1 == 2
        type1 = entity2Type
    end

    if id2 == 1
        type2 = entity1Type
    else if id2 == 2
        type2 = entity2Type
    end

    // Gestion selon les types
    if (type1 == "player" && type2 == "enemy") || (type1 == "enemy" && type2 == "player")
        handlePlayerEnemyCollision(id1, id2)
    else if (type1 == "player" && type2 == "powerup") || (type1 == "powerup" && type2 == "player")
        handlePlayerPowerupCollision(id1, id2)
    end
end

function handlePlayerEnemyCollision(playerId, enemyId)
    // Dégâts au joueur
    playerHealth = playerHealth - 10

    // Push-back effect
    if playerId == 1
        entity1X = entity1X - 10
    end

    // Effet visuel
    createExplosionAt(entity1X, entity1Y)
end

Défis et Exercices

Défi 1 : Pac-Man Simplifié

Objectifs: - Créer un labyrinthe avec des murs - Joueur qui mange des points - Fantômes qui suivent le joueur - Score et vies

Contraintes KodLab: - Utiliser drawRect() pour les murs - Grille 20x15 (20 pixels par case) - Maximum 3 fantômes (variables séparées)

Structure suggérée:

// Grille du labyrinthe (simulée avec des conditions)
function isWall(gridX, gridY)
    // Définir les murs avec des conditions
    if gridX == 0 || gridX == 19 || gridY == 0 || gridY == 14
        return true  // Bordures
    end

    // Murs intérieurs (exemple)
    if gridX == 5 && (gridY >= 3 && gridY <= 10)
        return true
    end

    return false
end

Défi 2 : Tower Defense Minimaliste

Objectifs: - Ennemis qui suivent un chemin - Tours qui tirent automatiquement - Ressources et construction - Vagues d'ennemis

Défi 3 : Tetris Élémentaire

Objectifs: - Pièces qui tombent - Rotation des pièces - Lignes complètes qui disparaissent - Score progressif

Exercices Pratiques

Exercice 1 : Améliorer Pong

  • Ajouter des power-ups (balle rapide, raquette plus grande)
  • Effets de particules quand la balle touche
  • Menus de sélection de difficulté
  • Sauvegarde du meilleur score

Exercice 2 : Étendre Snake

  • Obstacles sur le terrain
  • Power-ups temporaires (vitesse, traverser murs)
  • Plusieurs niveaux avec layouts différents
  • Snake qui grandit plus intelligemment

Exercice 3 : Créer Asteroids

  • Vaisseau avec inertie
  • Asteroids qui se divisent
  • Soucoupes volantes ennemies
  • Système de vies et hyperespace

Cette collection d'exemples et tutoriels couvre tous les aspects de la programmation de jeux avec KodLab. Commencez par les exemples simples, puis progressez vers les projets plus complexes !

🚀 À vous de jouer ! Créez vos propres variations et partagez vos créations !