en / es / ca / de

Mascota digital

Aquesta és una versión personalitzada d'un Tamagotchi, la mascota virtual portàtil dels anys 90, construïda a un curs de Brian Holt a Frontend Masters. El projecte es desenvolupa amb JavaScript Vanilla se desarrolla con Javascript Vanilla i l'objectiu és la refacció del codi amb altres tecnologies. En el meu cas, vaig decidir fer-ho amb React, però he evitat utilitzar create-react-app i configurar un projecte des de zero amb Webpack, Redux i TypeScript.

Codi font

Característiques

  • La mascota té cicles de son segons la durada del dia i la nit, l'usuari no pot interactuar amb això.
  • Cada cert temps, ens indicarà que té gana i ens demanarà menjar.
  • Una cop alimentada, farà les seves necessitats i esperarà a que siguin netejades.
  • Si totes dues necessitats no són cobertes en un breu espai de temps, la mascota morirà.
  • Es pot canviar a mode pluja i mode normal sempre que es desitgi.

Què he après

  • A executar un projecte des de zero amb Webpack.
  • A configurar CSS i SCSS mòduls amb Webpack.
  • A configurar TypeScript amb Webpack.
  • A obtenir un major enteniment sobre les 'closures' de JavaScript amb la funció 'requestsAnimationFrame'.
  • A realitzar animacions avançades amb sprites.
  • A construir codi a JavaScript Vanilla i reconstruir-lo a React amb TypeScript i Redux.

Tecnologies

  • Front-end: React amb TypeScript, configurat des de zero amb Webpack, Redux i SCSS mòduls.
  • Front-end: JavaScript Vanilla
  • Back-end: -