Etiqueta: javascript

Tutorial de algoritmos en javascript, backtracking recursivo: Cifras y letras

Escrito por el 13 Mayo, 2013 | 6 comentarios

En el último tutorial de Pong sobre IA hablé de algunos algoritmos útiles para encontrar soluciones. En esta nueva serie de tutoriales sobre algoritmos útiles, pretendo escribir un poco sobre varios de ellos, programando algún código donde haga uso de ellos a modo de ejemplo práctico. En esta primera lección, he pensado comenzar por ejemplo con el más sencillo de entender de todos, pero a costa de ser menos eficientes que otros algoritmos inteligentes.

Estos algoritmos se diseñaron para resolver problemas, pero también pueden ser usados para programar IAs de videojuegos, todo depende de la imaginación y capacidad de abstracción del programador. En este tutorial no pretendo hacer un análisis académico de la técnica backtracking, así que es posible que cometa algunos errores o mi implementación no sea la más eficiente de todas.

El código que va a servir de ejemplo es un algoritmo que resolverá la prueba de cifras de aquél gran concurso de televisión llamado “Cifras y Letras”, que daba por la segunda cadena de la televisión pública española hace la tira de años, y que actualmente aún sobrevive a nivel regional en algunas cadenas de televisión autonómicas.

La prueba de letras consistía en formar una palabra a partir de las 9 letras (vocales y consonantes) aleatorioas de las que disponían. Habían 3 condiciones: La palabra debía aparecer en el diccionario, no valían plurales, y no valían conjugaciones verbales a excepción del infinitivo, gerundio y participio (por ejemplo, jugar, jugando, jugado).

La prueba de cifras era parecida, pero con números. Disponían de 6 números de entre (1 al 9, 10, 25, 50, 75 y 100) con los que se podían realizar de dos en dos las siguientes operaciones: Sumar, restar, multiplicar y dividir. Los resultados siempre debían ser enteros positivos (la división tenía que ser exacta, y la resta siempre positiva), y esos resultados obtenidos podían usarse también para seguir haciendo operaciones. El objetivo era calcular un número lo más cercano posible, o el exacto, a otro número dado de 3 cifras.

Para el que no se acuerde, aquí van dos de los mejores concursantes de cifras de la historia:

Y en este link, el código que resuelve el problema, para que lo pruebes. He usado programación estructurada en vez de POO, porque la sencillez del código no requería un nivel de abstracción mayor.
» Leer la entrada entera

Etiquetas: , , ,

Tutorial de Pong en JavaScript II: Una IA más avanzada.

Escrito por el 30 Abril, 2013 | 5 comentarios

En el tutorial anterior expliqué cómo programar el juego Pong en JavaScript utilizando vectores, lo que me permitía hacer que la pelota modificara su ángulo de salida según la zona de la pala por donde le pegaba a la pelota. Esto hacía que las partidas fueran mucho más interesantes y divertidas porque la pelota ahora tiene un comportamiento un poco menos predecible.

También le metí una IA mu básica, excesívamente fácil de vencer, donde la pala manejada por la CPU únicamente perseguía la pelota. Lo que vamos a hacer en este tutorial es explicar los fundamentos básicos para programar una primera IA funcional que le complique la vida al jugador.

pong

Aquí teneis un enlace para poder probarlo online, y aquí está el zip con todo el código necesario para descargarlo y jugar en local. Las palas se mueven con W y S para el jugador 1 y los cursores para el jugador 2, siempre que los checkbox correspondientes estén desactivados.

» Leer la entrada entera

Etiquetas: , ,

Three.js Tutorial 3 – Texturas, iluminación y transparencias.

Escrito por el 5 Abril, 2013 | 3 comentarios

Seguimos con el tercer tutorial de la serie para Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En este tutorial uniremos lo que vimos en el tutorial 6, 7 y 8 de la serie de WebGL puro, debido a que los cambios no tienen mucha chicha.
» Leer la entrada entera

Etiquetas: , , , ,

Tutorial de Tiles 2ª parte, el héroe

Escrito por el 7 Mayo, 2012 | 8 comentarios

Bienvenidos al segundo capítulo de la serie. En el primer capítulo vimos los conceptos básicos para crear un mapa basado en tiles. Pero un juego sin un héroe que acabe con los malos, no es un juego ni es nada. Así que el capítulo que estamos a punto de comenzar tratará sobre cómo crear a nuestro protagonista principal, a cómo embellecerlo usando sprites animados, y a moverlo por el mapa detectando las colisiones con las paredes infranqueables. En uno de los comentarios del blog me acusaban de crear artículos demasiado largos. Pues toma dos tazas, para que sepan con quién están tratando.

