De CoddyRun à JavaScript

xPI est une constante vaut 3.14159

fonction airecercle(rayon)
    retourne xPI * rayon ^ 2
fin fonction

rayon est un nombre
demande "Entre un rayon : " dans rayon

si rayon <= 0 alors
    affiche "Le rayon doit être positif."
    terminer
fin si

affiche "Aire : " + convertir_texte(arrondi(airecercle(rayon)))

<form id="formulaire">
    <label for="rayon">Entre un rayon :</label>
    <input id="rayon" type="number" step="any" required>
    <button>Calculer</button>
</form>
<p id="resultat"></p>

<script>
    const PI = 3.14159;
    const formulaire = document.getElementById('formulaire');
    const resultat = document.getElementById('resultat');

    function aireCercle(rayon) {
        return PI * rayon ** 2;
    }

    formulaire.addEventListener('submit', e => {
        e.preventDefault();
        const rayon = Number(document.getElementById('rayon').value);

        if (rayon <= 0) {
            resultat.textContent = 'Le rayon doit être positif.';
            return;
        }

        resultat.textContent = 'Aire : ' + Math.round(aireCercle(rayon));
    });
</script>

somme est un nombre
n est un nombre

pour i de 1 à 3
    demande "Nombre " + convertir_texte(i) + " : " dans n
    somme ajoute n
fin pour

affiche "Somme : " + convertir_texte(somme)

<form id="formulaire">
    <label for="n" id="question"></label>
    <input id="n" type="number" step="any" required>
    <button>Valider</button>
</form>
<p id="resultat"></p>

<script>
    const formulaire = document.getElementById('formulaire');
    const question = document.getElementById('question');
    const resultat = document.getElementById('resultat');

    let i = 1;
    let somme = 0;

    function afficher() {
        question.textContent = 'Nombre ' + i + ' : ';
    }

    formulaire.addEventListener('submit', e => {
        e.preventDefault();
        somme += Number(document.getElementById('n').value);
        i += 1;
        formulaire.reset();

        if (i > 3) {
            formulaire.hidden = true;
            resultat.textContent = 'Somme : ' + somme;
        } else {
            afficher();
        }
    });

    afficher();
</script>

secret est un nombre
essai est un nombre
coups est un nombre

secret vaut hasard(1, 100)
essai vaut 0

tant que essai <> secret
    demande "Ton essai : " dans essai
    coups ajoute 1
    si essai < secret alors
        affiche "C'est plus !"
    sinon si essai > secret alors
        affiche "C'est moins !"
    fin si
fin tant que

affiche "Gagné en " + convertir_texte(coups) + " coups !"

<p>J'ai choisi un nombre entre 1 et 100.</p>
<form id="formulaire">
    <label for="essai">Ton essai :</label>
    <input id="essai" type="number" min="1" max="100" required>
    <button>Proposer</button>
</form>
<p id="indice"></p>

<script>
    const formulaire = document.getElementById('formulaire');
    const indice = document.getElementById('indice');

    const secret = 1 + Math.floor(Math.random() * 100);
    let coups = 0;

    formulaire.addEventListener('submit', e => {
        e.preventDefault();
        const essai = Number(document.getElementById('essai').value);
        coups += 1;
        formulaire.reset();

        if (essai < secret) {
            indice.textContent = "C'est plus !";
        } else if (essai > secret) {
            indice.textContent = "C'est moins !";
        } else {
            indice.textContent = 'Gagné en ' + coups + ' coups !';
            formulaire.hidden = true;
        }
    });
</script>

score est un nombre
choix est un nombre

affiche "Quelle est la capitale de la France ?"
choisir ["Lyon", "Paris", "Marseille"] dans choix
si choix = 2 alors
    score ajoute 1
fin si

affiche "Combien font 7 × 8 ?"
choisir ["54", "56", "64"] dans choix
si choix = 2 alors
    score ajoute 1
fin si

