[FEATURE] add Blockly Dungeon

blockly/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

blockly/doc/blocks.md

@@ -0,0 +1,163 @@
+---
+title: "Blockly: Blöcke und Funktionen"
+---
+
+# Blöcke und Funktionen
+
+## Kategorien
+
+### Start
+
+![Start](img/blocks/start.png)
+
+Der Startblock dient als Einstiegspunkt für das Programm. Alle Blöcke, welche nicht mit dem Startblock verbunden sind, werden ausgegraut und können nicht ausgeführt werden (ausgenommen Variablenzuweisung).
+
+### Bewegung
+
+Die Bewegungsblöcke dienen dazu, den Charakter zu bewegen. Die Bewegung erfolgt immer um die zugewiesene Einheit in die angegebene Richtung.
+
+#### Oben
+
+![oben](img/blocks/movement/up.png)
+
+Bewege den Charakter um die angegebene Einheit nach oben.
+
+#### Unten
+
+![unten](img/blocks/movement/down.png)
+
+Bewege den Charakter um die angegebene Einheit nach unten.
+
+#### Links
+
+![links](img/blocks/movement/left.png)
+
+Bewege den Charakter um die angegebene Einheit nach links.
+
+#### Rechts
+
+![rechts](img/blocks/movement/right.png)
+
+Bewege den Charakter um die angegebene Einheit nach rechts.
+
+#### Variablen Block
+
+![Variable](img/blocks/movement/get_var.png)
+
+Der Variablen Block dient dazu, die Anzahl der Einheiten zu bestimmen, um die der Charakter bewegt werden soll. Die Anzahl der Einheiten wird aus der Variablen ausgelesen, welche dem Block zugewiesen ist. Der Block kann zusätzlich dazu verwendet werden, die Wiederholungen einer Schleife festzulegen.
+
+### Variablen erstellen
+
+#### Variablen erstellen "Button"
+
+![Variable erstellen](img/blocks/variables/create_var.png)
+
+Der Variablen erstellen Block dient dazu, eine neue Variable zu erstellen. Der Name der Variable wird im Block angegeben. Er muss eindeutig sein, darf also nicht bereits von einer anderen Variable verwendet werden.
+
+#### setze Variable auf
+
+![setze Variable](img/blocks/variables/set_var.png)
+
+Der setze Variable auf Block dient dazu, den Wert einer Variable zu ändern. Der Wert wird über einen [Variablen Nummer Block](#variablen-nummer) angegeben. Der Block sollte immer oberhalb des Startblocks platziert werden, um eine korrekte Ausgabe zu gewährleisten.
+
+#### Variablen Nummer
+
+![Variable Nummer](img/blocks/variables/number_var.png)
+
+Der Variablen Nummer Block dient dazu, den Wert einer Variable festzulegen.
+
+### Schleife
+
+#### wiederhole x mal
+
+![wiederhole x mal](img/blocks/loop/repeat.png)
+
+Der wiederhole x-mal Block dient dazu, eine bestimmte Anzahl an Blöcken zu wiederholen. Die Anzahl der Wiederholungen wird im Block mithilfe des [Schleifen Nummer Block](#schleifen-nummer) angegeben.
+
+#### Schleifen Nummer
+
+![Schleifen Nummer](img/blocks/loop/get_number.png)
+
+Der Schleifen Nummer Block dient dazu, die Anzahl der Wiederholungen für den [wiederhole x-mal Block](#wiederhole-x-mal) festzulegen. Er kann ebenfalls dazu genutzt werden, die Anzahl der Bewegungen des Charakters festzulegen.
+
+### Bedingung
+
+#### boolescher Wert
+
+![boolescher Wert](img/blocks/condition/bool.png)
+
+Der boolesche Wert Block dient dazu, einen booleschen Wert festzulegen. Der Wert kann entweder wahr oder falsch sein.
+
+#### nahe Wand
+
+![nahe Wand](img/blocks/condition/near_wall.png)
+
+Der nahe Wand Block dient dazu, zu überprüfen, ob der Charakter sich in der Nähe einer Wand befindet. Der Wert kann entweder wahr oder falsch sein.
+
+#### Wand oben
+
+![Wand oben](img/blocks/condition/wall_up.png)
+
+Der Wand oben Block dient dazu, zu überprüfen, ob sich oberhalb des Charakters eine Wand befindet. Der Wert kann entweder wahr oder falsch sein.
+
+#### Wand unten
+
+![Wand unten](img/blocks/condition/wall_down.png)
+
+Der Wand unten Block dient dazu, zu überprüfen, ob sich unterhalb des Charakters eine Wand befindet. Der Wert kann entweder wahr oder falsch sein.
+
+#### Wand links
+
+![Wand links](img/blocks/condition/wall_left.png)
+
+Der Wand links Block dient dazu, zu überprüfen, ob sich links des Charakters eine Wand befindet. Der Wert kann entweder wahr oder falsch sein.
+
+#### Wand rechts
+
+![Wand rechts](img/blocks/condition/wall_right.png)
+
+Der Wand rechts Block dient dazu, zu überprüfen, ob sich rechts des Charakters eine Wand befindet. Der Wert kann entweder wahr oder falsch sein.
+
+#### falls mache
+
+![falls mache](img/blocks/condition/if.png)
+
+Der falls mache Block dient dazu, einen Block auszuführen, falls der angegebene boolesche Wert wahr ist.
+
+#### falls mache sonst
+
+![falls mache sonst](img/blocks/condition/if_else.png)
+
+Der falls mache sonst Block dient dazu, einen Block auszuführen, falls der angegebene boolesche Wert wahr ist. Andernfalls wird der sonst Abschnitt des Blocks ausgeführt.
+
+### Skills
+
+<!-- #### Interagieren
+
+![Interagieren](../img/blocks/skills/interact.png)
+
+Der Interagieren-Block dient dazu, mit einem Objekt in der nahen Umgebung zu interagieren. Hierbei könnte es sich beispielsweise um eine Truhe oder ein Item handeln. -->
+
+#### Feuerball oben
+
+![Feuerball oben](img/blocks/skills/fireball_up.png)
+
+Der Feuerball oben Block dient dazu, einen Feuerball in die angegebene Richtung zu schießen.
+
+#### Feuerball unten
+
+![Feuerball unten](img/blocks/skills/fireball_down.png)
+
+Der Feuerball unten Block dient dazu, einen Feuerball in die angegebene Richtung zu schießen.
+
+#### Feuerball links
+
+![Feuerball links](img/blocks/skills/fireball_left.png)
+
+Der Feuerball links Block dient dazu, einen Feuerball in die angegebene Richtung zu schießen.
+
+#### Feuerball rechts
+
+![Feuerball rechts](img/blocks/skills/fireball_right.png)
+
+Der Feuerball rechts Block dient dazu, einen Feuerball in die angegebene Richtung zu schießen.

blockly/doc/examples.md

@@ -0,0 +1,45 @@
+---
+title: "Blockly: Beispiele"
+---
+
+# Beispiele
+
+## Charakter bewegen
+
+Der Charakter lässt sich durch die verschiedenen Blöcke, in der Kategorie `Bewegung`, bewegen. Dafür müssen die Blöcke in der gewünschten Reihenfolge in den Editor gezogen werden. Die Anzahl der Einheiten, die sich ein Charakter bewegt, kann durch die Zahl im Block verändert werden oder durch eine Variable, welche dem Block zugewiesen wird. Die folgende Abbildung zeigt ein Beispiel, indem sich der Charakter um 10 Einheiten nach oben bewegt und anschließend um 5 Einheiten nach rechts. Die Bewegung nach oben wird durch die Zahl 10 im Block festgelegt. Für die Bewegung nach rechts wird eine Variable verwendet, welche den Wert 5 zugewiesen bekommen hat.
+
+![Charakter bewegen](img/examples/charakter_bewegen.png)
+
+## Variablen erstellen und zuweisen
+
+In der Kategorie `Variablen erstellen` können Variablen erstellt werden und ihnen ein Wert zugewiesen werden. Mit einem Klick auf den Button `Variable erstellen` öffnet sich ein Fenster, in dem der Name der Variable festgelegt wird. Anschließend kann mit dem `setze "VARIABLENNAMEN" auf Block` der Variable ein Wert zugewiesen werden. In dem Block können alle zuvor erstellten Variablen über einen Reiter ausgewählt werden. Die folgende Abbildung zeigt ein Beispiel, indem eine Variable mit dem Namen `x` erstellt wird und ihr der Wert 5 zugewiesen wird.
+
+![Variable erstellen und zuweisen](img/examples/variable_erstellen_und_zuweisen.png)
+
+Die Variablen sollten, wenn möglich oberhalb des Startblocks erstellt werden, damit die generierte Codeausgabe übersichtlicher ist. Auswirkungen auf die Ausführung des Programms hat die Position der Variablen nicht.
+
+## Blöcke durch Verwendung einer Schleife mehrfach ausführen
+
+Durch den `wiederhole x -mal: Block` können Blöcke mehrfach ausgeführt werden. Die Anzahl der Wiederholungen kann durch die Zahl im Block verändert werden oder durch eine Variable, welche dem Block zugewiesen wird. Die folgende Abbildung zeigt ein Beispiel, indem sich der Charakter mithilfe einer Schleife 5 Einheiten nach oben bewegt. Die Anzahl der Wiederholungen wird durch die Zahl 5 im Block festgelegt. Für die Bewegung nach oben wird eine Variable verwendet, welche den Wert 1 zugewiesen bekommen hat.
+
+![Blöcke durch Verwendung einer Schleife mehrfach ausführen](img/examples/schleife.png)
+
+## Bedingungen verwenden
+
+Durch Bedingungen kann der Programmablauf gesteuert werden. Verschiedene Bedingungen wie zum Beispiel das Abfragen, ob sich eine Wand in der Nähe befindet, lassen sich in der Kategorie `Bedingung` finden. Die folgende Abbildung zeigt ein Beispiel, indem sich der Charakter mithilfe einer Bedingung 5 Einheiten nach unten bewegt, wenn sich oberhalb des Charakters eine Wand befindet. Stimmt die Bedingung nicht, bewegt sich der Charakter 5 Einheiten nach oben.
+
+![Bedingungen verwenden](img/examples/bedingung.png)
+
+## Charakter Skills verwenden
+
+Die Charakter Skills können in der Kategorie `Skills` gefunden werden. Skills können verwendet werden, um Feuerbälle zu schießen. Die folgende Abbildung zeigt ein Beispiel, indem der Charakter sich 5 Einheiten nach oben bewegt, danach einen Feuerball nach rechts schießt, sich weitere 2 Einheiten nach rechts bewegt und anschließend einen Feuerball nach links schießt.
+
+![Charakter Skills](img/examples/skills.png)
+
+## Komplexeres Beispiel
+
+Das folgende Beispiel zeigt, wie die zuvor genannten Blöcke kombiniert werden können.
+
+Zuerst werden zwei Variablen x und y erstellt und ihnen die Werte 5 und 2 zugewiesen. Danach wird ein Startblock erstellt, an dem der restliche Programmcode angehängt wird. Der Charakter beginnt damit, sich 5 Einheiten nach rechts zu bewegen. Anschließend wird eine Schleife verwendet, die 5-mal ausgeführt wird. In der Schleife bewegt sich der Charakter 1 Einheit nach oben und 1 Einheit nach links. Nach der Schleife wird eine Bedingung abgefragt, ob sich links vom Charakter eine Wand befindet. Stimmt die Bedingung, bewegt sich der Charakter 5 Einheiten nach oben. Stimmt die Bedingung nicht, bewegt sich der Charakter 10 Einheiten nach links. Danach wird erneut eine Schleife verwendet, die 2-mal ausgeführt wird, diesmal wird für die Anzahl der Durchläufe die Variable y verwendet. In der Schleife bewegt sich der Charakter 1 Einheit nach unten und 1 Einheit nach rechts.
+
+![Komplexeres Beispiel](img/examples/komplexes_beispiel.png)