Antes de empezar, como siempre, veámos el resultado que conseguiremos si seguimos éste tutorial:

Como viene siendo habitual, aquí teneis un enlace para verlo en movimiento, y aquí un zip para que lo descargues y lo pruebes en local.
» Leer la entrada entera

Etiquetas: , , , , , , , ,

Tutorial de Tiles 1ª parte, el primer mapa

Escrito por el 1 Mayo, 2012 | 6 comentarios

Como lo prometido es deuda, aquí tenemos el primer capítulo de una nueva serie de tutoriales, ésta vez centrados en una de las técnicas más antiguas y que mejores resultados a conseguido en el mundo de la programación de videojuegos: Los juegos de mapas basados en tiles (cuadrículas). Un mapa basado en tiles no es más que una matriz de dos dimensiones, por ejemplo mapa[filas][columnas]. En cada casilla de la matriz, metemos un objeto (o número) que indica el tipo de casilla que ocupa ese lugar. Todas las casillas ocupan el mismo tamaño, asi que luego, para pintar el mapa, sólo tenemos que ir recorriendo esa matriz, y pintando cuadrados con los colores o imágenes acordes al dato almacenado para esa posición.

Incluso podemos usar esa matriz, para detectar las colisiones. Por ejemplo, el valor 1 quiere decir que la casilla está vacía. Un 2, que es una pared infranqueable. Cuando ordenamos al personaje que se mueva, simplemente miramos en la matriz la posición a dónde queremos movernos. Si es una pared, entonces le impedimos al personaje dicho movimiento. Si es la casilla vacía, entonces lo movemos sin problemas. En resumen, ésta es la idea básica que hay que tener en mente.
» Leer la entrada entera

Etiquetas: , , , , , ,

Programación orientada a objetos en javascript

Escrito por el 5 Abril, 2012 | 25 comentarios

Bienvenidos a un nuevo tutorial sobre el apasionante mundo del desarrollo de juegos amateur en javascript. Hoy hablaré sobre cómo implementar el paradigma de la programación orientada a objetos (de ahora en adelante, POO) de la forma menos traumáica posible, emulando a la sintaxis de Java allí donde se pueda.

En la primera lección de cómo programar el Space Invaders hice una extensa introducción sobre una primer intento de POO en javascript, pero donde teníamos serias limitaciones, que veremos a continuación.

Desgraciadamente, asumiré que los que sigan este tutorial tienen conocimientos básicos de POO. En otro caso, deberías de leer antes aquél primer tutorial, o mejor aún, aprender POO por otras fuentes antes de empezar con mis tutoriales.

Primer intento de POO

Veamos alguno de los ejemplos que puse en aquel primer tutorial. La clase padre:

    function MiPrimeraClase(){
        //Atributos de la clase
        this.atributo1;
        this.atributo2;
        this.atributo3;
        //Construcor de la clase
        this.constructorBase=function(arg1,arg2,arg3){
            this.atributo1=arg1;
            this.atributo2=arg2;
            this.atributo3=arg3;
        };
        this.constructor=function(arg1,arg2,arg3){
            this.constructorBase(arg1,arg2,arg3);
        };
        //Métodos de la clase
        this.getAtributo1=function(){
            return this.atributo1;
        };
        this.setAtributo1=function(valor){
            this.atributo1=valor;
        };
        //Aquí irían más getter y setters de los otros atributos...
        this.metodo1=function(){
            this.atributo1=this.atributo2+this.atributo3;
        };
        this.metodo2=function(arg1){
            this.atributo3+=arg1;
            this.metodo1();
        };
    }

» Leer la entrada entera

Etiquetas: ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 5ª parte

Escrito por el 26 Diciembre, 2011 | 18 comentarios

Bienvenidos a la quinta parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y sobre cómo empezar a dibujar el juego en la pantalla. En el tercer tutorial nos centramos en darle animaciones a las entidades para que se movieran por la pantalla, lo que nos introdujo el concepto de tiempo delta. También aprendimos una forma de detectar y utilizar los eventos de teclado, por medio de notificaciones al bucle principal del juego para mover al jugador. En el cuarto tutorial hicimos que el jugador pudiera disparar y destruir enemigos, utilizando un sencillo algoritmo de detección de colisiones. Hoy veremos cómo mejorar el aspecto general del juego, sustituyendo los feos rectángulos de colores por imágenes en movimiento. En concreto, usaré las del Space Invaders original, para que así, además de gastar mi tiempo escribiendo unos tutoriales que nadie lee , pueda también acabar en la cárcel por una denuncia de Atari por violación de copyrigth.

