Lo que quiere mi pais

LO QUE QUIEREMI PAIS

Una personalización del PACMAN

CONINFO 2015FESIARA, San Salvador

29 Octubre - 2015

Eduardo José Ávilafacebook.com/gio.eduardo

avilaware.com

Sobre el autor:

Eduardo José Ávilafacebook.com/gio.eduardo

avilaware.com

Desarrollador WebMejor Proyecto 2015,

ASPROCAdministrador Moodle

ConferencistaEmpresario

Concepto y Finalidad

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

- La idea era hacer un pacman personalizado para divertirnos con mis compañeros (versión inicial)

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

-Al enterarme de la existencia de videojuegos que promueven la vida de crimen como una forma de triunfar, decidí crear un videojuego con el kernel de pacman que enseñen al niño de 7-9 años que el criminal no es un protagonista, sino que los protagonistas son las personas de bien.

- El juego esta creado al 100% código puro HTML, CSS y JAVASCRIPT para que al descargarlo también se pueda jugar sin internet. (no programas, no frameworks)

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

- La complejidad de algunas situaciones del juego al momento de programarlas, solo pudieron ser simplificadas aplicando análisis matemáticos que aunque básicos muy útiles.

Sin nada mas que agregar vamos a ver como se hizo el kernel de “pacpac” que luego se convirtió en la primara versión de el juego “lo que quiere mi país”

Haciendo El mundo

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Primero definimos una cuadratura:Tamaño del mundo y tamaño de cada cuadro

Luego definimos las paredes de nuestro mundo y los caminosLibres y le asignamos un numero

0 – camino1- pared

Mapa[][]

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Haciendo los objetos

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Creamos un vector por cada tipo de objeto a crear:Y a cada ejemplar del objeto le asignamos un numero UNICO, Este será el índex dentro del vector

0 – camino

1- pared

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Creamos un vector por cada tipo de objeto a crear:Y a cada ejemplar del objeto le asignamos un numero UNICO, Este será el índex dentro del vector

0 – camino

1- pared

pera[0] = ‘’pera[1] = ‘’pera[2] = ‘pera02’pera[3] = ‘pera03’pera[4] = ‘pera04’pera[5] = ‘pera05’

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Creamos un vector por cada tipo de objeto a crear:Y a cada ejemplar del objeto le asignamos un numero UNICO, Este será el índex dentro del vector

0 – camino

1- pared

pera[0] = ‘’pera[1] = ‘’pera[2] = ‘pera02’pera[3] = ‘pera03’pera[4] = ‘pera04’pera[5] = ‘pera05’

limon[0]=‘’limon[1] =‘’limon[2] =‘’limon[3] =‘’limon[4] =‘’limon[5] =‘’

limon[6] =‘limon06’limon[7] =‘limon07’limon[8] =‘limon08’limon[9] =‘limon09’

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

De lo lógico al código

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Creamos un vector por cada tipo de objeto a crear:Cada celda de la matriz le damos un valor de 20x20 y esto lo usamos para codificar el mundo que ya tenemos a nivel lógico

TOP (eje y)

LEFT (eje x)7

2

Left = (left logico) * 20Top = (top logico) * 20

Left logico = 7Top logico = 2

Entonces

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Con estos datos de 3, podemos crear un div en la posicion Adecuada:

Left = 140Top = 40

EN HTML<div id=“pera03” class=“pera t40 l140”></div>

Recordemos que 3 solo tiene valor en vector pera[]

EN JSMapa[2][7] = 3

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

CSS.pera{…}.t40{top:40px;}.l140{left:140px;}

El movimiento

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

El personaje se desplaza de celda en celda, es decir avanzando De 20px en 20px según la dirección que tenga. Y es el jugador quien decide la dirección.

Pero antes de desplazarseConsultara en la matriz de Mapa que es lo que hay enLa próxima casilla:

Si hay 1 no avanzará

Si es 0 avanzará

De 2 a 5 buscará en el arrayDe peras el valor del id, Eliminará esa pera Especificamente y ganaráEl puntaje que dá la pera

De 6 a 9 lo mismo pero conEl vector limon

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Para este ejemplo si el personaje sube

- En mapa[top][lef] No hay un 1 así que se puede subir.- Hay un 2, así que trabajaremos con pera[]- Usamos pera[2] que tiene el valor “pera02”- Aplicamos un getElementById para hacer que el div con ese id (“pera02”) deje de mostrarse-De forma compacta esta es la linea de codigo JS

document.getElementByid(pera[mapa[top][left]]).style.display = “none”;

-Luego avanzamos hacia arriba exactamente en 20px-Y además eliminaremos a 2 del mapa:

mapa[top][left] = 0;

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

En cada paso que dan, los villanos deciden su próximo Movimiento usando un sencillo análisis matemático

TOP (eje y)

LEFT (eje x)8

3

3

6Villano_x = 3Villano_y = 6

persj_x = 8persj_y = 3

Dx = Villano_x – Persj_x (-5)Dy = Villano_y – Persj_y (3)

Si abs(Dx) > abs(Dy) entonces trabajamos con xSino trabajamos con y

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Los villanos deciden hacia donde moverse por un sencillo análisis matemático

TOP (eje y)

LEFT (eje x)8

3

3

6Villano_x = 3Villano_y = 6

persj_x = 8persj_y = 3

Esta vez abs(Dx) es mayor

Si Dx > 0 avanza a la izquierdaSino avanza a la derecha

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Recordamos que Dx=-5

Nuestro juego(diseños previos)

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

El laberinto de juegoCuadratura

Primer intento de laberinto

Primer laberintodefinitivo

Creando los personajes

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Al principio se pretendía hacer propaganda a facebook.com/meme.camisetas.sv

Empresa de estampado de camisetas.Luego el proyecto se enfoca en temática social

Primer protagonista del juego

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

El nuevo protagonista del juego

[ Paul ]

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Barreras móviles y objetos a capturar

Tanque rotativo

Agua agitada

Diamante de poder Sacos de dinero

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Villanos personalizadosKiller Grunier

Otros villanos que nunca se usaron

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

AspectosAdministrativos

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Metas en el proyectoLO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Publicidad

Reconocimiento extra universitario

Adición de Publicidad pagada

Definición de lenguaje y framework propio

Plataforma multijuegos y mejora continua

Julio 2015

Agosto 2015

Diciembre 2015

Abril2016

febrero2016

Costos hasta diciembre2015

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)

Mano de obra:Desarrollador---------------------------------------- $ 7,727.00Investigador------------------------------------------ $ 3,823.50

Multimedia:Sonido -------------------------------------------------- $ 18.00Artes graficas --------------------------------------- -$ 60.00

MovilidadRutas de buses --------------------------------------$ 30.00Viáticos ------------------------------------------------ $ 50.00

Total ---------------------------------------------$ 11,708.50

Mi gratitudA mis compañeros de soporte técnico por apoyarme con sus

Ideas y criticas de cómo se va desarrollando el juego

Agradecimiento especial al Tec. En computación Oswaldo MartínezPor ser el primero que me ayudo en las artes graficas

avilaware.com/lqqmp

LO QUE QUIERE MI PAIS

Por: Eduardo José Ávila (Gio)