Tesla Lab

Animaciones en CSS 3, Pong

En nuestro más reciente curso de HTML 5, que impartimos en la USC, les pusimos un reto a nuestros alumn@s, que era la realización de una animación en CSS 3, partiendo de lo que les habíamos explicado en clase.

El resultado fué para nuestro sentir inmejorable, con unos trabajos de una enorme calidad.

La animación que hoy os dejamos ha sido realizada por Hadriana Rodríguez Castiñeira y Lucia González Bravo, y a continuacion os dejo la descripción de la animación que nos han proporcionado y un poco de información sobre ellas.

Sobre la animación

Recordando el famoso videojuego de primera generación conocido con el nombre de Pong (Atari, 1972). Os presentamos una pequeña animación realizada utilizando CSS3 que simula este popular juego de ordenador.

Como se puede apreciar, la animación se basa en los movimientos de la pelota y las dos barras. Los movimientos fueron calculados automáticamente a partir de un programa en C. Este programa calcula la posición de la pelota y ambas barras en función de su posición inicial y del ángulo que marca el movimiento de la pelota con el eje Y.

El marcador consiste en varias capas que van desapareciendo o apareciendo de forma gradual. Las letras del final rotan sobre sí mismas para dar un efecto dinámico.

Sobre las autoras

En cuanto a nosotras, somos estudiantes de último curso del Grado en Ingeniería Informática, en Santiago de Compostela. Somos Hadriana y Lucía, y a través de nuestra pequeña animación pretendemos mostraros la aplicabilidad de las nuevas tecnologías, como son HTML5 y CSS3, sobre clásicos tan populares como Pong.