# Tâche

Félicitations, vous avez été recruté en tant que développeur pour le jeu indépendant « Snail Simulator ». Votre objectif est de concevoir la **logique de déplacement de l'escargot**. Les escargots ne sont pas très rapides, et chaque escargot possède sa propre endurance. Vous devez calculer la distance maximale que l'escargot pourra parcourir s'il dépense `2%` de son endurance pour chaque mètre parcouru. Utilisez une boucle `while` pour résoudre ce problème puis **affichez le résultat à l'écran**. Bonne chance !

let stamina: number = 100;
let distance: number = 0;
const staminaPerMeter: number = 2;

while (stamina > ___) {
    stamina = ___ - ___;
    ___++;
}
console.log(`The snail got tired; it ran ${___} meters. This is a new record, congratulations!`)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css">


<link rel="stylesheet" href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-with-copyable-%26%3Dhighlighted-code.css">

<div class="button-container">
  <button class="button" onclick="toggleBlock1('hint-block1', 'solution-block1')">
    Astuce
  </button>
  <button class="button" onclick="toggleBlock1('solution-block1', 'hint-block1')">
    Solution
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Votre objectif est de remplir les blancs (<code>___</code>) avec les variables nécessaires. <br>
  2. L'escargot doit avoir <code>stamina</code> <b>au-dessus de zéro</b> pour pouvoir avancer.
  <br>
  3. À chaque mètre parcouru par l'escargot, il perd
  <code>stamina_per_meter</code> d'endurance.<br>
  4. Lorsque l'escargot a perdu de l'endurance, la distance parcourue doit augmenter de 1
  (<b>incrément</b>).<br>
  5. Enfin, affichez la <code>distance</code> que l'escargot a parcourue.
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let stamina: number = 100;
let distance: number = 0;
const staminaPerMeter: number = 2;

while (stamina > 0) {
    stamina = stamina - staminaPerMeter;
    distance++;
}
console.log(`The snail got tired; it ran ${distance} meters. This is a new record, congratulations!`)</textarea>

  <button class="copy-button" onclick="handleClick1('code-1')">
    <svg width="20" height="20" x="0" y="0" viewBox="0 0 32 32" style="enable-background: new 0 0 512 512" xml:space="preserve" class="">
      <g>
        <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6" opacity="1" data-original="#000000" class=""></path>
      </g>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

<script>
  document.addEventListener("readystatechange", (event) => {
    if (event.target.readyState === "complete") {
      onPageLoad1();
    }
  });

  function onPageLoad1() {
    var editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {
      lineNumbers: true,
      mode: "text/x-scala",
      theme: "dracula",
    });

    // ----------> HIGHLIGHT <----------
    editor.markText(
      { line: 0, ch: 0 },
      { line: 0, ch: 0 },
      { className: "specific" }
    );

    // Initially hide both the hint and solution blocks
    hideBlock1("hint-block1");
    hideBlock1("solution-block1");
  }

  // Copy Button handler
  const handleClick1 = (codeBlock) => {
    const textarea = document.getElementById(codeBlock);
    const copiedText = textarea.value;

    navigator.clipboard.writeText(copiedText);

    Notiflix.Notify.Success("Copied to clipboard!", {
      timeout: 2000,
      width: "260px",
      position: "center-top",
      textColor: "#ff5549",
    });
  };

  // Function to toggle the visibility of a block
  const toggleBlock1 = (blockId) => {
    const block = document.getElementById(blockId);

    if (block.style.display === "none" || block.style.display === "") {
      hideBlock1("hint-block1");
      hideBlock1("solution-block1");
      showBlock1(blockId);
    } else {
      hideBlock1(blockId);
    }
  };

  // Function to show a block
  const showBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "block";
  };

  // Function to hide a block
  const hideBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "none";
  };
</script>

Ce cours s'adresse aux débutants absolus souhaitant maîtriser les bases du langage de programmation TypeScript. TypeScript est un langage moderne et puissant qui étend les capacités de JavaScript, rendant votre code plus fiable et lisible. Nous commencerons par les notions fondamentales, en abordant les variables, les types de données, les opérateurs de comparaison et les instructions conditionnelles. Ensuite, nous explorerons la manipulation des tableaux et des boucles. À l'issue de ce cours, vous serez prêt à créer des programmes simples en TypeScript et à poursuivre votre apprentissage vers des sujets plus avancés.

Cette section vous présente TypeScript. Vous découvrirez pourquoi TypeScript est précieux et en quoi il diffère de JavaScript.

Nous allons prendre le contrôle du code. Dans cette section, vous apprendrez à définir des conditions pour l'exécution du code en TypeScript. Vous découvrirez pourquoi cela est utilisé et comment l'utiliser correctement, afin que votre code devienne un exemple pour les meilleurs programmeurs.

Familiarisons-nous avec une méthode pratique pour stocker des données dans une collection d’éléments : un tableau. Vous apprendrez à créer et utiliser des tableaux, ainsi qu’à ajouter et manipuler des éléments dans un tableau. Une structure importante et fondamentale pour tout programmeur.

Automatisation des tâches avec un grand volume de données ou de variables. Les boucles vous aideront à traiter une grande quantité de données et à obtenir rapidement des résultats en seulement quelques lignes de code. Nous explorerons les types fondamentaux de boucles et vous apprendrons à les utiliser efficacement.

Il est temps d’apprendre à écrire vos propres fonctions qui exécuteront les opérations que vous spécifiez. Les fonctions vous aideront à organiser votre code, à le diviser en parties gérables et à les appeler en une seule ligne. Il est temps d’apprendre !

Défi : Jeu de l'Escargot

Tâche

Awesome!

Défi : Jeu de l'Escargot

Tâche