affiche "Score : " + convertir_texte(score) + " / 2"

<p id="question"></p>
<div id="choix"></div>
<p id="resultat"></p>

<script>
    const questions = [
        { texte: 'Quelle est la capitale de la France ?', options: ['Lyon', 'Paris', 'Marseille'], bonne: 2 },
        { texte: 'Combien font 7 × 8 ?', options: ['54', '56', '64'], bonne: 2 },
    ];
    const zoneQuestion = document.getElementById('question');
    const zoneChoix = document.getElementById('choix');
    const resultat = document.getElementById('resultat');

    let numero = 0;
    let score = 0;

    function afficher() {
        if (numero === questions.length) {
            zoneQuestion.textContent = '';
            zoneChoix.replaceChildren();
            resultat.textContent = 'Score : ' + score + ' / ' + questions.length;
            return;
        }
        const q = questions[numero];
        zoneQuestion.textContent = q.texte;
        zoneChoix.replaceChildren(...q.options.map((option, i) => {
            const bouton = document.createElement('button');
            bouton.textContent = option;
            bouton.dataset.n = i + 1;
            return bouton;
        }));
    }

    zoneChoix.addEventListener('click', e => {
        const bouton = e.target.closest('button');
        if (!bouton) return;
        if (Number(bouton.dataset.n) === questions[numero].bonne) score += 1;
        numero += 1;
        afficher();
    });

    afficher();
</script>

pour i de 5 à 1 pas -1
    affiche i
    pause 1000
fin pour

affiche "Décollage !"

<button id="lancer">Lancer</button>
<p id="ecran" style="font-size:2rem;font-weight:700"></p>

<script>
    const bouton = document.getElementById('lancer');
    const ecran = document.getElementById('ecran');

    let n = 0;
    let minuteur = null;

    function tic() {
        if (n > 0) {
            ecran.textContent = n;
            n -= 1;
        } else {
            ecran.textContent = 'Décollage !';
            clearInterval(minuteur);
            minuteur = null;
            bouton.disabled = false;
        }
    }

    bouton.addEventListener('click', () => {
        n = 5;
        bouton.disabled = true;
        tic();
        minuteur = setInterval(tic, 1000);
    });
</script>

t est une toile
x, y est un nombre
action est un nombre

dimension(t, 300, 200)
x vaut 140
y vaut 90

