Entradas antiguas

Tutorial de algoritmos en javascript, minimax: Tres en raya

Escrito por el 26 septiembre, 2013 | 2 comentarios

Tras un largo periodo vacacional, aquí estamos de nuevo para explicar un nuevo tipo de algoritmo básico que nos ayudará con la IA de cierto tipo de juegos: Algoritmo minimax.

El juego donde vamos a usar este tipo de algoritmo será el tres en raya, también conocido como tres en línea, o tic tac toe en la pérfida Albión. El juego se juega típicamente con bolígrafo y papel, y consiste en rellenar tres celdas consecutivas de un tablero de 3 x 3 formando una línea vertical, horizontal o diagonal. Se juega por turnos, y normalmente se usan los símbolos “X” para el primer jugador y “O” para el segundo.

13915155-tic-tac-toe-simbolo

Para probar el juego, pincha aquí. Está hecho en HTML4 para representar el tablero y por supuesto javascript. No debería tener ningún problema en ejecutarse en cualquier tipo de máquina

» Leer la entrada entera

Etiquetas: , , , ,

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

Escrito por el 13 mayo, 2013 | 5 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 | 4 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: , ,

Uso práctico de vectores: Pong (y un poco de sonido)

Escrito por el 10 abril, 2013 | 2 comentarios

Tengo pendientes de realizar tutoriales sobre un juego estilo shooter en 2D y otro de carreras de coches, pero ví que hacía un intensivo uso de vectores en ellos, asi que rebusqué entre los muchos experimentos que tengo hechos desde hace tiempo buscando algún minijuego con el que poder hacer una introducción al mundo de los vectores, y lo encontré: Un Pong sencillito. Y éste es el resultado:
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, y los cursores.

Con éste famoso minijuego aprenderemos a usar vectores (matemáticos) orientados a los videojuegos, y su increíble utilidad para posicionar, rotar y mover entidades por el mundo, entre otras muchas funciones. Y ya que estamos, veremos cómo meter sonidos en nuestros juegos javascript usando el nuevo elemento AUDIO de HTML5. Y por si mis queridos lectores no tuvieran hermanos ni amigos con los que jugar, también incluiremos una inteligencia artificial tan estúpida que podría llegar fácilmente a presidente del gobierno.

» 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: , , , ,

Three.js Tutorial 2 – Colores, movimientos y 3D

Escrito por el 6 marzo, 2013 | 10 comentarios

Damos paso al segundo tutorial de la nueva serie centrada en 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 2, 3 y 4 de la serie de WebGL puro, debido a la sencillez de los cambios.
» Leer la entrada entera

Etiquetas: , , , ,

Three.js Tutorial 1 – El retorno del triángulo y el cuadrado

Escrito por el 4 marzo, 2013 | 8 comentarios

Bienvenidos al primer tutorial de la nueva serie centrada en 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 concreto, para este tutorial inicial, haremos lo mismo que hicímos en el viejo tutorial del triángulo y el cuadrado en WebGL.

Éste es el resultado de lo que se verá en un navegador que soporte webGL:

Abre este enlace para ver el Ejemplo en vivo de Three.js. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome.
» Leer la entrada entera

Etiquetas: , , , ,

Tutorial de Tiles 3ª parte: Cambiar de mapa, aparición de enemigos y scroll.

Escrito por el 31 mayo, 2012 | 8 comentarios

En el anterior capítulo del tutorial de Tiles dejamos al protagonista dando vueltas a un diminuto y desértico mapa, donde no hay nada que hacer. Asi que probablemente nuestro juego no será lider de ventas este mes. Necesitamos mapas más grandes, laberínticos, donde nos suponga un reto buscar la salida. Y enemigos. Decenas de enemigos. Cientos de enemigos. Miles de enemigos. Enemigos que nos acosen el resto de nuestra vida virtual. Asi que ése va a ser el objetivo de esta nueva entrega de tutoriales de valor incalculable, como empiezan a darse cuenta alguno de los lectores que se atreven a mancillarme el blog dejando sus comentarios.

Como novedad para el tutorial, pondré aquí unos enlaces con los que poder probar la última versión del juego, además del ZIP para correrlo en local:

Aquí tienes en enlace para jugar, y aquí el ZIP (con el editor de mapas que veremos más adelante).

El objetivo del juego es llegar a la casilla verde sano y salvo, esquivando por el camino a las temibles arañas mecánicas asesinas del infierno laberíntico bicolor (estoy pensando un nombre mejor para la versión de pago). Las casillas rojas son puntos por los que cambiar de mapa.

Sin embargo, esta versión tiene metido el manejo del Scroll, asi que para hacer menos traumático el seguimiento del tutorial, antes de introducir el scroll, programaremos ésta versión previa donde se muestra el mapa entero: Versión previa sin scroll.

Si eres un pobre de esos que viven debajo de un puente y no tienes un monitor de 23 flamantes pulgadas como yo, el mapa no te cabrá entero y aparecerán las típicas barras de scroll a la derecha y en la parte inferior del navegador. He ahí la indispensable necesidad de implementar un sistema de scroll propio en juegos con mapas grandes. Si no sabes lo que es scroll, cuando habras las dos versiones del juego, lo entenderás enseguida.

Además, el movimiento del jugador está acelerado, para que sea más fácil esquivar a los enemigos y alcanzar la casilla de cambio de mapa.

» Leer la entrada entera

Etiquetas: , , , , ,

Tutorial de Tiles 2ª parte, el héroe

Escrito por el 7 mayo, 2012 | 7 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 | 5 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: , , , , , ,

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