CSS Panic - Un juego creado íntegramente en CSS, libre de Javascripts

En esto del mundo de la informática, y más de lleno en el mundo del desarrollo de aplicaciones para escritorio y web,   siempre hay cosas curiosas que nos sorprenden a diario y nos dejan en claro que aun no está todo dicho en cuanto a explotación de recursos se refiere.

Es por eso que el post de hoy esta dedicado a esa búsqueda de obtener el máximo partido a una herramienta, y lograr con ello realizar acciones que en un principio no fueron el objetivo principal de su creación.

Es por ello que os presentamos" CssPanic ", un juego creado íntegramente mediante " Cascading Style Sheets ", Hojas de estilo o CSS como prefiráis llamarlas, donde en ningún momento se hace referencia a algún " Javascript" que intervenga en la ejecución del juego.

Este detalle es   realmente interesante, ya que la forma en la que se ha enfocado el desarrollo de este sencillo juego, el cual podríamos calificar de muy ingenioso al nivel de Programación CSS Extrema , deja mucho que pensar sobre la escasez de uso de CSS en la programación de videojuegos orientados a web hoy en día.

Un aspecto a destacar es la inclusión de los elementos gráficos dentro del mismo código CSS, con lo cual no se requieren tener las imágenes en carpetas dentro del mismo directorio, sino que van codificadas en base 64 dentro del mismo fichero CSS.

Como ya se ha dicho, el código fuente es muy interesante por lo que recomendamos echarle un ojo ya que de esa forma podréis comprender el funcionamiento de la aplicación y de paso recordar o aprender un poco mas sobre CSS.

Si deseáis ver el código del CSS y del HTML necesarios para la ejecución, podéis pasar por el siguiente enlace externo a Windows Técnico, donde están alojados. Particularmente os recomendaríamos crear vuestros propios ficheros HTML y CSS e incluir dentro el código que se os proporciona, así podréis entender la funcionalidad de la aplicación en un contexto mas amplio y didáctico.

Aquí os dejamos una pequeña ayuda para que montéis el juego correctamente el HTML, al cual hemos llamado " juego.html ".

Mencionar que el fichero CSS ha sido creado con el nombre " plantilla.css ", es por ello que es referenciado con ese nombre, pero podríais crearlo con el nombre que mejor os parezca   ya que lo que importa es que se encuentre en el mismo directorio y sea enlazado correctamente en el fichero HTML, como lo esta ahora mismo.

El juego al finalizar saldrá en mensaje de " GameOver " dándonos la opción de "Replay" para volver a jugar, sin embargo al hacer clic sobre dicho botón nos redirige al enlace externo antes mencionado.

Si lo que queremos es que al hacer clic sobre dicho botón reiniciemos el juego lo que tendríamos que hacer es simplemente cambiar una línea del código CSS, remplazándola con ésta.

Por último, te recordamos que si te ha gustado el artículo puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.