Mario Land

Se incluyen los juegos Mario Land, Tetris, Dr. Mario, Bomberman, Kirby’s Dream Land, Space Invaders, Motocross Maniacs, Bomb Jack, Bubble Ghost, Boxxle 2, Drop Zone, Castelian, Serpent y Centipede.

(Vía: pixfans)

Otros posts de juegos programados en Javascript:

• Un Tetris en 560 bytes
• Leisure Suit Larry y todos los juegos de Sierra con canvas HTML
• Alogritmo de ajedrez en 5kb

Half duplex allows data transmission in but one direction. A half-duplex connection is much like talking with any teenager, you can talk until you are blue in the face, but they won’t hear a word you say.

Sacado de la propia documentación de Voxeo sobre ccxml (me lo sopla Alberto, que lo tengo aquí al lado y está flipando… :D )

Esto me hace recordar que Futurama también tienes algunos colaboradores interesantes, como J. Stewart Burns (licenciado en matemáticas en Harvard) y David X. Cohen (licenciado en física en Harvard y máster en ciencias computacionales en Berkeley), ambos productores y guionistas de la serie. En gaussianos.com tenemos 5 posts interesantes (1, 2, 3, 4 y 5) con una buena recopilación de los detalles matemáticos y de la ciencia en general que hay en esta serie.

Muchas veces se utiliza Photoshop para crear títulos o textos con sombras, bajo-relieves, bordes, etc. creando para ello primero una imagen que después será utilizada en nuestra página. Sin embargo, podemos simular el mismo efecto (más o menos) utilizando solamente HTML/CSS con el estilo text-shadow. Este estilo fue propuesto para CSS2 aunque no ha sido aceptado hasta la aparición de CSS3. La mayoría de los navegadores lo soportan completamente: Konqueror, Firefox 3.1, Safari 4, Opera 9.5, Chrome 2, Epiphany (Linux). Y otros los soportan parcialmente (sin múltiples sombras) como Safari 3.1, Shiira e iCab (MacOS), iPhone Safari. Se queda fuera Internet Explorer, aunque siempre se pueden utilizar algunos trucos.

La sintaxis es:

name { text-shadow: X Y size radius; }

Los parámetros que acepta son:

• X: desplazamiento lateral (en px, pt, em). Un valor positivo para X significa que la sombra aparecerá a la derecha. Ejemplo: 2px.
• Y: desplazamiento vertical (en px, pt, em). Un valor positivo para Y significa que la sombra aparecerá abajo. Ejemplo: 2px.
• radius: tamaño de la sombra (en px, pt, em). A menor valor, más nítida aparecerá la sombra. Y a mayor valor, más difuminada (borrosa). Ejemplo 0.5px.
• color: Color de la sombra. Ejemplo: #000000.

El color se puede indicar al final o al principio de la definición. Se pueden concatenar varias sombras, separándolas por comas.

El objetivo del estilo es crear una sombra bajo el texto en la dirección indicada por X e Y, con el radio (o difusión) y color especificados. Combinando el color, la difusión y la posición de la sombra con el colo del texto y el fondo, podemos conseguir diversos efectos de una manera sencilla y limpia, ahorrándonos el trabajo de crear el mismo texto como una imagen en Photoshop o cualquier otro software de edición gráfica.

Ejemplos de sombras:

text-shadow: 1px 1px 0.25em black;
color:black;

Esto es un ejemplo de sombra

text-shadow: 0.25em 0.25em 0.05em #8888FF;
color: blue;
background: #EEF

Esto es un ejemplo de otra sombra

text-shadow: 2px 2px 0.05px #000;
color: white;
background: #897;

Y esto es otra sombra más

También se puede combinar varias sombras en el mismo estilo, separándolas por comas:

text-shadow: 0.2em 0.5em 0.1em #F66,
            0.6em 0.1em 0.1em #3B3,
            0.4em -0.3em 0.1em #66F;
color: #000;
background: #EEF;

Ejemplo de triple sombra multicolor

Con el mismo color de fuente que de fondo, y creando una sombra más oscura arriba y otra más clara abajo, podemos hacer resaltados de bajo relieves:

text-shadow: -1px -1px white, 1px 1px #333;
color: #BBB;
background: #BBB;

