# Taak

Gefeliciteerd, je bent aangenomen als ontwikkelaar voor de indiegame 'Snail Simulator'. Je doel is om de **bewegingslogica van de slak** te ontwerpen. Slakken zijn niet erg snel en elke slak heeft zijn eigen uithoudingsvermogen. Je moet de maximale afstand berekenen die de slak kan afleggen als hij voor elke meter `2%` van zijn uithoudingsvermogen verbruikt. Gebruik een `while`-lus om dit probleem op te lossen en **toon het resultaat op het scherm**. Succes!

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://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')">
    Hint
  </button>
  <button class="button" onclick="toggleBlock1('solution-block1', 'hint-block1')">
    Oplossing
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Je doel is om de lege plekken (<code>___</code>) in te vullen met de benodigde
  variabelen. <br>
  2. De slak moet <code>stamina</code> <b>boven nul</b> hebben om te bewegen.
  <br>
  3. Voor elke meter die de slak aflegt, verliest hij
  <code>stamina_per_meter</code> uithoudingsvermogen.<br>
  4. Wanneer de slak uithoudingsvermogen verliest, moet de afgelegde afstand met 1 worden verhoogd
  (<b>verhogen</b>).<br>
  5. Geef tenslotte de <code>distance</code> weer die de slak heeft afgelegd.
</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>

Deze cursus is bedoeld voor absolute beginners die de basisprincipes van de programmeertaal TypeScript willen beheersen. TypeScript is een moderne en krachtige taal die de mogelijkheden van JavaScript uitbreidt, waardoor uw code betrouwbaarder en leesbaarder wordt. We beginnen bij de absolute basis, waaronder variabelen, gegevenstypen, vergelijkingsoperatoren en conditionele instructies. Vervolgens gaan we dieper in op het werken met arrays en lussen. Na het voltooien van deze cursus bent u in staat om eenvoudige programma's in TypeScript te maken en uw leertraject voort te zetten naar meer geavanceerde onderwerpen.

Deze sectie introduceert TypeScript. U leert waarom TypeScript waardevol is en hoe het verschilt van JavaScript.

We nemen de controle over de code. In deze sectie leer je hoe je voorwaarden instelt voor code-uitvoering in TypeScript. Je ontdekt waarom dit wordt gebruikt en hoe je het correct toepast, zodat je code voldoet aan professionele standaarden.

Maak kennis met een handige manier om gegevens op te slaan in een verzameling elementen: een array. U leert hoe u arrays maakt en gebruikt, evenals hoe u elementen aan een array toevoegt en ermee werkt. Een belangrijke en fundamentele structuur voor elke programmeur.

Automatiseer taken met grote hoeveelheden data of variabelen. Lussen helpen hierbij, zodat u grote hoeveelheden data kunt verwerken en snel resultaten behaalt met slechts enkele regels code. We behandelen de fundamentele typen lussen en leren u hoe u hier effectief mee werkt.

Het is tijd om te leren hoe u uw eigen functies schrijft die de door u gespecificeerde bewerkingen uitvoeren. Functies helpen u uw code te organiseren door deze op te delen in beheersbare stukken en ze met één regel aan te roepen. Tijd om te leren!

Uitdaging: Slakkenspel

Taak

Awesome!

Uitdaging: Slakkenspel

Taak