JavaScript on CoderDojo Linz

Lokaler Minecraft-Server mit Scriptcraft

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

Installation eines Minecraft Servers mit Scriptcraft

Voraussetzungen

In dieser Übung installieren wir einen Minecraft Server mit Scriptcraft auf deinem Windows-Computer.

Systemvoraussetzungen

Bevor du den Minecraft-Server installieren kannst, musst du folgende Software installieren:

Java SE Development Kit (kurz JDK)
Lade die Windows-Version von der Download-Seite herunter und installiere sie.
Git
Lade die Windows-Version von der Download-Seite herunter und installiere sie. Installiere alle verfügbaren Teile von Git, die im Installationsprogramm auswählbar sind.
Lege mit dem Windows Explorer ein leeres Verzeichnis an, in dem wir den Minecraft-Server installieren können. Unser Vorschlag ist c:\spigot.

Grundlagen von Minecraft Mods mit JavaScript

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

Grundlagen von Minecraft Mods mit JavaScript

Systemvoraussetzungen

Du brauchst für diese Übungen einen Minecraft Server mit Scriptcraft. Wenn du keine Erfahrung bzgl. Konfiguration von Computern, Java etc. hast, komm ins CoderDojo und bitte eine Mentorin, dir einen solchen Server zur Verfügung zu stellen. Ansonsten hast du folgende Möglichkeiten:

Folge der Anleitung auf unserer Homepage
Installiere Scriptcraft lokal auf deinem Computer (Installationsanleitung in Englisch)

Zum Programmieren von JavaScript brauchst du einen Texteditor. Empfehlenswert ist ein Editor, der speziell für Softwareentwicklung gedacht ist. Hier einige Links zu kostenlosen Editoren, mit denen du JavaScript gut schreiben kannst. Falls du nicht sicher bist, welchen du nehmen sollst, nimm gleich den ersten. Im Lauf der Zeit kannst du mit verschiedenen experimentieren und dich für den entscheiden, der dir am besten gefällt.

Verschlüsseln mit JavaScript

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

Verschlüsseln mit JavaScript

Ziel der Übung

In dieser Übung lernst du ein einfaches Verschlüsselungsverfahren kennen.

Technisch lernst du einige Dinge über JavaScript und Node.js:

Wie programmiert man ein Kommandozeilenprogramm mit JavaScript?
Was sind ASCII Codes?
Wie arbeitet man in JavaScript mit Zeichenketten?

Bitte beachte, dass dieses Beispiel keine Übung für Anfänger ist! Falls JavaScript, Node.js und Visual Studio Code für dich neu sind, mache dich erst mit diesen Technologien und Werkzeugen vertraut. Dazu sind folgende Übungsbeispiele zu empfehlen:

JavaScript Zahlen raten

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

Zahlen raten

Ziel der Übung

In dieser Übung programmierst du ein einfaches “Zahlen raten” Spiel und siehst, wie man mit JavaScript Ein- und Ausgaben machen kann.

Das Spiel soll folgendermaßen funktionieren: Der Computer denkt sich eine Zahl zwischen 0 und 100 aus und der Spieler muss versuchen, diese Zahl mit möglichst wenigen Versuchen zu erraten. Dazu kann er einen Tipp eingeben. Der Computer sagt dann Niedriger oder Höher, und der Spieler kann einen neuen Tipp eingeben, bis er die richtige Zahl erraten hat.

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.

Regenbogen

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

Regenbogen

Ziel der Übung

Du malst eine Landschaft mit Blumen und Wolken und einem Regenbogen, der erscheint, wenn du die Maus nach rechts bewegst.

p5.js

Wir verwenden für diese Übung die JavaScript Bibliothek p5.js. Du kannst den online Editor verwenden, um damit Programme zu bauen, du kannst die Bibliothek aber auch in deine eigene Webseite einbauen.

Öffne zum Starten den p5.js editor.

Dort wird dir folgender Code angezeigt:

Snake mit p5.js

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

Snake mit p5.js

Ziel der Übung

In dieser Übung programmierst du das Spiel Snake mit p5.js.

p5.js

Öffne zum Starten den p5.js editor.

Dort wird dir folgender Code angezeigt:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Variablen

Als erstes legen wir alle Variablen an, die wir für das Spiel brauchen. Füge die Variablen ganz am Anfang des Codes ein. Zeilen die mit // beginnen sind Kommentare, die sind nicht nötig, damit das Programm läuft:

Space Invaders

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

Space Invaders

We will follow another amazing Tutorial by Ania Kubów to build our very own Space Invaders game. If you didn’t do so yet head to her Youtube channel and subscribe or give her a like because her content is amazing.

Set up our files

As usual we will use codesandbox.io for our implementation. The entrypoint for our website is our index.html file. In this file we need to add a link to our styles.css and a reference to our app.js. In order to check that our linking works fine I will add some dummy code to show an alert in our JavaScript file alert("Hey Space Invaders") and a body { background-color: hotpink } to our CSS file. Now when we refresh or open our HTML file we should see a pink background a pop up greeting the Space Invaders.

Space Shooter mit p5.js

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

Space Shooter mit p5.js

Ziel der Übung

In dieser Übung programmierst du einen Space Shooter mit dem du herunterfallende Meteoriten abschießt. Mit den Pfeiltasten kannst du das Raumschiff nach links und rechts bewegen. Mit den Tasten a und d kannst du es drehen. Und mit der Leertaste kannst du Laser abfeuern, um die herunterfallenden Meteoriten zu zerstören.

p5.js

Tetris

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

Tetris

In this session we will impelment a version of the TETRIS game based on a video by the amazin Ania Kubów. Check out her youtube channel –> here <– .

Project setup and file linking

We will need three files - a index.html that contains the markup of our website, an app.js file that contains our logic and a styles.css for styling.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="app.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <title>Tetris</title>
    </head>
    <body>

    </body>
</html>

In order to verify that our linking works out properly we put an alert('Hello Tetris') to the app.js file and a body { background: hotpink; } to the styles.css file. We should now see a popup containing the text “Hello Tetris” when we reload the page and the pages background should have a specified color.

Yeti Xmas Game mit p5.js

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

Yeti Xmas Game mit p5.js

Ziel der Übung

In dieser Übung programmierst du mit p5.js and Jump & Run Spiel.

p5.js

Öffne zum Starten den p5.js editor.

Dort wird dir folgender Code angezeigt:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Anleitung

Die Anleitung zum Yeti Spiel kommt in den nächsten Wochen …