Etiqueta: programacion orientada objetos

Tutorial de algoritmos en javascript, minimax: Tres en raya

Escrito por el 26 septiembre, 2013 | 16 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 Tiles 3ª parte: Cambiar de mapa, aparición de enemigos y scroll.

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

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

Escrito por el 18 diciembre, 2011 | 17 comentarios

Bienvenidos a mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. Para programar el código, me ha sido de gran utilidad el tutorial de Kevin Glass sobre cómo programar videojuegos en Java, donde también escogió el Space Invaders como punto de partida. Gran parte del código que he utilizado ha sido una conversión directa de sus rutinas, aunque he tenido que adaptar numerosas cosas al peculiar lenguage JavaScript, que si bien incluye la palabra “Java” en su nombre, se parece a aquél tanto como un huevo a una castaña. Para quien tenga la desgracia de no conocer el videojuego original, el juego trata sobre una invasión alienígena que el protagonista, una nave que sólo puede moverse de izquierda a derecha y disparar hacia arriba, debe evitar. Las naves alienígneas se van moviendo todas juntas y en zigzag desde la parte superior de la pantalla a la parte inferior, donde se encuentra el protagonista. El jugador debe destruir todas las naves antes de que lo alcancen, o perderá la partida.

Pero antes, la advertencia habitual: Estas lecciones están pensadas para personas con unos razonables conocimientos de programación previa, pero sin experiencia en la programación de juegos en 2D; el objetivo que buscamos es que aprendais las rutinas básicas que se necesitan para programar juegos en poco tiempo, con una buena comprensión de lo que está ocurriendo en el código en cada momento. Debo añadir que yo tampoco soy un experto en éste tema, y todo lo que he hecho aquí se basa en lo que he ido aprendiendo tanto de la experiencia propia como de haber ido viendo códigos y tutoriales de otras personas. Así que no me extrañaría que pueda haber mejores soluciones a la hora de afrontar los mismos miniproblemas que me han ido surgiendo mientras programaba el juego, por lo que si usas directamente el código, que sea bajo tu propio riesgo. Sin embargo, tampoco creo que esté del todo mal lo que he hecho. Y por su sencillez, puede ser una muy buena forma de empezar a conocer este mundillo. Por otro lado, si mientras lees ésto ves que puedes mejorar algo, no dudes en dejar un comentario con tu punto de vista; es posible que incluso añada tus consejos a éste tutorial.

Aquí tienes un enlace para poder probar un rato el juego y tener así una mejor perspectiva de lo que queremos hacer.
» Leer la entrada entera

Etiquetas: , , , , , ,

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