Ejemplo de 2 sombras para hacer bajo relieves

text-shadow: 1px 1px white, -1px -1px #333;
color: #BBB;
background: #BBB; 

Otro ejemplo de sombra para hacer bajo relieves

Y con cuatro sombras y diferentes colores de fondo y de letra, podemos hacer bordeados nítidos para resaltar letras, o de colores y borrosos para darles un efecto de iluminación por detrás, o incluso de fuego:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
color: #FFF; background: #FFF; 

Mismo color de fondo que de letra, y bordes oscuros

text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
color: #FFF;
background: #FFF; 

Mismo color de fondo que de letra, luz trasera

text-shadow:0 0 4px white, 0 -5px 4px #FFFF33,
    2px -10px 6px #FFDD33, -2px -15px 11px #FF8800,
    2px -25px 18px #FF2200;
color: #222;
background: black

Efecto de fuego con varias sombras

De todas formas, no es necesario limitarse a buscar efectos impresionantes para hacer títulos que llamen la atención. Podemos utilizar las sombras sutilmente para resaltar el cuerpo de un texto y mejorar su lectura. El siguiente texto es un texto normal sin sombra:

Y el mismo texto, pero con style="text-shadow: 1px 1px 2px black".

El resultado final es que el texto posee una sombra que casi no se percibe, pero que realza el texto. Como conclusión final tenemos que con el estilo text-shadow y un poco de imaginación, se pueden conseguir resultados muy diferentes, tanto si queremos simplemente decorar o realzar un texto hasta crear títulos con efectos. Un consejo: hay que evitar abusar del efecto, o el resultado final es que el texto quede muy recargado y sea más difícil de leer, consiguiendo el efecto contrario al deseado. Las ventajas de usar este estilo frente a usar una imagen hecha con Photoshop son:

• Menor cantidad de espacio ocupado, mayor rapidez de carga: solo HTML/CSS frente a descargarte una imagen (2kb ó 20kb).
• Al conservar el texto como parte del HTML, los buscadores y robots lo podrán detectar y leer. El contenido de una imagen es invisible a los buscadores.
• Posibilidad de crear efectos en textos dinámicos. Es decir, es posible modificar el texto y el efecto se mantiene. El contenido de una imagen es inmutable.
• El texto es accesible. Por ejemplo, la gente que tenga configuradas fuentes grandes por tener poca visión podrán leerlo mejor, y los invidentes también tendrán más facilidad para leerlo, sin tener que acudir al texto alternativo de la imagen (por Akbarr, en un comentario, gracias!)

Inconvenientes

• No es soportado por todos los navegadores y puede haber diferencias sensibles entre unos y otros. La única manera de asegurarse de que el texto se ve como realmente quieres que se vea, es creando una imagen.

Y algunos enlaces de interés:

• Referencia y ejemplos en w3.org.
• Algunos hacks para que funcionen las sombras en cualquier navegador.
• Una buena guía con más sombras.

La tabla es un trabajo entre la Universidad de York y la Chemical Industries Association, en el Reino Unido y ocupa 1.3Mb. La verdad es que es un gran trabajo, no solo ayuda a comprender un poco mejor los elementos y para que sirven, sino que seguramente facilite aprendértelos (si es que estás estudiando y lo necesitas). ¡Ideal para colgarla en el aula de química de todos los colegios!

¿Te imaginas jugar y disfrutar de Leisure Suit Larry (1987, 16 colores) y de todos los juegos antiguos de Sierra desde tu navegador, sin flash, ni applets, ni runtimes, simplemente HTML y Javascript? Pues ahora ya es posible en Sarien.

Para empezar, su autor, Martin Kool, ha desarrollado un sistema de código abierto para crear aventuras gráficas directamente en el navegador, utilizando la etiqueta canvas de HTML5. Y además de crear este motor ha portado los siguientes juegos:

• Leisure Suit Larry in the Land of the Lounge Lizards
• Gold Rush!
• King’s Quest: Quest for the Crown
• King’s Quest II: Romancing the Throne
• King’s Quest III: To Heir is Human
• Police Quest: In Pursuit of the Death Angel
• Space Quest I: The Sarien Encounter
• Space Quest II: Vohaul’s Revenge
• The Black Cauldron

