lo que quiere mi pais
TRANSCRIPT
![Page 1: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/1.jpg)
LO QUE QUIEREMI PAIS
Una personalización del PACMAN
CONINFO 2015FESIARA, San Salvador
29 Octubre - 2015
Eduardo José Ávilafacebook.com/gio.eduardo
avilaware.com
![Page 2: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/2.jpg)
Sobre el autor:
Eduardo José Ávilafacebook.com/gio.eduardo
avilaware.com
Desarrollador WebMejor Proyecto 2015,
ASPROCAdministrador Moodle
ConferencistaEmpresario
![Page 3: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/3.jpg)
Concepto y Finalidad
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 4: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/4.jpg)
- 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.
![Page 5: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/5.jpg)
- 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”
![Page 6: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/6.jpg)
Haciendo El mundo
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 7: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/7.jpg)
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)
![Page 8: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/8.jpg)
Haciendo los objetos
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 9: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/9.jpg)
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)
![Page 10: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/10.jpg)
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)
![Page 11: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/11.jpg)
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)
![Page 12: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/12.jpg)
De lo lógico al código
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 13: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/13.jpg)
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)
![Page 14: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/14.jpg)
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;}
![Page 15: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/15.jpg)
El movimiento
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 16: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/16.jpg)
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)
![Page 17: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/17.jpg)
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)
![Page 18: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/18.jpg)
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)
![Page 19: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/19.jpg)
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
![Page 20: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/20.jpg)
Nuestro juego(diseños previos)
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 21: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/21.jpg)
El laberinto de juegoCuadratura
Primer intento de laberinto
Primer laberintodefinitivo
![Page 22: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/22.jpg)
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
![Page 23: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/23.jpg)
Primer protagonista del juego
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 24: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/24.jpg)
El nuevo protagonista del juego
[ Paul ]
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 25: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/25.jpg)
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)
![Page 26: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/26.jpg)
Villanos personalizadosKiller Grunier
Otros villanos que nunca se usaron
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 27: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/27.jpg)
AspectosAdministrativos
LO QUE QUIERE MI PAIS
Por: Eduardo José Ávila (Gio)
![Page 28: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/28.jpg)
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
![Page 29: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/29.jpg)
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
![Page 30: Lo que quiere mi pais](https://reader035.vdocuments.net/reader035/viewer/2022062311/5888a3881a28ab264b8b64c5/html5/thumbnails/30.jpg)
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)