Digitales Haustier
Das Projekt ist eine angepasste Version eines Tamagotchi, das portable virtuelle Haustier der 90er Jahre, das in einem Kurs von Brian Holt bei Frontend Masters gebaut wurde. Dieses wird mit Vanilla Javascript entwickelt und das Ziel ist es, den Code mit anderen Technologien zu refaktorisieren. Ich beschloss, es mit React zu erstellen, verzichtete aber auf die Verwendung von create-react-app und erstellte ein Projekt von Anfang an mit Webpack, Redux und TypeScript.
Merkmale
- Das Haustier hat Schlafzyklen, die von der Länge des Tages und der Nacht abhängen, mit denen der Benutzer nicht interagieren kann.
- Von Zeit zu Zeit gibt es an, dass es hungrig ist und bittet um Nahrung.
- Sobald es gefüttert ist, wird es sich entlasten und darauf warten, geputzt zu werden.
- Wenn beide Bedürfnisse nicht in kurzer Zeit erfüllt werden, wird das Haustier sterben.
- Man kann jederzeit in den Regen- und Normalmodus wechseln.
Was ich lernte
- Ein Projekt mit Webpack von Anfang an zu beginnen.
- CSS- und SCSS-Module mit Webpack zu konfigurieren.
- TypeScript mit Webpack zu konfigurieren.
- JavaScript 'closures' mit der Funktion 'requestsAnimationFrame' besser zu verstehen.
- Fortgeschrittene Animationen mit Sprites zu erstellen.
- Code mit Vanilla JavaScript zu erstellen und ihn mit TypeScript und Redux in React umzuwandeln.
Technologien
- Front-end: React mit TypeScript, von Anfang an konfiguriert mit Webpack, Redux und SCSS-Modulen.
- Front-end: JavaScript Vanilla
- Back-end: -