Personalmente lo he probado y me parece una pasada. El tiempo de respuesta es inmediato y la jugabilidad ha mejorado al no necesitar teclear las órdenes. Hay que recordar que en estas aventuras gráficas tan antiguas de Sierra, los personajes se movían con los cursores (ahora se puede usar el ratón también, aunque al algoritmo para resolver la ruta entre dos puntos no sea perfecto) y las acciones se escribían en inglés (take flower, talk to girl, order a drink) con el teclado. Sin embargo, con el nuevo sistema de Martin Kool, es posible abrir un menú contextual con el botón derecho del ratón y navegar por todas las acciones disponibles y todos los objetos visibles en la escena actual, lo que lo hace mucho más sencillo. Incluso podemos descubrir objetos nuevos (la mayoría parte del decorado) que podemos examinar para ver su descripción original y que en su momento no pudimos ver. Por ejemplo, nunca se me habría ocurrido examinar el arce “moose” o el ventilador “fan” en el primer Larry cuando lo jugué hace más de 15 años.

Estas son las características técnicas del motor para crear aventuras (y jugarlas).

• Compatible con Firefox 2+, IE 6+, Opera, Safari y Chrome
• Funciona en iPhone y Wii (aunque todavía necesita algunos arreglos)
• Se puede jugar con el ratón o con el teclado. Si te quedas atascado en algún punto (el algoritmo no es perfecto), puedes hacer doble click y el personaje se “teletransportará” a dicha posición.
• Multijugador: varias personas pueden jugar la misma aventura, ¡a la vez! sin necesidad de crear rooms o establecer conexiones. Tu vas jugando y simplemente aparecen más jugadores en la escena. Les verás moverse, coger cosas (tranquilo, cogen las suyas, no las tuyas, así que nadie te estropeará nada) y podrás hablar con ellos (chat multiplayer). Simplemente genial (se puede deshabilitar)
• Todas las áreas del juego son directamente accesibles a través de la barra de direcciones y es posible crear un bookmark con ellas.
• Se pueden salvar y cargar partidas simplemente a través de una url. Es decir, al salvar una partida se genera una dirección (que puedes guardar como bookmark) con tu estado actual (posición, objetos, puntuación, etc). Al acceder de nuevo a esa dirección, se recupera el estado anterior y puedes seguir jugando.

Si jugaste a las aventuras de Sierra antiguas, este es un buen momento para rendirles un homenaje y volverlas a jugar de nuevo de una manera mucho más comoda. Puedes navegar entre escenas, teletransportación del personaje con doble click, jugar y chatear con otros jugadores. Y gracias a su menú contextual, puedes explotar todos esos detalles del juego que en su momento no viste (acciones que no se te habrían ocurrido hacer u objetos que se te pasaron por alto).

Como se hizo

Todas estas aventuras antiguas de Sierra fueron desarrolladas con AGI, un intérprete propietario desarrollado por la compañía específicamente para estos juegos. Cuenta Martin Kool en su página que, allá por el 2003, estuvo trabajando en un proyecto que consistía en extraer todas las imágenes de los juegos de Sierra, utilizando para ella la herramienta WinAGI, un moderno editor de aventuras AGI. Cuatro años después, desarrolló una herramienta en .NET que convertía estas aventuras AGI en Javascript, extrayendo el código y los gráficos internos que faltaban, listos para ser mostrados en la web. Pero hubo un gran y enorme problea: Sierra usaba instrucciones GOTO por todo su código, incluso dentro de bloques ifs anidados, y esto hacía imposible de transformar en código Javascript, ya que carece de esta instrucción y no es fácilmente simularla. Martin Kool y Sjoerd Visscher, un colega suyo, dieron con la solución: modificaron el decompilador para que extrajera los secciones internas de las estructuras if y las pusieron todas juntas en un gran switch/case, el cual podía imitar los números de línea de las instrucciones GOTO, manteniendo el rendimiento.

Menuda locura…

Finalmente, con el código en Javascript “tuenado” para aceptar todos los GOTOs que tenían las aventuras de Sierra, los gráficos y un poco de programación, creó sarien.net con todas las aventuras. Una labor realmente dura, pero que ha tenido un resultado muy satisfactorio. La historia completa en su página.

