Programmiere dein Flappy Bird Spiel! Trainiere HTML, JavaScript und deine Logikskills
Sinah, Coding und KI mit Sinah
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Hallo und willkommen! :)
0:27
-
2.
Installation von VSCode
3:24
-
3.
Setup von VSCode
7:41
-
4.
HTML-Code und Bild-Dateien hinzufügen
6:05
-
5.
Der Canvas (Teil 1): Bilder zeichnen und skalieren
7:42
-
6.
Der Canvas (Forts.): Bilder zeichnen und skalieren
5:51
-
7.
Bewegte Bilder: Animationen (Teil 1)
7:52
-
8.
Bewegte Bilder: Animationen (Teil 2)
7:53
-
9.
Bewegte Bilder: Animationen (Teil 3)
5:19
-
10.
Den Vogel lenken mit Event Handlers (Teil 1)
4:35
-
11.
Den Vogel lenken mit Event Handlers (Teil 2)
5:17
-
12.
Die Kollisionslogik: Vogel vs. Rohre (Teil 1)
7:37
-
13.
Die Kollisionslogik: Vogel vs. Rohre (Teil 2)
7:59
-
14.
Tipps zum Abschied
2:29
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
1
Estudiante
--
Proyectos
Acerca de esta clase
Eine Stunde, 100 Zeilen Code! Trainiere deine Kenntnisse in HTML und JavaScript und dein räumliches Verständnis. Und das Beste: Entwirf das Spiel deiner Kindheit - Nostalgie inklusive.
Das wirst du lernen
- Dein eigenes Flappy Bird Spiel nachbauen und frei nutzen
- Ein besseres Verständnis für die Spielelogik entwickeln (2D-Raum, Kollisionslogik, Animationen etc.)
- Grundkenntnisse in HTML und JavaScript verbessern
- Dein Spiel anschließend einfach veröffentlichen, verschenken, selber spielen etc.
In diesem Kurs zeige ich dir Schritt für Schritt, wie du innerhalb kürzester Zeit dein eigenes ,,Flappy Bird" programmierst- und das mit gerade einmal 100 Zeilen Code oder weniger. Vielleicht kennst du dieses Spiel noch aus deiner Kindheit.
Wer behauptet, dass Programmieren trocken sein muss, liegt falsch: Wir tauchen direkt in dieses spannende und kurzweilige, interaktive Projekt ein. Nach dem Kurs wirst du dann immer ein eigens programmiertes Spiel haben, dass du selbst spielen, veröffentlichen oder verschenken kannst. Du besitzt damit auch ein außergewöhnliches Vorzeige-Projekt für die Jobsuche. Und du hast eine Vorlage, mit der du schon sehr bald deine ganz eigenen Spiele wirst erstellen können. Natürlich stelle ich dir in jeder Lektion meinen eigenen Code zum Vergleich zur Verfügung und verlinke dir Material zu den behandelten Konzepten. Alle Lektionen gibt es außerdem zum Download, damit du von überall bequem lernen kannst.
Mein Ziel ist es, möglichst anschaulich und unterhaltsam etwas fortgeschrittenere Konzepte in HTML und JavaScript bei dir zu verfestigen. Du kannst das Flappy-Bird-Spiel auch dann mit mir nachbauen, wenn du noch nie im Leben programmiert hast. Um aber wirklich zu verstehen, was wir machen werden, solltest du schon einige Vorkenntnisse besitzen. Wenn du nach einem noch passenderen Kurs suchst, schau gerne auch in meinen anderen Kursen vorbei!
Das erwartet dich hier:
-
Festigung deiner bisherigen Kenntnisse in HTML und JavaScript (Funktionen, Arrays, for, if/else, DOM Manipulation, Canvas)
-
Besseres Verständnis für Spielelogik (Kollisionslogik, Bilder im 2D-Raum, fließende Animationen erstellen)
-
ein tolles Endprodukt, das du für immer frei verwenden kannst (spielen, veröffentlichen, verschenken, individualisieren/verändern)
-
Sehr wahrscheinlich: Spaß, Glücksmomente und Stolz
Ich freue mich auf dich. Bis dann!
#html #css #lerneprogrammieren #programming #coding #happycoding #webentwicklung #webdevelopment #programmieren #ux #ui #mobilefirst #responsive design #js #javascript #codepen #vscode #frontend #backend #html5 #js6 #css3 #childhoodvibes #90s #codecombat #programmierenmitspaß
Conoce a tu profesor(a)
Willkommen! :)
Ich bin Sinah und Full Stack Webentwicklerin. Oder, um es ganz einfach auszudrucken: Ich programmiere leidenschaftlich gerne und selbststandig. Auch habe ich bereits in der Prozessoptimierung und als Digitalisierungsberaterin gearbeitet.
In meinen Kursen kannst du einiges lernen: Egal, ob Programmieren oder KI-Themen, privat oder beruflich, als Anfanger*in oder Fortgeschrittene*r. Wir nahern uns interaktiv und spielerisch deinen Zielen, sei es das Bauen von Websites, eigenen Spielen, responsives Design oder Prompt Engineering als Profi.
#ki #promptengineering #javascript #html #css #programmieren #coden #coding #kuenstlicheintelligenz #ai
Proyecto de clase práctica
Tauche ein in einen absoluten Klassiker in der Geschichte der (Browser-)Games: Flappy Bird! Ob du Kindheitserinnerungen wiederbeleben willst oder einfach einen spielerischen und zugleich lehrreichen Einstieg in die Welt der (Spiele-)Programmierung suchst: Hier bist du richtig! Schritt für Schritt entwerfen wir dein Browserspiel, mit dem du nicht nur die Konzepte in JavaScript und HTML verfestigen kannst, sondern auch ein cooles Vorzeige-Projekt gewinnst, das du sogar veröffentlichen, individuell anpassen, verschenken oder selbst spielen kannst - ganz, wie du es für richtig hälst.
________MATERIAL ZUM KURS____________
Lektion 2: Leitfaden zur Installation von VSCode: Visual Studio Code herunterladen: Der ultimative Leitfaden für Entwickler und Programmierer - SilverPC Blog
Lektion 4:
VS Code Shortcuts: 💻 VS Code Shortcuts und Funktionen - Quick Tipps
Meta Tags: Was befindet sich im Kopfbereich? Metadaten eines Webseiten - Lernen Sie Webentwicklung | MDN
Das Link-Element: : Das Element für externe Ressourcenverknüpfungen - HTML | MDN
Das Script-Element (englisch): : Das Element für externe Ressourcenverknüpfungen - HTML | MDN
Das Canvas-Element: Canvas API - Web-APIs | MDN
Lektion 5 + 6:
Das Canvas-Element (und .getElementById und .getContext): Canvas API - Web-APIs | MDN
Die Methode ,,getElementsByClassName": Dokument: getElementsByClassName()-Methode - Web-APIs | MDN
DOM-Manipulation: JavaScript/Tutorials/DOM/DOM-Manipulation – SELFHTML-Wiki
Das Schlüsselwort/der Operator ,,new": new - JavaScript | MDN
Methode ,,createElement": Dokument: createElement()-Methode - Web-APIs | MDN
Methode ,,setAttribute": Element: setAttribute()-Methode - Web-APIs | MDN
Das Window-Object: Window - Web-APIs | MDN
Das Load-Ereignis/Event: Window: load Event - Web-APIs | MDN
Event Target, Event Handler und ,,addEventListener": JavaScript/DOM/EventTarget/addEventListener – SELFHTML-Wiki
Die Methode ,,drawImage": Bilder verwenden - Web-APIs | MDN
Auf dem Canvas zeichnen: Zeichnen von Formen mit Canvas - Web-APIs | MDN
Lektion 7-9:
Die If-Anweisung (If...else); if...else - JavaScript | MDN
Die Methode ,,cancelAnimationFrame": Window: Methode cancelAnimationFrame() - Web-APIs | MDN
Die Methode ,,requestAnimationFrame": Window: requestAnimationFrame() method - Web APIs | MDN
Font und fillText: Zeichnen von Text - Web-APIs | MDN
Template Literals/Template Strings: Template Literale (Template-Strings) - JavaScript | MDN
Das Height-Attribut des Canvas: HTMLCanvasElement - Web-APIs | MDN
Array: Array - JavaScript | MDN
Objekte: Arbeiten mit Objekten - JavaScript | MDN
For-Schleife: for - JavaScript | MDN
Width-Attribut: HTMLCanvasElement - Web-APIs | MDN
Math.random(): Math.random() - JavaScript | MDN
Math.floor(): Math.floor() - JavaScript | MDN
Lektion 10+11:
Mousedown-Event-Handler: JavaScript/DOM/Event/mousedown – SELFHTML-Wiki
Mouseup-Event-Handler: JavaScript/DOM/Event/mouseup – SELFHTML-Wiki
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
