Etiqueta: juego javascript

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

Física en 2D, el tiro parabólico

Escrito por el 8 Febrero, 2012 | 7 comentarios

Después de más de un mes de vacaciones, ha llegado la hora de crear un nuevo tutorial. Aunque tengo en el tintero unas cuantas lecciones sobre sonido, inteligencia artificial y matemáticas aplicadas,  he preferido hacer antes un jueguecito muy simple como excusa para empezar a ver algo de física básica, y ya ques estamos, un nuevo tipo de detección de colisiones entre círculos y rectángulos, con el que podrás enriquecer tus propios juegos.

En esta ocasión sigo utilizando la programación orientada a objetos que vimos en el tutorial sobre juegos en javascript, y prácticamente el esqueleto de la aplicación es el mismo: Un constructor, algunos métodos getter y setter para recuperar y establecer atributos, una clase principal con la función loop que funcionará como bucle del juego, y que será llamada contínuamente con un intervalo, y otras funciones auxiliares que sirven para notificar al juego algún cambio de estado, como son las detecciones de colisiones que afecten al estado del juego, y para obtener las entradas de datos con el que hacer funcionar el juego.

Aquí teneis un enlace para ver el juego en movimiento, y aquí teneis el ZIP para descargarlo y probarlo en local.

» Leer la entrada entera

Etiquetas: , , , , , ,

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