Bola extra: Leisure Suit Larry in the Land of the Lounge Lizards (descarga juego original)

Si quieres jugar a este juego completo, aquí puedes descargarlo junto con sus manuales originales, donde se explica como jugar y algunos detalles interesantes más. También se incluyen algunos enlaces con la solución, una guía a las preguntas de la edad y a DOSBox, el emulador necesario para hacerlo funcionar en cualquier plataforma:

• Juego completo – Leisure Suit Larry in the land of the lounge lizards, formato ZIP.
• Enlace a la página de descarga de DOS Box, un emulador de un PCx86 con MSDos, con soporte para gráficos, sonido, ratón, joystick, etc necesario para jugar a todos estos juegos antiguos. Versión Windows, MacOS y Linux.
• Lista de respuestas a las preguntas que verifican que tienes más de 18 años, necesario para empezar a jugar (como es un juego de adultos, te hará 5 preguntas para verificar tu edad antes de empezar a jugar. Las preguntas son sobre temas americanos y jerga inglesa, por lo que pueden ser complicadas para los no americanos)
• Leisure Suit Larry 1 – Reference en PDF.
• Leisure Suit Larry 1 – Manual en PDF.
• Una guía para acabarse el juego y otra guía distinta más, por si acaso.

Vía: Sarien: Multiplayer Game Engine goes Open Source y Play Kings Quest, Space Quest, and More… Using Canvas Tag

Qué lo disfrutéis. :-)

Pero ¿qué pasa si queremos hacer pruebas unitarias creadas dinámicamente en función de datos externos? Es decir, no tenemos las clase de test A con sus métodos y la clase B con sus métodos, etc. si no que tenemos una sola clase, la cual queremos reutilizar una y otra vez como si fueran test distintos basándonos en datos distintos. Por ejemplo, hacer una prueba determinada como tantos ficheros haya en un carpeta X. La prueba consiste en algo tan tonto como validar que el fichero en cuestion contenga la letra “z”, en caso de que no la tenga, fallará.

Una solución pobre sería hacer una única clase de prueba con un método donde nos recorremos todos los ficheros a testear y realizamos la prueba pertinente en cada de ellos con sus assert o fails. .

Solución mala

import junit.framework.TestCase;
import java.io.File;

public class BadTest extends TestCase {

    public void testFiles() {
        File[] files = new File("/var/tmp").listFiles();
        System.out.println("Probando "+ files.length);
        for (File file : files) {
            System.out.println("Probando "+ file.getName());
            assertTrue(file.getName().contains("z"));
        }
    }
}

El problema de la solución mala es que si falla un fichero, toda la prueba finaliza y se dejan de validar los siguientes ficheros (y podemos tener miles y fallar en el primero), así que la prueba no vale.

Para este caso, lo ideal sería poder ejecutar una prueba distinta e independiente, basada en la misma clase de test, por cada uno de estos ficheros. Pero ¿cómo haríamos esto? Para hacerlo debemos crear primero una suite. Una suite no es más que una clase cualquiera (no tiene porqué heredar de ninguna otra clase de JUnit) que implementa el método estático suite(), retornando un instancia de la clase TestSuite de JUnit. Dentro de este método, es responsabilidad nuestra crear una nueva instancia de dicha clase y añadir las clases de test con el método addTest(). Y para hacer tantas pruebas como ficheros, lo que hacemos es crear una clase anónima que hereda de TestCase. Durante su creación, le pasamos el fichero a probar como parámetro final. A continuación, una prueba que si funciona.

Solución buena

import junit.framework.TestCase;
import junit.framework.TestSuite;

import java.io.File;
import java.io.IOException;

public class DinamicSuite {

    public static TestSuite suite() throws IOException {

        TestSuite suite = new TestSuite();

        for (File file : new File("/var/tmp").listFiles()) {

            suite.addTest(createDinamicTest(file, "Validando "+file.getName()));
        }

        return suite;
    }

    private static TestCase createDinamicTest(final File file, String name) {
        TestCase test = new TestCase() {
            public void runTest() throws Throwable {
                assertTrue(file.getName().contains("z"));
            }
        };
        test.setName(name);
        return test;
    }

}

Bastante sencillo y elegante, ¿no crees?