Game of Life Simulation programmieren | Svelte, TypeScript, Sass Tutorial

Wir programmieren das faszinierende Game of Life! In dieser Simulation geht es um Zellen, die anhand einer einfachen Regel in der nächsten Generation leben oder sterben. Bereits einfache Anfangsmuster können hier zu Chaos oder wunderschönen Figuren werden.

Benutzen werden wir dafür Svelte, TypeScript und Sass. Das erste Video auf meinem Kanal handelte bereits vom Game of Life. Da hatte ich allerdings Vanilla JS benutzt, und die Seite war nicht wirklich auf dem Handy nutzbar.

Wenn ihr noch nicht vorher mit Svelte gearbeitet habt, schaut mal in meine Svelte-Playlist rein:
   • Svelte Tutorials  

📝 Demo & Quellcode
● Demo: https://game-of-life-svelte.netlify.app
● Code: https://github.com/scriptRaccoon/game...

⏱ Zeitmarken
● Vorstellung 00:00
● Setup von Svelte mit TypeScript 05:05
● Setup von Sass 07:00
● Globale Styles 08:57
● strictNullCheck 09:39
● Zustand-Array 11:16
● Checkboxen 16:23
● Zellen als Labels 21:18
● Start und Pause 25:09
● Interval fürs Update 29:14
● Lebendige Nachbarn 31:51
● Update der Zellen 34:54
● Automatische Pause 39:06
● Update-Button 40:52
● Randomisieren 41:53
● Clear-Button 43:33
● Debounce 44:12
● Titel-Komponente 46:36
● Abschluss 49:20

📙 Quellen
● Wikipedia-Artikel zum Game of Life: https://en.wikipedia.org/wiki/Conway%...
● Svelte Dokumentation: https://svelte.dev/docs
● TypeScript Dokumentation: https://www.typescriptlang.org/docs/
● Sass Dokumentation: https://sass-lang.com/guide
● Vite Dokumentation: https://vitejs.dev/guide/

💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/

🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...

#Svelte #GameOfLife #TypeScript