HILFE.md

JS Snake

JavaScript Hilfe

---

Datentypen

String (Text)

let variable = "Das ist ein String";

Number (ganze Zahl)

let variable = 123;

Float (Zahl mit Nachkommastellen)

let variable = 0.123;

Boolean (wahr oder falsch)

let variable = true;

Array (Listen)

let variable = [10, 20, 30];

Objekt (Listen mit bennanten Einträgen)

let variable = { a: 10, b: 20, c: 30};

---

Sprachkonstrukte

Bedingungen (if)

if(5 > 3)
  // ... hier Code, der ausgeführt wird, wenn Bedingung erfüllt ist
}

Bedingungen (if - else)

if(a && b)
  // ... hier Code, der ausgeführt wird, wenn Bedingung erfüllt ist
}
else {
  // ... hier Code, der ausgeführt wird, wenn Bedingung NICHT erfüllt ist
}

For-Schleifen:

for(let i=0; i < 5; i++){
  // ... hier Code in der For-Schleife
}

While-Schleifen

while(!gameOver)
  // ... hier Code in der While-Schleife
}

Funktionen erstellen:

function meineFunktion() {
  // ... hier Code der Funktion
}

function meineFunktion(erstesArgument, zweitesArgument) {
  // ... hier Code der Funktion, mit zwei Argumenten
}

function meineFunktion() {
  // ... hier Code der Funktion, mit Rückgabewert
  return 3;
}

Funktionen aufrufen:

meineFunktion();

meineFunktion(erstesArgument, zweitesArgument);

let ergebnis = meineFunktion();

---

Mit "canvas" arbeiten

Setup (Zeichencontext und Größe)

canvas=document.getElementById("canvas");

canvas.width = 200;
canvas.height = 200;

ctx = canvas.getContext("2d");

Zeichenfarbe festlegen

ctx.fillStyle = "blue";

Liste der Farb-Namen:

https://html-color-codes.info/color-names/

Rechteck zeichen

ctx.fillRect(x, y, width, height);

---

Mit Arrays (Listen) arbeiten

Ein Element hinten in der Liste anfügen

array.push( {a: 1, b: 2} );

Das erste Element von der Liste entfernen

array.shift());

---

Mit Zeit arbeiten

Etwas 1x in 2 Sekunden passieren lassen

setTimeout(einmalFunktion, 2000)

Etwas alle 2 Sekunden passieren lassen

setInterval(vielfachFunktion, 1000)

Zeitversetzte Funktion stoppen

clearTimeout(timeout);

clearInterval(interval)

---

Mit Tastatur Eingaben arbeiten

Tastatur Ereignisse verarbeiten

document.addEventListener("keydown", onKeyDown);

function onKeyDown(evt){
  // "evt" enthält Informationen zu dem Ereignis
}

Gedrückte Tasten erkennen

function onKeyDown(evt){
  // evt.code == "ArrowLeft"
  // evt.code == "ArrowUp"
  // evt.code == "ArrowRight"
  // evt.code == "ArrowDown"
}

---

Mathe

Zufallszahl erzeugen (zwischen 0 und 1, z.B. 0.312379)

Math.random()

Eine Zahl runden (Nachkommastellen entfernen)

Math.floor();

Ganze Zufallszahl zwischen 0 und 30 erzeugen

Math.floor(Math.random() * 30); // z.B. 13