Primer proyecto: Videoconsola con CSS - Semana 1
Representación digital de un Tamagotchi, por Judit Grau.
Este Tamagotchi ha sido desarrollado como parte del Bootcamp de Full Stack Developer de Geekshubs Academy.
_______________________________________________
| 🔴 Atención: Primer proyecto sin previos conocimientos en programación.🔴 |
HTML5, CSS3 y vanilla JavaScript.
Recursos alternativos: Photoshop
Para el dispositivo, me he inspirado en uno de nueva generación, pero he querido mantener la pantalla y la cadena de los Tamagotchi de principios de los 2000.
En cuanto al modelado y al estilo de la representación digital, me he inspirado en el arte del recorte de papel (Papercut Art) para crear efectos de iluminación y sombreado. No buscaba simular una tridimensionalidad realista, sino crear pequeños elementos en 2D que al superponerse ofrecen profundidad. Sin embargo, he aplicado pequeñas luces y sombras para dar volumen a algunos elementos.
Todo esta construido a traves de 'divs' y se ha trabajado en flexbox, con la única excepción de las crucetas de la parte frontal del Tamagotchi, ambas en display:grid.
Todos los elementos están creados con HTML y CSS, a excepción de las imágenes que aparecen en la pantalla y la sonrisa. Aún así, todas han sido creadas inéditamente para este proyecto.
Las mayores dificultades enfrentadas durante este proyecto han sido las numerosas formas redondeadas y poco convencionales.
Se ejecuta desde el navegador web y dispone de varias funcionalidades, todas siguiendo la misma función de Javascript pero con diferentes imágenes.
-
El primer botón es el botón de nacimiento. Se clica una única vez y el Tamagotchi pasa de huevo a ser.
-
El segundo botón el Tamagotchi defeca (2) y al volver a clicar vuelve a su estado original (1).
-
El último botón, si el Tamagotchi viene del estado 2, muere al clicar y al volver a clicar aparecerá el huevo. En cambio, si viene del estado (1), directamente pasará a huevo.
Gran parte de la inspiración técnica para el desarrollo del Tamagotchi nace de las tardes en Wayco Ruzafa, con mis compañeros del bootcamp, donde la lluvia de ideas, la colaboración y el trabajo en grupo es una constante. Gracias a todos. Y a Mara y David, por ser la fuente de conocimiento, paciencia y ánimos.
La licencia utilizada es una Creative Commons Legal Code. Este proyecto ha sido realizado por mí, Judit Grau Puigdollers, inéditamente para la tarea 'Consola en CSS3' en la edición de Abril 2023 de GeeksHubs Academy.