SVG y asteroides (duros)

Hasta la semana pasada, para mí el SVG era un formato vectorial de gráficos que los navegadores de internet deberían aceptar (y que no todos lo hacían), además de ser el formato usado por Inkscape.

Mi opinión sobre él era que era el típico resultado de un diseño por comité: lo justo para contentar a todos pero insuficiente para gustar realmente a nadie.

El caso es que siempre me había llamado la atención el hecho de que Inkscape permite asignar eventos a los elementos del dibujo. Intentando averiguar qué era eso me encontré con que es posible hacer SVG dinámicos; aunque, cómo siempre, la posibilidad no está implementada en todos los navegadores.

Sin embargo me picó la curiosidad. Más que nada porque desconozco casi todo sobre la programación web, y cuando digo casi todo quiero decir que el otro día descubrí lo que era el DOM.

Para probarlo (y en el proceso, "probar" que soy un friki  que vivió en los 70), se me ocurrió hacer una versión del juego Asteroides más o menos fiel al original, con algún toque de color, pero sin convertirse en uno de esos engendros de remake que se ven por ahí.

Cuando digo "engendro" me refiero a algo así

La cosa resultó sorprendentemente fácil. En un par de horas tenía una nave girando y un asteroide. Después de tres días de baja dedicación ya tenía casi todo lo importante funcionando. El movimiento es bastante suave, incluso para tamaños grandes de pantalla. Eso sí, el código dejó de funcionarme en firefox cuando añadí la detección de choques entre disparos y asteroides; pero en Opera y Chrome sí funciona (aunque aún hay problemas con el zoom). Si queréis ver cómo va podéis probarlo aquí.

Y si no lo queréis probar, esta es una imagen

En este ejemplo, el SVG se abre directamente desde la URL, pero también es posible incrustarlo en una página HTML normal. Pienso que gran parte de las cosas que se hacen en Flash (salvo vídeo, que quizás sea, ahora, la más importante) pueden hacerse mejor en SVG.

Como bonus, aquí tenéis lo que, creo, es el diseño original de los asteroides que encontré en esta página. El que hayan puesto la raya en la O es lo que me convence de que es un documento original de la época, aunque ahora que lo pienso, la raya es precisamente para distinguir ceros de oes...