Aquí puedes probar la versión animada del juego, para entender mejor lo que explicaremos a continuación. Y aquí puedes tienes el ZIP con todos los archivos necesarios.

» Leer la entrada entera

Etiquetas: , , , , , ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 4ª parte

Escrito por el 22 Diciembre, 2011 | 9 comentarios

Bienvenidos a la cuarta parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y sobre cómo empezar a dibujar el juego en la pantalla. En el tercer tutorial nos centramos en darle animaciones a las entidades para que se movieran por la pantalla, lo que nos introdujo el concepto de tiempo delta. También aprendimos una forma de detectar y utilizar los eventos de teclado, por medio de notificaciones al bucle principal del juego para mover al jugador. En éste tutorial completaremos el juego. Nos queda por hacer varias cosas: Permitir que el jugador pueda disparar, para lo que usaremos una nueva clase EntidadDisparo. Los disparos deben destruir naves alienígenas, lo que requerirá ser capaces de detectar las colisiones entre entidades que se produzcan en el juego. Y por último, queremos mostrar algun mensaje de fin de partida, ya sea porque hayamos ganado o perdido.


Aquí tienes una primera versión completa del juego, para entender mejor lo que explicaremos a continuación. Y aquí tienes el ZIP con todos ls archivos necesarios.
» Leer la entrada entera

Etiquetas: , , , , ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 3ª parte

Escrito por el 20 Diciembre, 2011 | 5 comentarios

Bienvenidos a la tercera parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y por último, vimos cómo empezar a dibujar el juego en la pantalla. Es hora de hacer que los aliens y el jugador se muevan un poco.

Aquí puedes probar lo que vamos a hacer en este tutorial. Y aquí tienes un ZIP con todos los archivos necesarios.
» Leer la entrada entera

Etiquetas: , , , , , , , ,

Tutorial canvas 2D – Cómo hacer un juego en javascript 2ª parte

Escrito por el 20 Diciembre, 2011 | 5 comentarios

Bienvenidos a la segunda parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. Por lo tanto, supongo que es el momento de empezar ya con la programación real del juego.

He estado meditando acerca de cual puede ser la mejor forma de abordar el código del juego. La primera forma más obvia es mostrar el código en el mismo orden que se ejecuta, que es lo que suelen hacer casi todos los tutoriales de programación que hay en la red. Esta forma me simplifica mucho el trabajo, y a vosotros os es más fácil seguir el tutorial mirando el código del ejemplo, pues practicamente sería ir leyéndolo de arriba a abajo. Sin embargo, me encontraría con el problema de que a veces comentar un método de alguna clase requeriría entender primero el funcionamiento de otra clase que aún no he explicado, por lo que al final, sería inevitable ir dando saltos de unas partes del código a otras, incluso alojadas en archivos distintos.

Así que finalmente me he decidido por la que me parece más natural: Explicar el código en el mismo orden en el que lo he programado. Nadie en su sano juicio pensaría que un juego (o cualquier aplicación ligeramente complicada) se programa del tirón, es decir, escribir línea a línea todo el código final de forma seguida. Todo depende de la dificultad del juego. Normalmente se programa un poco de una clase, se salta a otra clase que la maneja, se vuelve a la primera clase y se le añaden unos pocos atributos y métodos más, etc, siguiendo algun esquema mental que te agrade más. Concretamente, a mí me gusta programar primero una versión muy sencilla de las clases que representan las cosas (a partir de ahora las llamaré entidades, que queda mas guay) que se van a pitnar en pantalla. A continuación, hago una muy básica versión del bucle del juego para que pinte en pantalla a las entidades aún en estado muy primitivo. Así, al ver algo dibujándose, cojo moral para continuar con el código. Vuelvo a la clases de las entidades, y les añado un poco de código para que empiecen a moverse. Cuando todo está a mi gusto, me pongo con la entidad que representa al jugador, y a leer las teclas del teclado. Y así, poco a poco, el juego cada vez un poco más va cogiendo su forma final. También pruebo inmediatamente cada cosa que añado, para que si por desgracia cometo un error (algo que garantizo que te va a ocurrir) pueda solucionarlo instantáneamente y no arrastre bugs que luego pueden ser muy difíciles de detectar y corregir. Ya me entendereis cuando os pongais a programar vuestros propios juegos.

Aquí puedes ver lo que queremos conseguir en este tutorial.
» Leer la entrada entera

Etiquetas: , , , , , ,

Gestionado con Wordpress y Stripes Theme Entradas (RSS) | Comentarios (RSS)