tant que vrai
    effacer(t)
    remplir(t, #1E2430)
    rectangle(t, x, y, 20, 20, #1D9BF0)
    affiche t
    appuyer ['z', 's', 'q', 'd'] dans action
    si action = 1 alors
        y soustrait 10
    sinon si action = 2 alors
        y ajoute 10
    sinon si action = 3 alors
        x soustrait 10
    sinon
        x ajoute 10
    fin si
    x vaut limiter(x, 0, 280)
    y vaut limiter(y, 0, 180)
fin tant que

<p>Cliquez dans le cadre, puis utilisez Z, Q, S, D ou les flèches.</p>
<canvas id="toile" width="300" height="200"></canvas>

<script>
    const canvas = document.getElementById('toile');
    const ctx = canvas.getContext('2d');

    let x = 140;
    let y = 90;

    const deplacements = {
        z: [0, -10], s: [0, 10], q: [-10, 0], d: [10, 0],
        arrowup: [0, -10], arrowdown: [0, 10], arrowleft: [-10, 0], arrowright: [10, 0],
    };

    function dessiner() {
        ctx.fillStyle = '#1E2430';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#1D9BF0';
        ctx.fillRect(x, y, 20, 20);
    }

    document.addEventListener('keydown', e => {
        const d = deplacements[e.key.toLowerCase()];
        if (!d) return;
        e.preventDefault();
        x = Math.min(Math.max(x + d[0], 0), 280);
        y = Math.min(Math.max(y + d[1], 0), 180);
        dessiner();
    });

    dessiner();
</script>

t est une toile
score est un nombre
cx, cy est un nombre
x, y est un nombre

dimension(t, 300, 200)
pour i de 1 à 5
    cx vaut hasard(20, 280)
    cy vaut hasard(20, 180)
    effacer(t)
    remplir(t, #1E2430)
    cercle(t, cx, cy, 18, #FFD43B)
    label(t, 8, 6, "Score : " + convertir_texte(score), #FFFFFF, 14)
    affiche t
    cliquer t dans x, y
    si clique(x, y, cx, cy, 18) alors
        score ajoute 1
        affiche "Touché !"
    sinon
        affiche "Raté..."
    fin si
fin pour
affiche "Score final : " + convertir_texte(score) + " / 5"

<canvas id="toile" width="300" height="200"></canvas>
<p id="message">Clique sur la cible ! 5 essais.</p>

<script>
    const canvas = document.getElementById('toile');
    const ctx = canvas.getContext('2d');
    const message = document.getElementById('message');

    const etat = { essai: 1, score: 0, cx: 0, cy: 0 };

    function hasard(a, b) {
        return a + Math.floor(Math.random() * (b - a + 1));
    }

    function dessiner() {
        ctx.fillStyle = '#1E2430';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#FFD43B';
        ctx.beginPath();
        ctx.arc(etat.cx, etat.cy, 18, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillStyle = '#FFFFFF';
        ctx.font = '14px sans-serif';
        ctx.textBaseline = 'top';
        ctx.fillText('Score : ' + etat.score, 8, 6);
    }

    function nouvelleCible() {
        etat.cx = hasard(20, 280);
        etat.cy = hasard(20, 180);
        dessiner();
    }

    canvas.addEventListener('click', e => {
        if (etat.essai > 5) return;
        const r = canvas.getBoundingClientRect();
        const x = (e.clientX - r.left) * canvas.width / r.width;
        const y = (e.clientY - r.top) * canvas.height / r.height;

        const touche = (x - etat.cx) ** 2 + (y - etat.cy) ** 2 <= 18 * 18;
        if (touche) etat.score += 1;
        etat.essai += 1;

        if (etat.essai > 5) {
            dessiner();
            message.textContent = 'Score final : ' + etat.score + ' / 5';
        } else {
            message.textContent = touche ? 'Touché !' : 'Raté...';
            nouvelleCible();
        }
    });

    nouvelleCible();
</script>

t est une toile
x, y, vx, vy est un nombre
action est un nombre

dimension(t, 300, 200)
x vaut 50
y vaut 50
vx vaut 4
vy vaut 3

processus Balle()
    tant que vrai
        x ajoute vx
        y ajoute vy
        si x < 10 ou x > 290 alors
            vx vaut -vx
        fin si
        si y < 10 ou y > 190 alors
            vy vaut -vy
        fin si
        effacer(t)
        remplir(t, #1E2430)
        cercle(t, x, y, 10, #FFD43B)
        affiche t
        pause 60
    fin tant que
fin processus

Balle()
tant que vrai
    appuyer ['p', 'r'] dans action
    si action = 1 alors
        suspendre
    sinon
        reprendre
    fin si
fin tant que

<canvas id="toile" width="300" height="200"></canvas>
<p><button id="pause">Pause</button></p>

<script>
    const canvas = document.getElementById('toile');
    const ctx = canvas.getContext('2d');
    const bouton = document.getElementById('pause');

    let x = 50, y = 50, vx = 4, vy = 3;
    let enPause = false;

    function image() {
        if (!enPause) {
            x += vx;
            y += vy;
            if (x < 10 || x > 290) vx = -vx;
            if (y < 10 || y > 190) vy = -vy;

            ctx.fillStyle = '#1E2430';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#FFD43B';
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(image);
    }

    bouton.addEventListener('click', () => {
        enPause = !enPause;
        bouton.textContent = enPause ? 'Reprendre' : 'Pause';
    });

    requestAnimationFrame(image);
</script>