SVG on CoderDojo Linz

Erste Schritte mit SVG

Mon, 01 Jan 0001 00:00:00 +0000

Erste Schritte mit SVG

Ziel der Übung

In dieser Übung lernst du Scalable Vector Graphics (kurz SVG) kennen. Unser Ziel sind:

Wir wollen verstehen, was SVG ist und wofür es eingesetzt wird.
Wir wollen Grafiken mit SVG in eine HTML-Seite einbauen.
Wir wollen SVG mit JavaScript programmgesteuert erzeugen.
Wir möchten SVG verwenden, um ein mathematisches Prinzip, die Cardanischen Kreise veranschaulichen.

Wenn du nach dieser Übung mehr über SVG lernen willst oder während der Übung Detailfragen hast, kannst du einen Blick auf die SVG Einführung auf w3schools.com werfen.

Fraktal Baum mit snap.svg

Mon, 01 Jan 0001 00:00:00 +0000

Zeichne einen Fraktal Baum mit snap.svg

Ziel der Übung

Zeichne einen Baum in SVG. Starte dazu mit einer vertikalen Linie als Stamm.

Am oberen Ende der Linie zeichne zwei weitere Linien - eine etwas nach links und eine etwas nach rechts geneigt. Die neuen beiden Linien sind etwas kürzer als die erste Linie für den Stamm. In dieser zweiten Ebene erhältst du so zwei Zweige.

Am jeweils oberen Ende der beiden neuen Linie zweichne wieder jeweils zwei neue nach links und rechts geneigte Linien die etwas kürzer als die vorige Linie sind. In dieser dritten Ebene erhältst du so jetzt vier Zweige.

Hangman

Mon, 01 Jan 0001 00:00:00 +0000

Hangman

Ziel der Übung

Der erste Spieler gibt ein Wort ein, das vom zweiten Spieler erraten werden muss.

Zuerst sieht der zweite Spieler nur ein Sternchen für jeden Buchstaben. Jeder erratene Buchstabe wird aufgedeckt. Für jeden falsch geratenen Buchstaben wird der Galgen um eine Linie erweitert. Ziel ist es, das Wort zu erraten bevor der Galgen fertig ist.

Grundgerüst der HTML Seite

Erstelle als erstes eine neue HTML Seite mit dem Namen hangman.html.

Labyrinth-Spiel mit Scratch und JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Labyrinth-Spiel mit Scratch und JavaScript

Ziel der Übung

In dieser Übung programmierst du ein Labyrinth-Spiel erst mit Scratch und danach mit JavaScript. So lernst du, das, was du in Scratch über Programmieren gelernt hast, in einer textbasierten Programmiersprache anzuwenden.

Es ist wichtig, dass du vor dieser Übung die Scratch-Variante dieses Spiels genau angesehen oder noch besser selbst programmiert hast.

Spielbeschreibung

Steuere mit den Cursortasten den Spieler (blaue Kugel). Dein Ziel ist es, das mit “X” markierte Ziel zu erreichen.

Spaß mit Bezier-Kurven

Mon, 01 Jan 0001 00:00:00 +0000

Spaß mit Bezier-Kuven

Einleitung

Kaum jemand von euch wird schon einmal etwas von Bezier-Kurven gehört haben. Unsere Welt ist aber voll davon. Sie werden beim Design von physischen Dingen wie Autos genauso eingesetzt wie bei Computerspielen. Im folgenden Bild siehst du ein Beispiel. Wenn man sich die Form des Autos ansieht, entdeckt man eine Menge Kurven. Diese Kurven sind Bezier-Kurven.

Im Bild sind bei weitem nicht alle Bezier-Kurven hervorgehoben. Findest du noch weitere?

SVG Schreibtrainer

Mon, 01 Jan 0001 00:00:00 +0000

SVG Schreibtrainer

Ziel der Übung

Du baust ein Spiel das dir hilft, deine Tipp-Geschwindigkeit zu verbessern.

Am oberen Spielfeldrand erscheinen Kreise mit Buchstaben, die nach unten fallen. Tippe den Buchstaben, bevor er den unteren Rand des Spielfelds berührt.

Auf Wikipedia findest du eine Grafik zum Zehnfingersystem, die erklärt, welche Taste mit welchem Finger gedrückt werden soll.

Grundgerüst der HTML Seite

Erstelle als erstes eine neue HTML Seite mit dem Namen schreibtrainer.html.