Programmiere dein erstes Browsergame | Einstieg in HTML, JavaScript, CSS
Wenn du schon immer mal ein Browsergrame programmieren wolltest, aber noch keine Erfahrung damit hast, ist das genau das richtige Video für dich. Keine Vorkenntnisse in HTML, JavaScript und CSS sind nötig - ich erkläre alles Schritt für Schritt.
📝 Demo & Quellcode
● Demo: https://lichter-aus.netlify.app/
● Code: https://github.com/ScriptRaccoon/Ligh...
⏱ Zeitmarken
● Vorstellung 00:00
● Teil 1: Setup und HTML-Aufbau 01:56
● Ordner erstellen 01:58
● HTML-Datei 02:32
● Live Server 05:10
● Prettier 06:25
● Teil 2: HTML 07:43
● HTML-Elemente 07:45
● Checkboxen 11:55
● IDs 13:49
● Teil 3: JavaScript 15:53
● Nachricht loggen 15:55
● JavaScript-Datei 17:15
● Referenzen für Elemente 19:29
● Schleife für Checkboxen 22:05
● Ereignisbehandler, Funktionen 26:53
● Spiellogik 30:33
● Gewinnen 36:19
● Teil 4: Weitere Features und Refaktorisieren 39:50
● Neustart 39:53
● Init-Funktion 41:08
● Array-Methoden 42:17
● Hilfsfunktionen 46:13
● Randomisieren 49:58
● Größe ändern 56:28
● Teil 5: Styling mit CSS 01:03:53
● CSS-Datei 01:03:54
● CSS-Grundlagen 01:05:04
● Body-Styles 01:07:20
● CSS-Grid auf Board 01:08:28
● Labels 01:10:42
● Übergänge 01:18:13
● Flexbox 01:19:44
● Buttons stylen 01:21:15
● Größeneingabe stylen 01:26:44
● CSS-Variable für Größe 01:30:57
● Responsive Design 01:34:32
● CSS-Reset, Margins und Paddings 01:38:03
● Fade-Animation 01:41:26
● Klassen 01:44:19
● Abschluss 01:47:17
📙 Quellen
● w3Schools: https://www.w3schools.com/
● JavaScript Info: https://javascript.info/
● Kanal von Dave Gray: / davegrayteachescode
● Wikipedia-Artikel zum Spiel: https://en.wikipedia.org/wiki/Lights_...)
● Algorithmus fürs Spiel: https://www.logicgamesonline.com/ligh...
💻 Verwendete Tools (Entwicklung)
● Chrome Browser: https://www.google.com/intl/de_de/chr...
● Visual Studio Code: https://code.visualstudio.com/
🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...
#Browsergame #Tutorial #JavaScript