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)



-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)



- 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



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[][]



Haciendo los objetos



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




0 – camino

1- pared

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




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’



De lo lógico al código



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



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



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

El movimiento



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



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;



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



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



Recordamos que Dx=-5

Nuestro juego(diseños previos)



El laberinto de juegoCuadratura

Primer intento de laberinto

Primer laberintodefinitivo

Creando los personajes



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



El nuevo protagonista del juego

[ Paul ]



Barreras móviles y objetos a capturar

Tanque rotativo

Agua agitada

Diamante de poder Sacos de dinero



Villanos personalizadosKiller Grunier

Otros villanos que nunca se usaron



AspectosAdministrativos



Metas en el proyectoLO QUE QUIERE MI PAIS


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



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

Technology